How to run production react app in local with local back-end

Question

I have seen using production react app with server in local.

But mostly I found the way is running production react app using express.js with Heroku.

How to running production react app with server in local without any change of code?

Answer 1

make a production build of the react app locally, (run npm run build if you are using create react app ) and then you can use serve to run it locally by running serve -s build . build is the folder name of your production build.

Answer 2

When you run npm run build your console should actually say something like the following

The build folder is ready to be deployed.
You may serve it with a static server:

npm install -g serve
serve -s build

The build script is building your entire app into the build folder, ready to be statically served. However actually serving it require some kind of static file server, like the the one they propose.

After running the command serve -s build you can access your production build at localhost (on the specified port).

You can of course run whatever static file server you like, I usually use express for this, however serve seems like the easiest option to just serve your statics files with a single command.

Answer 3

As of date by default for CRA

serve -s build

will deploy your app on localhost port 5000

If you want to open on custom port use flag -l

serve -s build -l customportnumber

CRA Deployment Official Docs

Answer 4

如果您想在默认的:8000端口上运行React应用程序，则更方便地创建一个将在端口:8000上运行的nginx代理服务器，并将您的请求代理到您的express应用程序中，该应用程序为在端口上运行的捆绑应用程序提供服务，例如:8081或您正在使用的任何端口。

Answer 5

There are various ways of achieving this.

You can use http-server or serve packages for running local servers. If on MacOS, you can also use python SimpleHttpServer to host the production build folder.

Reference: https://medium.com/@samratshaw/test-react-production-build-locally-434907be9e49

Answer 6

You can follow these commands

If you are using NPM :

1. npm run build
2. npm install -g serve
3. npx serve -s build

---

And if you are using Yarn :

1. yarn build
2. yarn global add serve
3. npx serve -s build