I am trying to deploy my React app on a server via PM2. My React app currently has 2 environments: prod and dev. So, in my app folder, I have an environments folder with 2 files: .dev.env and .prod.env. First one is used for calling local APIs, and the second one is for production API URLs. prod.env is shown below:
When I want to start the app, I use the command npm run start:dev or npm run start:prod, depending on which environment I want my app on.
The question here is, when I try to deploy my app via PM2, what command or modification should I do so that I am certain that my app is deployed in production/prod mode?
My current PM2 config file looks like this:
{
apps : [
{
name : "random_app", //name of my app
script : "npm",
interpreter: "none",
args: "run start:dev"
}
]
}
For a production environment you should be serving the built version of the React app (run npm run build and it will output a production-ready version of your app to the build folder).
In order to separate the environment variables, you should use .env.development and .env.production files (the built version will automatically use the .env.production file) - see here for more information.
Then to serve it, you would use pm2 and serve (make sure serve is installed as well npm install -g serve) with a command like pm2 serve <path/to/build/folder> <port> --spa - more info can be found here.
Related
React fails to make proper build, even with default app.
I ran commands npx create-react-app my-app then npm run build.
When I open index.html in /build, the site doesn't work and I get following logs:
You can just open a React (or Angular) build by clicking on the HTML file.
What you have to do is the following:
Install any static server module (i.e. serve):
npm install -g serve
In the root directory:
serve -s build
And then your app will be served.
It would be wise to do that before you deploy to any cloud storage or even your own server, but if you are 100% your app works, you can just deploy in on Vercel, Heroku or GitHub pages, they are free.
I am running a react app with npm and would like to modify the path for the static files.
I modified the package.json to include "homepage": "./app".
As expected the files are now served at .../app/static when I use a production build with npm run build, but I cannot replicate this behavior with the development server (npm start).
How can I make the dev server serve at /app/static as well?
Thanks for any suggestions.
My Sapper app deploys Ok if I build it first and then deploy it from my local machine with gcloud app deploy.
My app.yaml just has: runtime:nodejs10 in it to deploy to the standard environment.
Now I can't achieve the same when I try to use Gitlab CI to deploy on git push.
In my .gitlab-ci.yml file I have 2 jobs: 1 to npm install and to run the build command and a second one to deploy to gcloud.
The 2 jobs complete but when I chack the version it has a 500 error and the logs say: Error: Cannot find module '/srv/__sapper__/build'.
So this has me going round in circles. I've tried moving svelte and sapper from dev deps to dependencies in package.json but it has not helped, I've looked at adding handlers in my app.yaml but am confused how, I've seen an issue on sapper github mentioning something related to svelte makefile and an issue with it needing to be built for the docker image to use it but no clear solution is proposed...
My .gitlab-ci.yml looks like this:
production-build:
stage: build-for-prod
image: node:10
script:
- npm install
- npm run build
only:
- master
prod-deploy:
stage: production
only:
- master
needs: ["production-build"]
image: google/cloud-sdk:alpine
environment: PROD
script:
- echo $SERVICE_ACCOUNT_KEY > /tmp/$CI_PIPELINE_ID.json
- gcloud auth activate-service-account --key-file /tmp/$CI_PIPELINE_ID.json
- gcloud --quiet --project sapper1-test app deploy app.yaml --verbosity debug --no-promote
after_script:
- rm /tmp/$CI_PIPELINE_ID.json
Correct me if i'm wrong, but to me this looks like you've misconfigured it. The jobs are running in separate containers and deploy doesn't have access to build results, that's why it is missing dependencies.
Artifacts might help to pass the built libraries around. But i would just build a custom image containing both Nodejs and Cloud SDK and combined two jobs on top of this image.
Why my heroku app is serving app directory? This directory and it's files should not appear like you see in the picture. Should display only static directory.
I use rimraf npm package to remove sourcemaps (.map files) and when I use serve -s build command it works properly on localhost, it displays only the static directory. But when I deploy my files to heroku using heroku/nodejs buildpack it serves the files like in the picture.
Important to note: I use just create react app and don't use any http server like express.js
#edit
Ok I know where is the problem. On localhost I use serve -s build and it serves just build directory. When I use npm start on localhost it serves app and build like on the heroku. Because I use npm start on heroku. But how to switch this command to serve? Tried to replace the start script with "start": "serve -s build" but it works only on localhost.
Ok I solved this problem.
Right now I use npm start script which call nodemon ./server.js script which is just express server with get '/*' and send a index.html
No more serve or react-scripts start on production.
I have created a test React application and I started it with the create-react-app. I am starting it with with yarn start, but that starts the debug version of the application. I did npm run build and it created the build folder, however when I do yarn start from the /build folder, it still starts the debug version of the application. I need this for testing performance with the optimized version. How can I solve this?
You can actually use static server to run build version of your app. It's doable with serve. You can test it with:
npm run build
npx serve -s build
Navigate inside the directory of your app first.
According to the official create-react-app website. When you run npm run build or yarn build you create a build directory with a production build of your app.
After running the command above the next thing you can do to check the build version of your app is to install serve to serve your static site on the port 5000 by default.
npm install -g serve
serve -s build
This will copy the link to your clipboard that you can paste in your browser and see the build version of your app.
You're trying to move from a development build to a production build with create-react-app you need to deploy it using a web server, I would recommend using Heroku or a droplet or you can use Netlify which has a simple set up procedure using the below commands:
cd project-name
npm run build
npm install netlify-cli -g
netlify deploy
Follow command line prompts and choose yes for new project and ./build
as your deploy folder and voila you have a production React app!
You can host the app locally using apache, nginx, express
If you want to run your app in browser with build files served locally from the filesystem (i.e., without a web server), you can put this in your package.json:
"homepage": ".",
Now
build your app with npm run build.
launch <your app>/build/index.html in the browser.
Note: This solution is not suggested if your app (or some routing library) is using the HTML5 pushState history API. https://facebook.github.io/create-react-app/docs/deployment#serving-apps-with-client-side-routing