I'm trying to deploy create-react-app(which is currently on github) to netlify. after it deployed it shows a blank page.
Netlify configurations i have added:
build command: yarn build,
Publish directory: build
and this is my scripts on package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
I was getting blank page only on mobile devices after deploying on Netlify. It worked after I removed REDUX DEVTOOLS EXTENSION from Redux store.
Related
For some reason I can't get my React app to consistently deploy to GitHub. Occasionally my custom domain will be removed from the repository's page settings and I'll have to add it again. Other times my readme page will be deployed instead of the React app. Other times nothing happens at all.
When I try and deploy, the settings in my GitHub dashboard are set to use the gh-pages branch, and I try and deploy the changes with npm run deploy. These are my scripts, could someone tell me if I'm doing something wrong? I feel like it should be quite simple.
"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"
},
In recent react app I install nodemon globally and modified package.json to add dev command like this:
"scripts": {
"start": "react-scripts start",
"dev": "nodemon ./app.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I start the app like this npm run dev but problem in any changes the development server start again opening new tab. How I make only current tab refreshed ?
Why not simply use npm start?
react-scripts start sets up the development environment and starts a server, as well as hot module reloading. Read more here.
I want to deploy my react app to production (using heroku). When the app is deployed, React dev tools indicates that my app is running in development mode
I pushed the application to heroku : https://lesamisdhubert.herokuapp.com/
I tried to set an environment variable :
heroku config:set NODE_ENV=production
however, when I console.log(process.env.NODE_ENV), It returns development
I also tried npm run build before pushing to production but it hasn't worked
here are my scripts in the package.json file :
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
however console.log('node env --->', process.env.NODE_ENV); returns 'development'
Does anybody knows how I can set my react app into production mode ? Is this a problem with npm run build ?
Thanks a lot, I really don't understand where this can come from ...
I replaced in package.json :
"scripts": {
"dev": "react-scripts start",
"start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
}
I also created a new heroku app and it seems to work
When configuring enviroment vars in heroku you have to append REACT_APP_VARIABLENAME and then set its value otherwise you can't have access to the env variable.
take a look at: https://github.com/mars/create-react-app-buildpack#compile-time-configuration
you can do this in the heroku client
I've got a node project with a create-react-app project in a folder called client.
It's setup on Heroku and deploys and works (functionaly) using git push heroku master but none of the styling is active and it's using the wrong fonts.
It all works on localhost.
In the project package.json I have
"heroku-postbuild": "cd client && npm install && npm run build"
and in client package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Cannot find anything wrong in Heroku setup or logs, or any documentation, at a bit of a loss where to start even looking
Included the css file in index.html
hi I am a newbie in reactJS and am learning reactjs recently by kickstarting from the create-react-app and modifiying it . My doubt is that how the create-react-app detects the changes in files and autimatically rebuilds them . I used a normal nodejs + react + webpack app and in that i have to manually specify the npm run build and node start in the package.json like as
"scripts": {
"build": "webpack",
"start": "node server"
},
in case the above for the create-react-app differ as
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "npm run build-css && run-p -ncr watch-css start-js",
"start-js": "react-scripts start",
"build": "run-s -n build-css build-js",
"build-js": "react-scripts build",
"test": "run-s -n build-css test-js",
"test-js": "react-scripts test --env=jsdom",
"build-css": "node-less-chokidar src",
"watch-css": "node-less-chokidar src --watch",
"eject": "react-scripts eject"
}
What makes the create-react-app and a normal node+webpack+react app differ in rebuilding the source ? (Starting the server seems not a deal because once its started it will be runing on a port for both cases . For Server restart both apps needed to kill the process and start again . So building the source is my only concern) . Any help is appreciated .