CODEWITHSUNDEEP
reactjsexpresscreate-react-appnetlify
epus
epus

Reputation: 139

Using Create-React-App with Express in production

How do I use my react-app with express in the production mode? Currently I call yarn run start in one terminal and node server.js in another terminal.

This works quite well in dev-mode. I added "proxy" in package.json (http://localhost:8080).

The problem is I don't know how to get it working in live-mode. I just call yarn build but yeah it doesn't make sense that the server is now running ;-)

Can I solve this in a simple way?

Some code:

package.json

"proxy": "http://localhost:8080"

server.js

const app = express();
app.post("/checkout", async (req, res) => {
  ...
});
app.listen(8080);

In the react-app i post data to this API with axios.

What I get/want in dev-mode:

Correct response from the API.

What I want in prod-mode:

Correct response from the API.

What I get in prod-mode:

Error: 404 (In my opinion, because the server is not running)

Folder structure:

my-app
├── build
├── node_modules
├── public
│   ├── favicon.ico
│   ├── data
│   ├── index.html
│   └── manifest.json
├── scripts
│   ├── build.js
│   ├── start.js
├── src
│   ├── components
│   │     Component1.js, Component2.js, ...
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── serviceWorker.js
├── .gitignore
├── package.json
├── server.js
└── README.md

Can i solve this problem with Lambda Functions from netlify?

This is the server script: server.js

const express = require("express");
const ... require(...);

const app = express();

app.post("/checkout", async (req, res) => {
  console.log("Request:", req.body);

  let error;
  let status;
  try {
    const { token } = req.body;

    const var1 = await stripe.customers.create({
      ...
    });

    const idempotency_key = uuid();
    const charge = await stripe.charges.create(
      {...}
    );
  }

  res.json({ ... });
});

app.listen(8080);

Other way: Is it possible to run the checkout api on a php server?

Upvotes: 0

Views: 1265

Answers (2)

Saurabh Mistry
Saurabh Mistry

Reputation: 13679

run below command for production build

npm run build or yarn build

add below line in server.js file to serve client/build as static content 

  app.use(express.static(path.join(__dirname, 'build')));

then add below route at end of all other api routes defined , this will send index file 

 app.get('/*', function (req, res) {
    res.sendFile(path.join(__dirname,'build', 'index.html'));
  });

Upvotes: 1

Abhinav Kinagi
Abhinav Kinagi

Reputation: 3821

Client:
By yarn build you mean yarn run build. yarn run will execute the command specified in the scripts section of package.json. In your case it will run the build.js file in scripts folder. Generally, it bundles the app into static files for production. So now static files being generated must be served. This part is client for now.

{
  "scripts": {
    ...
    "build": "node scripts/build.js",
    ...
  }
}

Server:
I suggest you to use serve-static to serve the static files with express.

  • Install it with yarn add serve-static
  • Use serverStatic(root,options), root will be your directory with static files else by default it will send the index.html file.

From the docs, this can be used as in a simple way :

var express = require('express')
var serveStatic = require('serve-static')

var app = express()

app.use(serveStatic('public/ftp', { 'index': ['default.html', 'default.htm'] }))
app.listen(3000)

There are also other variants which you can check here.

For deploying your project on Heroku, follow this.

Upvotes: 1

Related Questions