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
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'
}
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?
Are you using create-react-app? If yes then run "npm run build" in your root folder. This command will run your app
Related
I am having this issue with my react website. I've already hosted this website on github pages and I just updated the code and ran "npm run deploy" but it keeps on giving me this error "Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option)." any idea how to fix this?
{
"homepage": "https://saksham-89.github.io/Portfolio",
"name": "portfolio",
"version": "2",
"dependencies": {
"#emailjs/browser": "^3.4.0",
"#iconscout/react-unicons": "^1.1.6",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#testing-library/user-event": "^13.2.1",
"framer-motion": "^6.2.8",
"git": "^0.1.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"react-scroll": "^1.8.6",
"swiper": "^8.0.7",
"web-vitals": "^2.1.0",
"yarn": "^1.22.19"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
When I run npm install, I get the following error:
npm WARN eslint-config-react-app#2.1.0 requires a peer of eslint-plugin-jsx-a11y#^5.1.1 but none is installed. You must install peer dependencies yourself.
Here is what my package.json looks like:
{
"name": "name",
"version": "0.1.0",
"private": true,
"dependencies": {
"ajv": "^6.5.0",
"aws-amplify": "^0.4.0",
"react": "^16.3.2",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.3.2",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.8.2"
}
}
Does anyone know how to remove this error?
This is not an error, it is a WARNing
The easiest trial is delete node_modules directory and retype to see if it persists
npm install
Moreover you can use npm-install-peers to find and install required peer dependencies
npm install -g npm-install-peers
npm-install-peers
Also you can change the log level to error so that you won't see the warnings
Sass does not compiling in create-react-app. The current package.json structure is
{
"name": "create-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-scripts": "1.1.4"
},
"dependencies": {
"node-sass-chokidar": "^1.2.2",
"npm-run-all": "^4.1.2",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.1.4",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Repo: https://github.com/athimannil/create-app
It is working fine, npm start watch your .scss files and output .css files as expected.
Make sure to require the .css files in your components.
Since src/App.js still imports src/App.css, the styles become a part of your application. You can now edit src/App.scss, and src/App.css will be regenerated.
Also since .css files are now generated, you should remove them from your SCM.
At this point you might want to remove all CSS files from the source control, and add src/**/*.css to your .gitignore file.
doc
The 2. version of create-react-app supports Sass now. Install node-sass (e.g. npm install node-sass) to enable it. Checkout this application's Navigation component.
I thought i had figured out what the problem was but alas, i did not. When running my build script yarn build or even npm run build the script builds just fine but the process never completes and just hangs... Does anyone have an idea on how to go about troubleshooting this sort of problem?
here's my package.json
{
"name": "stars-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"bulma": "^0.5.1",
"custom-react-scripts": "0.2.0",
"firebase": "^4.3.0",
"font-awesome": "^4.7.0",
"lodash": "^4.17.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-feather": "^1.0.7",
"react-router-dom": "^4.2.2",
"styled-components": "^2.1.2"
},
"scripts": {
"start": "NODE_PATH=src react-scripts start",
"build": "NODE_PATH=src react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"firebase-tools": "^3.9.2"
}
}
So I can get the data if I npm run build my app and run it via it's usual address. But with npm start it doesn't know/(can't reach) the specified location.
So how might I go about doing this so it can work both ends?
package.json
{
"name": "reactjs",
"version": "0.1.0",
"private": true,
"homepage": "/reactjs/build",
"devDependencies": {
"lite-server": "^2.2.2",
"react-scripts": "0.8.4"
},
"dependencies": {
"datatables.net": "^1.4.2",
"datatables.net-dt": "^1.4.2",
"griddle-react": "^0.7.1",
"jquery": "^3.1.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router": "^3.0.0"
},
"scripts": {
"start": "react-scripts start eslint-disable",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"dev": "lite-server -c config/bs-config.js"
}
}
Add proxy to it e.g.
"homepage": "/reactjs/build",
"proxy": "http://localhost/supermarkets