Deploy Angular App w/ Proxy for One Route - node.js

I have an Angular app w/ a proxy that's working well in local. There's one route that utilizes it with a Node API call.
Node.js
const express = require('express');
const api_service = require('./apiService');
const app = express();
app.get('/getData/:date', (req, res) => {
const date = req.params.date;
api_service.fetchData(...)
.then(response => {
res.json(response)
})
.catch(error => {
res.send(error)
})
})
app.listen(3000, () => {
console.log("Server started in port 3000!");
});
Function in my Angular Service:
fetchData(date: string) {
const requestOptions: Object = {
responseType: 'text',
};
this._http
.get<string>('/api/getData/' + date)
.pipe(
map((data) => {
this.result = data;
})
)
.subscribe((data) => {
this.mediaSource.next(this.result);
if (Object.keys(this.result).length != 0) {
this.history.push(this.result);
}
});
}
proxy-prod.config.json
{
"/api/*": {
"target": "https://example.com",
"secure": false,
"changeOrigin": true,
"logLevel": "debug",
"pathRewrite": { "^/api": "" }
}
}
proxy-local.conf.json
{
"/api/*": {
"target": "http://localhost:3000",
"pathRewrite": {
"^/api": ""
},
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}
angular.json
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ui-dev:build",
"proxyConfig": "proxy-local.conf.json"
},
"configurations": {
"production": {
"browserTarget": "ui-dev:build:production",
"proxyConfig": "proxy-prod.config.json"
}
}
},
ng serve works perfectly.
ng serve --prod and ng build --aot --prod --output-hashing none do not.
The error I'm getting is:
headers: d, status: 200, statusText: 'OK', url: 'myexample.com', ok: false
I've tried this in my request but they cause errors too:
const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');
{ headers, responseType: 'text'}
Been searching, testing, and dissecting code for many hours and not sure how to proceed. Can you anyone assist?
Thanks

Related

Problem with CORS in Nest.js app after deployment on Vercel

POST request in my Nest.js app not working after deployment on Vercel and I receive CORS error, but cors in my app is enable and when I send GET request all working. When I test my request in postman all working. I am not sure but maybe this error can happen through that I use React Query or problem with vercel and I not right deployment my app.
I receive such error:
Access to XMLHttpRequest at 'https://server-store.vercel.app/api/auth/login' from origin 'https://next-store-liard-three.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
And I enabled CORS such method:
app.enableCors({
origin: ['http://localhost:3000', 'https://next-store-liard-three.vercel.app'],
allowedHeaders: ['Accept', 'Content-Type'],
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
preflightContinue: false,
optionsSuccessStatus: 204,
credentials: true,
});
This is my file vercel.json:
{
"version": 2,
"name": "next-store-server",
"buildCommand": "npm start",
"installCommand": "npm install",
"builds": [
{
"src": "dist/main.js",
"use": "#vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "dist/main.js",
"methods": ["GET", "POST", "PATCH", "PUT", "DELETE"]
}
]
}
Also I try enable CORS other way, but it is not help me.
I try enable CORS, such method:
const app = await NestFactory.create(AppModule, { cors: true });
On client I using Next.js, reactQuery and axios for sending request
import axios from "axios";
import { FAuth, IUser } from "./Auth.types";
const AuthService = {
async registration(dto: IUser) {
const { data } = await axios.post<FAuth>(
`${process.env.NEXT_PUBLIC_SERVER_API_URL}/api/auth/registration`,
dto,
);
return data;
},
async login(dto: IUser) {
const { data } = await axios.post<FAuth>(`${process.env.NEXT_PUBLIC_SERVER_API_URL}/api/auth/login`, dto);
return data;
},
};
This my custom useMutation hooks
export const useRegistration = () =>
useMutation((dto: Omit<IUser, "_id">) => AuthService.registration(dto), {
onSuccess: () => {
toast.success("Success", {
theme: "colored",
});
},
onError: (data: any) => {
toast.error(data.response.data.message, {
theme: "colored",
});
},
});
export const useLogin = () =>
useMutation((dto: Omit<IUser, "_id">) => AuthService.login(dto), {
onSuccess: () => {
toast.success("Success", {
theme: "colored",
});
},
onError: (data: any) => {
toast.error(data.response.data.message, {
theme: "colored",
});
},
});
Try to add "OPTIONS" into methods, this worked for me
vercel.json:
{
"version": 2,
"builds": [{ "src": "src/main.ts", "use": "#vercel/node" }],
"routes": [
{
"src": "/(.*)",
"dest": "src/main.ts",
"methods": ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"]
}
]
}

