I have a React App with Node(Express) as the backend. React is requesting for an end point /api/users and Node is serving with a static response. This is working fine in local.
The same app has been deployed in firebase and the React part is not able to consume the Node /api/user part, api call failing.
Below is the project structure -
The node part is in server.js
Package.json has the proxy part directing to the Node Port
The scripts part in package.json is as given below -
"scripts": {
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "nodemon server.js",
"start": "concurrently \"npm run server\" \"react-scripts start\""
},
Not sure what is missing? Just to reiterate that this is working in my local, but not working after deploying to firebase
Related
I have this Tic-Tac-Toe game. It is already deployed to AWS Amplify. I also wanted it to deploy on Github Pages, so I added the required scripts & homepage property in package.json. But after deploying it on Github Pages, I am started getting blank screen on my AWS Amplify deployment.
After looking deeper into the issue, I found that the homepage property value is causing the problem. If I remove it or set empty in package.json, my AWS Amplify deployment starts working but Github Pages stops working at the same time & vice-versa.
Here is my how my packae.json looks like:
{
"name": "app-client",
"version": "0.1.0",
"private": true,
"homepage": "https://classhacker.github.io/tic-tac-toe/",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"test": "react-scripts test"
},
...
}
What should I do now? If anybody faced the same problem earlier, please let me know the steps to solve this.
I have a Next.js application and I want to connect it to a Node.js backend.
If i put the file server.js in the same folder of the Next.js application I can run the application through these scripts:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "set NODE_ENV=production node server.js",
"lint": "next lint"
}
I want to put all the backend files in another folder (server.js too) , but in this case I can't run the application.
What I have to do? Thanks
I use parcel-bundler on a react app. But I realized I need to redirect all files index.html using HTTP files but when I add a .htaccess file to my public directory. It's not added to the dist folder after building the project.
How can I achieve this without adding files manually after building?
You can set up a custom copy script in your package.json that you can use in your build script or wherever you need :)
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && npm run copy",
"test": "react-scripts test",
"eject": "react-scripts eject",
"copy": "cp public/.htaccess dist"
},
Note: Windows users will need to use the copy command rather than cp
I am trying to target multiple environments from local while executing React app.
1. Development
2. Staging
3. Production
I am also trying to test for offline mode in any of the environments. So, the scripts what I have configured is as follows:
"staging-server": "nodemon server.js --environment=staging",
"staging": "concurrently -k \"npm:staging-server\" \"NODE_ENV='staging' PORT=3003 react-scripts start\"",
"prod": "npm run build && forever server.js --environment=production"
I am able to fetch environment arg using args inside my Express, but my local ui app is still showing development only when I console for process.env.NODE_ENV. I am also trying to set NODE_ENV with same line for staging, but still no luck. PORT setting is working but, the app is running in 3000 and 3003 both ports.
How to get rid of this? I would like to understand the staging configuration as well.
As per the docs, we cannot override NODE_ENV, but there is a room to create our own custom variables starting with REACT_APP_. So i configured to look as below:
Reference: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
"staging": "concurrently -k \"npm:staging-server\" \"cross-env REACT_APP_ENVIRONMENT='staging' PORT=3003 react-scripts start\"",
And inside my UI application, I can fetch its value by consoling it like this:
console.log('REACT_APP_ENVIRONMENT => ', process.env.REACT_APP_ENVIRONMENT);
I build the build with REACT_APP_STAGE and use it in my application as process.env.REACT_APP_STAGE.
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "REACT_APP_STAGE=local npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"build-dev": "REACT_APP_STAGE=dev react-scripts build",
"build-prod": "REACT_APP_STAGE=prod react-scripts build",
"build-qa": "REACT_APP_STAGE=qa react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
Use cross-env in front of NODE_ENV.
npm i -g cross-env
"staging": "concurrently -k \"npm:staging-server\" \"cross-env NODE_ENV='staging' PORT=3003 react-scripts start\"",
Easiest approach is to add it directly in your command:
"scripts": {
"start": "./node_modules/.bin/nodemon server.js",
"start:prod": "NODE_ENV=prod node server.js",
},
How to deploy react (Create-React-App), Express.js and MySQL ?
I tried deploying on cPanel. do I have to change it to Production mode?
how do I access the API on Express.js? do I have to create a sub domain on Express.js?
because so far I only use the library which is concurrently and nodemon. and on React.js I added a proxy like this:
"proxy": "http: // localhost: 5000", where localhost: 5000 has a port from Express.js
Package.json script in server.js
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently --kill-others \" npm run server\" \"npm run client\""
},
Package.json script in React
"proxy": "http://localhost:5000",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
My App :
Client > folder react app > Package.json,Src
Node modules > npm from server
Server > Express config,Routes,Controller
.babelrc
server.js
package.json
Do you have terminal access on the cPanel? If yes, then
Start your node server (Using PS or Nodemon)
If your cPanel is using any kind of a server (nginx or Apache webserver for example), then configure the server file to redirect to localhost:5050 on *:80 and *:443
Configure your Express.js to serve on port 5050
And that's it.