Can I serve a create react app from an express server without running 'npm run build'?

Question

I have a nodejs with express server. I would like to server a create react app from the server. Is this possible with out building the react app?

Example from a project im working on right now.

I server a built react app like this...

 //// Server static resources.
ROUTER.use('/static', EXPRESS.static(PATH.join(__dirname, '../', '../', 'project', 'build', 'static')));
//// Server built react app. 
ROUTER.get('/',  function(req, res) {        
    res.sendFile(  PATH.join(__dirname, '../', '../', 'project', 'build', 'index.html' ));
});

Any way I can server the react app without building it? Something like...

ROUTER.get('/', function(req, res) {
    //redirect to loopback port for react app. 
});

Sombriks · Accepted Answer · 2019-09-05 16:33:58Z

1

You need to define a project layout which suits you well.

Since you have client side and server side code, you could maintain two folders, each one containing module-specific code.

CLI tools like create-react-app expects such approach to be adopted, unless your project uses some kind of SSR

A reasonable good project layout looks like this:

my-project/
├── my-project-react/
│   ├── package.json 
│   ├── src/  
│   ├── (... other project files) 
│   └── README.md 
├── my-project-express/
│   ├── package.json 
│   ├── app/ 
│   ├── (... other project files) 
│   └── README.md 
├── .gitignore 
└── README.md

That way you can serve express with nodemon and react with webpack dev server, just remember to enable cors on express. You also must adjust the service address inside your web app project, depending on NODE_ENV.

answered Sep 5, 2019 at 16:33

Sombriks

3,6804 gold badges43 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Norman Potts Over a year ago

My project layout looks like that. Just have two react projects. One of them will use authentication.

winwiz1 · Accepted Answer · 2019-09-06 03:33:27Z

0

crisp-react has a backend subproject based on Express that serves a sample React application (which is not CRA).

If you follow Getting started or alternatively execute commands:

git clone https://github.com/winwiz1/crisp-react.git
cd crisp-react
yarn install && yarn start:prod
Express is running...
Terminate by Control+C

then you will have a running instance of Express serving a react app which you can see by pointing a browser to localhost:3000. The backend/Express subproject only serves the React app, it doesn't build the app and in fact cannot build it because the backend doesn't have React library in its package.json as a dependency.

answered Sep 6, 2019 at 3:33

winwiz1

3,18414 silver badges25 bronze badges

Collectives™ on Stack Overflow

Can I serve a create react app from an express server without running 'npm run build'?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related