Add create-react-app as frontend in express project

Question

I have a custom Express project with a small React front-end builded with gulp.

What I would like to do is to add a create-react-app as second front-end like this one in my project, so I:

created a src/ folder in the root of the project
pasted the src/ form the create-react-app in my project src/
added react-scripts and all the create-react-app dependencies in my package.json
installed all the new dependencies
added "build": "react-scripts build", to my package.json scripts

I would like to build the create-react-app in the default folder /build and respond to all the request that doesn't match my API routes with the index of the builded create-react-app using this code in the routes bottom:

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

But running npm run build I get:

> [email protected] build /Users/matt/dev/my-api
> react-scripts build

Could not find a required file.
Name: index.html
Searched in: /Users/matt/dev/my-api/public

I actually have a public/ folder where gulp saves my builded front end together with some images, but react-scripts should look in the src/ folder for the entry point of the create-react-app.

EDIT: my full package.json:

{
  "name": "my project",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "build": "react-scripts build",
    "start": "npm run gulp -- --production && sequelize db:migrate --config=config/migrations.json --env=production && pm2 startOrReload config/pm2/production.json",
    "dev": "npm run gulp dev -- --development",
    "gulp": "gulp",
    "prestart": "npm install",
    "startStaging": "npm install && npm run gulp -- --staging && sequelize db:migrate --config=config/migrations.json --env=staging && pm2 startOrReload config/pm2/staging.json",
    "stop": "pm2 stop config/pm2/production.json",
    "stopStaging": "pm2 stop config/pm2/staging.json",
    "deploy": "git pull && npm start",
    "deployStaging": "git pull && npm run startStaging",
 },
"dependencies": {
  "@babel/runtime": "7.0.0-beta.55",
  "@material-ui/core": "1.4.1",
  "@material-ui/icons": "2.0.0",
  "@types/googlemaps": "3.30.11",
  "@types/markerclustererplus": "2.1.33",
  "ajv": "6.5.2",
  "async": "^2.6.0",
  "babel-polyfill": "^6.26.0",
  "body-parser": "^1.18.2",
  "bunyan": "^1.8.12",
  "chance": "^1.0.12",
  "chartist": "0.10.1",
  "cheerio": "^0.20.0",
  "classnames": "2.2.6",
  "compression": "^1.7.1",
  "connect-flash": "^0.1.1",
  "continuation-local-storage": "^3.2.1",
  "cookie-parser": "^1.3.3",
  "csv-parse": "^2.2.0",
  "del": "^2.2.2",
  "express": "^4.16.2",
  "express-brute": "^1.0.1",
  "express-brute-redis": "0.0.1",
  "express-jwt": "^3.4.0",
  "geolib": "^2.0.24",
  "glob": "^6.0.4",
  "helmet": "^2.3.0",
  "inky": "^1.3.7",
  "js-cookie": "^2.2.0",
  "jsonwebtoken": "^7.4.3",
  "juice": "^2.0.0",
  "lodash": "^4.17.4",
  "material-ui": "^0.19.3",
  "method-override": "^2.3.10",
  "minimist": "^1.2.0",
  "moment": "^2.19.3",
  "moment-timezone": "^0.5.14",
  "morgan": "^1.9.0",
  "multi-glob": "^1.0.1",
  "mysql": "^2.15.0",
  "node-fetch": "^2.1.2",
  "node-sass": "^3.13.1",
  "node-schedule": "^1.2.5",
  "nunjucks": "^2.5.2",
  "perfect-scrollbar": "1.4.0",
  "prop-types": "^15.6.0",
  "react": "^16.2.0",
  "react-chartist": "0.13.1",
  "react-dom": "16.4.1",
  "react-dropzone": "^4.2.3",
  "react-google-maps": "9.4.5",
  "react-redux": "^5.0.6",
  "react-router-dom": "4.3.1",
  "react-scripts": "1.1.4",
  "react-swipeable-views": "0.12.15",
  "redux": "^3.7.2",
  "redux-thunk": "^2.3.0",
  "request": "^2.83.0",
  "run-sequence": "^1.2.2",
  "sequelize": "^3.31.0",
  "serve-favicon": "^2.4.5",
  "slugify": "^1.3.0",
  "uuid": "^3.1.0",
  "validator": "^9.2.0",
  "vinyl-buffer": "^1.0.0"
  },
}

What am I doing wrong?

Added the package.json, the src/ folder structure is the same you can see here: github.com/creativetimofficial/material-dashboard-react/tree/… — lellefood
– lellefood, Commented Aug 9, 2018 at 15:29

lellefood · Accepted Answer · 2018-08-13 12:30:56Z

1

I've made a new repository but I still want to serve the create-react-app with express so I've followed this tutorial and created a /client folder in my project and put there all the create-react-app files and folders together with its package.json.

The scripts I use to deploy or lunch in dev mode are the following:

"client": "cd client && yarn start",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
"build": "yarn && cd client && yarn && yarn build && cd ../",
"deploy": "git pull origin master && yarn build && pm2 restart server.js || pm2 start server.js"

I'd like to know which are the cons of this approach if someone has any experience.

answered Aug 13, 2018 at 12:30

lellefood

2,1064 gold badges20 silver badges40 bronze badges

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

Comments

aprogrammer · Accepted Answer · 2018-08-09 15:25:05Z

0

First, eject your create-react-app project like this :

npm run eject or yarn eject

Second, you can configure index.html and public folder path from: [react-project-dir]/config/paths.js

In your case i assume eject command will create a folder in root directory of your project so you can find it in: [project-dir]/config/paths.js

You can change these parameters:

... appPublic: resolveApp('public'), appHtml: resolveApp('public/index.html'),

like this:

appPublic: resolveApp('public_react'), appHtml: resolveApp('public_react/index.html'),

answered Aug 9, 2018 at 15:25

aprogrammer

1,7781 gold badge11 silver badges20 bronze badges

1 Comment

lellefood Over a year ago

Thanks, but if I eject the create-react-app before coping the src folder I also have to copy webpack configurations, the build scripts and add many dependencies in the package.json, no?

Collectives™ on Stack Overflow

Add create-react-app as frontend in express project

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related