Mocha: Nested describe() structure fails to register tests when using firebase rules testing library (SDK 9)

I have a Typescript Mocha setup that I'm using to test my Firestore rules. It uses the latest version of the #firebase/rules-unit-testing library that is part of the Version 9 Firebase SDK.
It also uses the latest Firestore client library that has the newer API that is tree-shakable.
My problem is that Mocha doesn't seem to be able to recognise tests in my nested describe() structure AFTER I call the initializeTestEnvironment() promise.
If you see the output you will see only two tests get executed.
package.json
{
"name": "blocks",
"version": "1.0.0",
"description": "A new Flutter project.",
"main": "index.js",
"private": true,
"scripts": {
"setup": "firebase setup:emulators:firestore",
"test": "firebase emulators:exec --only firestore \"mocha firestore.rules.spec.ts\""
},
"devDependencies": {
"#firebase/rules-unit-testing": "^2.0.2",
"#types/mocha": "^8.2.2",
"firebase-tools": "^10.7.1",
"chai": "^4.3.4",
"mocha": "^9.2.2",
"ts-node": "^9.1.1",
"typescript": "^4.2.4"
},
"mocha": {
"recursive": true,
"reporter": "nyan",
"require": "ts-node/register",
"watch-extensions": "ts"
},
"prettier": {
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true
}
}
tsconfig.json
{
"compilerOptions": {
"esModuleInterop": true,
"importHelpers": true,
"module": "commonjs",
"target": "es2019",
"types": [
"node"
]
}
}
firestore.rules.spec.ts
import { before, beforeEach, after } from 'mocha'
import { readFileSync } from 'fs'
import {
assertFails,
assertSucceeds,
initializeTestEnvironment,
} from '#firebase/rules-unit-testing'
import { doc, setDoc, getDoc, updateDoc, deleteDoc } from 'firebase/firestore'
const PROJECT_ID = 'blocks-firestore-rules-testing'
describe('A test that should get run', async () => {
it('should pass', async () => {
return true
})
})
describe('Firestore rules', async () => {
it('should pass also', async () => {
return true
})
const testEnv = await initializeTestEnvironment({
projectId: PROJECT_ID,
firestore: {
rules: readFileSync('firestore.rules', 'utf-8'),
},
})
beforeEach(async () => {
testEnv.cleanup()
await testEnv.clearFirestore()
})
after(async () => {
testEnv.cleanup()
await testEnv.clearFirestore()
})
const uid = 'normal-user'
const user = testEnv.authenticatedContext(uid)
const userRef = doc(user.firestore(), `users/${uid}/`)
const dummyUserDoc = { displayName: 'John Smith' }
it('ensures can create their own user document', async () => {
await assertSucceeds(setDoc(userRef, dummyUserDoc))
})
it('ensures they can read their user document', async () => {
testEnv.withSecurityRulesDisabled(async () => {
setDoc(userRef, dummyUserDoc)
})
await assertSucceeds(getDoc(userRef))
})
it('ensures they can update their user document', async () => {
testEnv.withSecurityRulesDisabled(async () => {
setDoc(userRef, dummyUserDoc)
})
await assertSucceeds(updateDoc(userRef, { foo: 'baz' }))
})
it('ensures cannot delete their user document', async () => {
testEnv.withSecurityRulesDisabled(async () => {
setDoc(userRef, dummyUserDoc)
})
await assertFails(deleteDoc(userRef))
})
})
Command line output:
➜ blocks git:(main) ✗ npm test
> blocks#1.0.0 test
> firebase emulators:exec --only firestore "mocha firestore.rules.spec.ts"
i emulators: Starting emulators: firestore
i firestore: Firestore Emulator logging to firestore-debug.log
i Running script: mocha firestore.rules.spec.ts
2 -_-_,------,
0 -_-_| /\_/\
0 -_-^|__( ^ .^)
-_- "" ""
2 passing (2ms)
✔ Script exited successfully (code 0)
i emulators: Shutting down emulators.
i firestore: Stopping Firestore Emulator
i hub: Stopping emulator hub

