I used react-create-app for building my application and deployed it to github-pages while strictly following the instructions I was given during the process. When I load the page I get an error in the console: "Failed to load resource: the server responded with a status of 404" (Bundle.js). The app runs fine when I run it using "npm run start" locally, finding all paths, but something shady is going on on github-pages. Can somebody help me fix this issue?
This is the official documentation on how to deploy your React app to Github Pages. You need to do the following:
In package.json set homepage to
{
"homepage": "https://myusername.github.io/my-app",
}
Install gh-pages
yarn add gh-pages
Add deploy and predeploy run scripts to package.json
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
Deploy it
yarn run deploy
The gh-pages branch will be automatically created, and the generated files pushed to this branch.
Relative path for "homepage"
I had 404: Not Found errors for the generated Javascript and CSS files, and it was only solved when I set the homepage (in package.json) value to
"homepage" : "."
I think you'd have to set the "homepage" variable in your package.json
and this would be your npm script command in package.json
"homepage": "https://<username>.github.io/<repo_name>/"
....
"scripts": {
...
"deploy": "npm run build&&gh-pages -d build"
...
}
More here in the docs : https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#building-for-relative-paths
Related
I deployed my react app to Git hub and was trying to create GitHub pages URL.
I followed all the steps from here: https://medium.com/#isharamalaviarachchi/how-to-deploy-your-react-app-into-github-pages-b2c96292b18e
Made sure Sourse set to Master from root folder and created scripts:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
And run npm run deploy:
See pic attached:
I have tried running npm run deploy and getting a message that it already exists.
I tried deleting the build folder and run npm run build again for no avail
Again my root folder on GitHub is set to Root, and this is a React project
I think you need to change branch to gh-pages on settings
I was trying to run this SVELT GitHub repo on local server:
https://github.com/fusioncharts/svelte-fusioncharts
I tried to launch it with "npm run dev" command. But I am seeing this error:
npm ERR! missing script: dev
I have tried to fix the issue by setting 'ignore-scripts' to false with this command:
npm config set ignore-scripts false
But it doesn't work.
How can I fix the issue?
npm ERR! missing script: dev means you are there isn't a script having dev. You are likely running on an incorrect directory.
Fusion charts seem to work with svelte codesandbox.
npm ERR! missing script: dev means it cannot find a script called dev inside package.json.
That makes sense!
It looks at the package.json inside the svelte-fusioncharts repo. In that file, there is a scripts property.
Notice how that property looks as follows:
"scripts": {
"build": "rollup -c",
"prepublishOnly": "npm run build"
}
It does not contain a dev script. That’s why it says there’s a missing script. Other commands will work, like npm run build or npm run prepublishOnly.
Md. Ehsanul Haque Kanan,
"scripts": {
"build": "cross-env NODE_ENV=production webpack",
"dev": "webpack-dev-server --content-base public" }
The above is the script from the examples folder in the repo: https://github.com/fusioncharts/svelte-fusioncharts/blob/develop/examples/package.json
You have missed out on the "dev" script in your package.json file.
Please check the "package.json" file in your project and just add the "dev" script as in the repo link and then retry.
Alright. I have fixed the issue. I just go inside examples folder. Then I run the following commands:
npm install
npm run dev
I had the same problem.
It is due to changes in script object in package.json by me. I had installed nodemon and to run the code, I changed the script lifecycle events start and dev in package.json to run the code via nodemon.
But even after installing nodemon, it was not reflecting in devDependencies, so I made manual entry in package.json with its version seeing from package-lock.json.
"devDependencies": {
"nodemon":"^2.0.15"
}
Making this arrangement, my code started as expected.
So, check your recent npm package installation and verify its reflection in devDependencies or dependencies in package.json.
I'm a beginner developing with Nodejs and React.
Right now, I've got a first version of my web application which works correctly in development environment, but I'm trying to build a version for production environment but I've got this error
ReferenceError: document is not defined
The scripts of my package.json are:
"scripts": {
"dev-webpack": "webpack-dev-server --hot --mode development",
"clean": "rm -rf ./dist",
"dev": "npm run build-dev && cross-env NODE_ENV=development nodemon --exec babel-node src/server/server.js --ignore ./src/client",
"build-dev": "npm run clean && npm run compile-dev",
"compile-dev": "NODE_ENV=development webpack -d --config ./webpack.config.babel.js --progress",
"compile": "NODE_ENV=production webpack -p --config ./webpack.config.babel.js --progress",
"build": "npm run clean && npm run compile",
"start": "npm run build && node ./dist/assets/js/bundle.js"
},
And I try to create the version for production environment with the command npm run start
I have been looking for information about the problem and it seems it's due because I have no Browserify my web application. But, I don't know how to do this correctly nor the steps to follow to do it correctly.
I am seeking a list of the steps required to build a correct version for production environment.
Edit I:
These are the static files generated with "build" script:
The React application is designed to be run in a browser.
When you run dev-webpack you are running an HTTP server and pointing a browser at it.
When you run build you are creating a static JavaScript file. You need to deploy it to a web server (along with the associated HTML document) and then point a browser at the HTML document.
You are currently trying to execute bundle.js with Node and not a browser.
You need to serve your index.html file. You can use serve to host the HTML file.
What is the difference between npm run serve and npm run dev in vuejs. Why should i use npm run serve command to run the project
npm run serve basically is just saying "npm please run the command I defined under the name serve in package.json" the same happens with npm run dev.
Given this the commands can do the exact same thing, similar things, or very different things. Usually they are a shorthand for running a dev server on localhost, but it’s not a rule, only a convention.
So you'll need to check in your package.json file and look for
"scripts": {
"serve": "[list of commands here]",
"dev": "[list of commands here]"
},
Any help would be GREATLY appreciated. Thank you!
I can run my website fine locally, but am having problems when deploying it in production. When I run npm run deploy, it should automatically build into production.
Here's part of my package.json for the deploy command:
{
"name": "barrex",
"version": "0.1.0",
"homepage": "https://patrickhuang94.github.io/barrex",
"devDependencies": {
"gh-pages": "^0.12.0",
"react-scripts": "0.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"deploy": "npm run build&&gh-pages -d build"
}
}
Everything on my gh-pages is set up correctly. When I run the URL I specified in my 'homepage' field (Barrex), it's redirecting to my custom domain. But my custom domain can't find the .js files that was supposed to be created with npm run deploy. Can someone explain why it runs ok on local machine, but can't find resources in production?
As it says in the screenshot, the project was built assuming it would be hosted at /barrex/.
However you are serving it from the server root.
Change homepage in package.json to your custom domain (http://www.barrexus.com/). Next time you build, it will infer / as the path project is hosted on, and use that instead.