Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I run a build of React app?

Tags:

reactjs

I did a build for a React app using npm run-script build and I need to run it. Using npm run webpack is returning an error. Excuse my being very new to React but I really need to know how to run this app. I hope you can help!

My package.json:

{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
    "axios": "^0.16.2",
    "downloadjs": "^1.4.7",
    "fast-memoize": "^2.2.8",
    "flow-bin": "^0.52.0",
    "lodash": "^4.17.4",
    "mapbox-gl": "^0.39.1",
    "material-ui": "^0.18.7",
    "moment": "^2.18.1",
    "node-sass-chokidar": "^0.0.3",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-mapbox-gl": "^2.5.0",
    "react-redux": "^5.0.5",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.2",
    "react-router-redux": "next",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
},
"devDependencies": {
    "react-emotion": "^7.2.2",
    "react-scripts": "1.0.10",
    "styled-components": "^2.1.2"
},
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "flow": "flow"
}

Here are the folders and files of the built app

like image 921
Lee Maan Avatar asked Mar 07 '23 17:03

Lee Maan


2 Answers

As I mentioned in comments.

npm run build uses react-scripts to create a build for you

To run in production:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "flow": "flow",
    "start:prod": 'node dist/app.js'
}
like image 154
Stretch0 Avatar answered Mar 24 '23 20:03

Stretch0


By looking at "react-scripts": "1.0.10", it seems you created the app using create-react-app.

create-react-app is using yarn by default. So you can run yarn then yarn build (same as npm install and then npm run build)

If you need change webpack configuration. The app have eject first. You can do it by yarn eject. And then you can edit the webpack config file.

Does this help?

like image 20
FisNaN Avatar answered Mar 24 '23 19:03

FisNaN