Trouble connecting express api to nuxt app and mongodb

It's been seriously 10 days since i'm trying to deploy my web app online. i've gone back and forth between heroku and digital ocean. nothing solved. i've asked questions here all i get is a long post with technical terms i' not able to understand. Here's my problem :
i have a nuxt app with express.js in the backend and mongodb as the database. At first i had trouble with configuring host and port for my nuxt app. once i fixed it, anoither problem appeared : i'm not receiving data from the database. i don't if it's something related to database connection or with the express api configuration.
here's my nuxt config
export default {
ssr: false,
head: {
titleTemplate: 'Lokazz',
title: 'Lokazz',
meta: [
{ charset: 'utf-8' },
{
name: 'viewport',
content: 'width=device-width, initial-scale=1'
},
{
hid: 'description',
name: 'description',
content:
'Lokazz'
}
],
link: [
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&amp;subset=latin-ext'
}
]
},
css: [
'swiper/dist/css/swiper.css',
'~/static/fonts/Linearicons/Font/demo-files/demo.css',
'~/static/fonts/font-awesome/css/font-awesome.css',
'~/static/css/bootstrap.min.css',
'~/assets/scss/style.scss'
],
plugins: [
{ src: '~plugins/vueliate.js', ssr: false },
{ src: '~/plugins/swiper-plugin.js', ssr: false },
{ src: '~/plugins/vue-notification.js', ssr: false },
{ src: '~/plugins/axios.js'},
{ src: '~/plugins/lazyLoad.js', ssr: false },
{ src: '~/plugins/mask.js', ssr: false },
{ src: '~/plugins/toastr.js', ssr: false },
],
buildModules: [
'#nuxtjs/vuetify',
'#nuxtjs/style-resources',
'cookie-universal-nuxt'
],
styleResources: {
scss: './assets/scss/env.scss'
},
modules: ['#nuxtjs/axios', 'nuxt-i18n','vue-sweetalert2/nuxt', '#nuxtjs/auth-next', "bootstrap-vue/nuxt"],
bootstrapVue: {
bootstrapCSS: false, // here you can disable automatic bootstrapCSS in case you are loading it yourself using sass
bootstrapVueCSS: false, // CSS that is specific to bootstrapVue components can also be disabled. That way you won't load css for modules that you don't use
},
i18n: {
locales: [
{ code: 'en', file: 'en.json' },
],
strategy: 'no_prefix',
fallbackLocale: 'en',
lazy: true,
defaultLocale: 'en',
langDir: 'lang/locales/'
},
router: {
linkActiveClass: '',
linkExactActiveClass: 'active',
},
server: {
port: 8080, // default: 3000
host: '0.0.0.0' // default: localhost
},
auth: {
strategies: {
local: {
token: {
property: "token",
global: true,
},
redirect: {
"login": "/account/login",
"logout": "/",
"home": "/page/ajouter-produit",
"callback": false
},
endpoints: {
login: { url: "/login", method: "post" },
logout: false, // we don't have an endpoint for our logout in our API and we just remove the token from localstorage
user:false
}
}
}
},
};
here's my package.json
{
"name": "martfury_vue",
"version": "1.3.0",
"description": "Martfury - Multi-purpose Ecomerce template with vuejs",
"author": "nouthemes",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "8080"
}
},
}
here's my repository.js file
import Cookies from 'js-cookie';
import axios from 'axios';
const token = Cookies.get('id_token');
const baseDomain = 'https://lokazzfullapp-8t7ec.ondigitalocean.app';
export const customHeaders = {
'Content-Type': 'application/json',
Accept: 'application/json'
};
export const baseUrl = `${baseDomain}`;
export default axios.create({
baseUrl,
headers: customHeaders
});
export const serializeQuery = query => {
return Object.keys(query)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`)
.join('&');
};
an example of an api call i make locally that works without a problem :
import Repository, { serializeQuery } from '~/repositories/Repository.js';
import { baseUrl } from '~/repositories/Repository';
import axios from 'axios'
const url = baseUrl;
export const actions = {
async getProducts({ commit }, payload) {
const reponse = await axios.get(url)
.then(response => {
commit('setProducts', response.data);
return response.data;
})
.catch(error => ({ error: JSON.stringify(error) }));
return reponse;
},
}
here's my index.js (express file)
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose')
const cors = require('cors');
//const url = 'mongodb://localhost:27017/lokazz'
const url = 'mongodb+srv://lokazz:zaki123456#cluster0.hsd8d.mongodb.net/lokazz?retryWrites=true&w=majority'
const jwt = require('jsonwebtoken')
const con = mongoose.connection
mongoose.connect(url, {useNewUrlParser:true}).then(()=>{
const app = express();
// middlleware
app.use(express.json())
app.use(cors());
//products routes
const products = require('./product/product.router');
app.use('/', products)
//users routes
const users = require('./user/user.router');
app.use('/', users)
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server started on port ${port}`));
}).catch(error => console.log(error.reason));
con.on('open', () => {
console.log('connected...')
})
My directory structure
the error i get after the api request, meaning it's not receving any data.
ebd1ecd.js:2 TypeError: Cannot read properties of undefined (reading 'username')
at f.<anonymous> (c88240c.js:1)
at f.t._render (ebd1ecd.js:2)
at f.r (ebd1ecd.js:2)
at wn.get (ebd1ecd.js:2)
at new wn (ebd1ecd.js:2)
at t (ebd1ecd.js:2)
at f.In.$mount (ebd1ecd.js:2)
at init (ebd1ecd.js:2)
at ebd1ecd.js:2
at v (ebd1ecd.js:2)
idk if it's a problem with mongodb connection cluster or the api call.

