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.
Related
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.
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'd like to run a create-react-app (5.0.1) with react (8.0) as a local file. i.e. Not served.
Is this possible?
I've built a basic app and run the build command. Inside the build folder I've opened the html file directly from the browser. I get the following error:
Loading failed for the <script> with source “file:///static/js/main.eb2f7516.js”.
Technically react should be able to do this, right?
If you look at the create-react-app documentation you'll see one suggested method
is to use serve.
A convenient way to test your build is to run the npm run build command, and then run npx serve -s build while in the same folder. This should now serve your static site on port 3000 by default.
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.
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