configuring base url nuxt for digital ocean deployement

i'm building ecommerce web app using nuxt and node.js/express. when i'm building locally i have no problem making axios api calls. base url is configured as the following
const baseDomain = 'http://localhost:8080/';
then all i do is
async getProducts({ commit }, payload) {
const reponse = await Repository.get(
`${baseUrl}/products?${serializeQuery(payload)}`
)
.then(response => {
commit('setProducts', response.data);
return response.data;
})
.catch(error => ({ error: JSON.stringify(error) }));
return reponse;
},
now the problem is when i move my whole app to digital ocean, i tried the following changes
const baseDomain = 'https://0.0.0.0:8080/';
my nuxt.js config
export default {
ssr: false,
head: {
titleTemplate: 'Lokazz',
title: 'Lokazz',
meta: [
{ charset: 'utf-8' },
{
name: 'viewport',
content: 'width=device-width, initial-scale=1'
},
{
hid: 'description',
name: 'description',
content:
'Lokazz'
}
],
link: [
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&amp;subset=latin-ext'
}
]
},
css: [
'swiper/dist/css/swiper.css',
'~/static/fonts/Linearicons/Font/demo-files/demo.css',
'~/static/fonts/font-awesome/css/font-awesome.css',
'~/static/css/bootstrap.min.css',
'~/assets/scss/style.scss'
],
plugins: [
{ src: '~plugins/vueliate.js', ssr: false },
{ src: '~/plugins/swiper-plugin.js', ssr: false },
{ src: '~/plugins/vue-notification.js', ssr: false },
{ src: '~/plugins/axios.js'},
{ src: '~/plugins/lazyLoad.js', ssr: false },
{ src: '~/plugins/mask.js', ssr: false },
{ src: '~/plugins/toastr.js', ssr: false },
],
buildModules: [
'#nuxtjs/vuetify',
'#nuxtjs/style-resources',
'cookie-universal-nuxt'
],
styleResources: {
scss: './assets/scss/env.scss'
},
modules: ['#nuxtjs/axios', 'nuxt-i18n','vue-sweetalert2/nuxt', '#nuxtjs/auth-next', "bootstrap-vue/nuxt"],
bootstrapVue: {
bootstrapCSS: false, // here you can disable automatic bootstrapCSS in case you are loading it yourself using sass
bootstrapVueCSS: false, // CSS that is specific to bootstrapVue components can also be disabled. That way you won't load css for modules that you don't use
},
i18n: {
locales: [
{ code: 'en', file: 'en.json' },
],
strategy: 'no_prefix',
fallbackLocale: 'en',
lazy: true,
defaultLocale: 'en',
langDir: 'lang/locales/'
},
router: {
linkActiveClass: '',
linkExactActiveClass: 'active',
},
server: {
port: 8080, // default: 3000
host: '0.0.0.0' // default: localhost
/// this one works fine , the digital ocean support team told me to do this.
},
auth: {
strategies: {
local: {
token: {
property: "token",
global: true,
},
redirect: {
"login": "/account/login",
"logout": "/",
"home": "/page/ajouter-produit",
"callback": false
},
endpoints: {
login: { url: "/login", method: "post" },
logout: false, // we don't have an endpoint for our logout in our API and we just remove the token from localstorage
user:false
}
}
}
},
};
package.json file
{
"name": "martfury_vue",
"version": "1.3.0",
"description": "Martfury - Multi-purpose Ecomerce template with vuejs",
"author": "nouthemes",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "8080"
}
},
}
server index.js config
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose')
const cors = require('cors');
const url = 'mongodb+srv://****************************' // this works fine i manage to pull data from the cluster without a problem
const jwt = require('jsonwebtoken')
mongoose.connect(url, {useNewUrlParser:true}).then(()=>{
const app = express();
// middlleware
app.use(express.json())
app.use(cors());
//products routes
const products = require('./product/product.router');
app.use('/', products)
//users routes
const users = require('./user/user.router');
app.use('/', users)
const port = process.env.PORT || 8080;
app.listen(port, () => console.log(`Server started on port ${port}`));
}).catch(error => console.log(error.reason));
const con = mongoose.connection
con.on('open', () => {
console.log('connected...')
})
here's my github repo and file structure. the server and api folder is lokazz_api.
I would recommend you use Environment variables for this.
Install dotenv in your project and then configure it in your nuxt.config.js file.
Create a .env file in your root directory, and then set a key-value pair like this:
VUE_APP_BASE_URL="<value>"
Note you need to prefix your keys with VUE_APP.
Your .env should look like this:
VUE_APP_BASE_URL="http://localhost:8080/"
You can modify your variable to this: const baseDomain = process.env.BASE_URL;
Remember to add the .env file in the .gitignore file.
On your digital ocean terminal, you can create a .env file using the touch .env command, and then use Vim or Nano to modify the file.
If your project runs fine with an .env file, it should work as good on production.
DO NOT commit .env but rather aim to your Digitalocean dashboard and look in the settings. You should see a place where you can input your pair and then proceed.
As shown here: https://docs.digitalocean.com/products/app-platform/how-to/use-environment-variables/#using-bindable-variables-within-environment-variables

Problem with app update yml files is not generated in electron?

I have a problem with the auto-update of electron app,
After I finished all the app parts and I am trying to push it to my custom update server , I found this error message in my logger :
Error unknown ENOENT: no such file or directory, open
'C:\{appPath}\{appName}\resources\app-update.yml'
and here is my package.json build configuration
"build": {
"appId": "com.server.app",
"copyright": "Copyright company name",
"generateUpdatesFilesForAllChannels": true,
"win": {
"target": "nsis",
"icon": "build/icon.ico"
},
"mac": {
"target": "dmg",
"artifactName": "appName.dmg",
"icon": "build/icon.icns"
},
"dmg": {
"background": "build/i-bg.tif",
"icon": "build/setup.icns",
"iconSize": 80,
"title": "${productName}-${version}",
"window": {
"width": 540,
"height": 380
}
},
"nsis": {
"artifactName": "${productName}-Setup-${version}.${ext}",
"oneClick": false,
"perMachine": false,
"allowToChangeInstallationDirectory": true,
"installerIcon": "build/setup.ico",
"uninstallerIcon": "build/setup.ico",
"installerHeader": "build/installerHeader.bmp",
"installerSidebar": "build/installerSidebar.bmp",
"runAfterFinish": true,
"deleteAppDataOnUninstall": true,
"createDesktopShortcut": "always",
"createStartMenuShortcut": true,
"shortcutName": "AppName",
"publish": [{
"provider": "generic",
"url": "https://my-update-server/path"
}]
},
"extraFiles": [
"data",
"templates"
]
},
"publish": [{
"provider": "generic",
"url": "https://my-update-server/path"
}],
and here is the code for triggering the auto-update
//-----------------------------------------------
// Auto-Update event listening
//-----------------------------------------------
autoUpdater.on('checking-for-update', () => {
splashLoadingStatus(`Checking for ${appName} update ...`);
})
autoUpdater.on('update-available',(info) => {
splashLoadingStatus(`${appName} new update available.`);
})
autoUpdater.on('update-progress',(progInfo) => {
splashLoadingStatus(`Download speed: ${progInfo.bytesPerSecond} - Download ${progInfo.percent}% (${progInfo.transferred}/${progInfo.total})`);
})
autoUpdater.on('error' , (error) => {
dialog.showErrorBox('Error', error.message);
})
autoUpdater.on('update-downloaded', (info) => {
const message = {
type: 'info',
buttons: ['Restart', 'Update'],
title: `${appName} Update`,
detail: `A new version has been downloaded. Restart ${appName} to apply the updates.`
}
dialog.showMessageBox(message, (res) => {
if(res === 0) {
autoUpdater.quitAndInstall();
}
})
})
.....
autoUpdater.setFeedURL('https://my-update-server/path');
autoUpdater.checkForUpdatesAndNotify();
.....
then when I am pushing the build it will do everything correct with the latest.yml file generating but after installing I found the app-update.yml is not there ...
If you have a problem with missing app-update.yml and dev-app-update.yml then paste the following code into index.js:
import path from "path"
import fs from "fs"
const feed = 'your_site/update/windows_64'
let yaml = '';
yaml += "provider: generic\n"
yaml += "url: your_site/update/windows_64\n"
yaml += "useMultipleRangeRequest: false\n"
yaml += "channel: latest\n"
yaml += "updaterCacheDirName: " + app.getName()
let update_file = [path.join(process.resourcesPath, 'app-update.yml'), yaml]
let dev_update_file = [path.join(process.resourcesPath, 'dev-app-update.yml'), yaml]
let chechFiles = [update_file, dev_update_file]
for (let file of chechFiles) {
if (!fs.existsSync(file[0])) {
fs.writeFileSync(file[0], file[1], () => { })
}
}
I fixed it by using autoUpdater.setFeedURL() before autoUpdater.checkForUpdates(). Below is the code snippet that works for github releases. Also, please make sure there is existing release in Github before running this code.
import { autoUpdater } from "electron-updater";
// ...
autoUpdater.setFeedURL({
provider: "github",
owner: "org",
repo: "repo",
});

Resources