here's my github project
https://github.com/MangoYumm/Fashion
I have my main index.html public/index.html
app.js from src/app.js controls the frontend , which is made of Header,Body,Footer and all these have images in them.
"npm run start" works fine and everything is displayed when I run public/index.html.
now when I use "npm run build" , and run build/index.html , it doesn't show all the images. Only the F icon in Header is shown, and the stars in part1 of Body.
How to fix that?
I downloaded the repo and tried to run the project both with start and after building it.
Once you run: npm run build you then need to run the following:
serve -s build ( you may need to install it globally if it is not installed ).
React uses a variable called PUBLIC_URL to get the path to your resources it is the root path of your app. Opening just the index.html will not work as expected.
P.S.: no need to write npm run start you can also do this: npm start.
Hope it works!
Related
I'd like to run a create-react-app (5.0.1) with react (8.0) as a local file. i.e. Not served.
Is this possible?
I've built a basic app and run the build command. Inside the build folder I've opened the html file directly from the browser. I get the following error:
Loading failed for the <script> with source “file:///static/js/main.eb2f7516.js”.
Technically react should be able to do this, right?
If you look at the create-react-app documentation you'll see one suggested method
is to use serve.
A convenient way to test your build is to run the npm run build command, and then run npx serve -s build while in the same folder. This should now serve your static site on port 3000 by default.
I'm using create-react-app. When I run npm start (react-scripts start) it continuously builds the changes for me and does it magic. But what is the output folder for that? I know when I build it manually where the files go.
I want to use firebase emulator to serve the current version (the continuous build) of my react all but I don't understand where's the output folder or how to achieve it.
You could try this package https://github.com/Nargonath/cra-build-watch
Install it and add the script to your package.json
{
"scripts": {
"watch": "cra-build-watch"
}
}
and run it
npm run watch
more info here
https://ibraheem.ca/writings/cra-write-to-disk-in-dev/
and if you go to the react repo issue linked in the article you would find more workarounds
tl;dr
run npm run build, not npm run start
More Detail
react-scripts start runs webpack-dev-server internally. As a default setting, webpack-dev-server serves bundled files from memory and does not write files in directory.
If you want to write files with webpack-dev-sever, you could set writeToDisk option to true in your dev server configuration.
However, I dont think this is what you want to serve on firebase emulator. Webpack-dev-server does not build optimal app for production, and you also need to use react-app-rewired to customize dev server configuration in cra template.
What you want to do is npm run build to run react-scripts build, which builds optimized production app in /build directory.
I created a ReactJS app using create-react-app and it works great when running from NPM START with the address of localhost:3000, but after I use npm run build and run index.html from the Build folder, the JSON never loads from the map function. Is there a step I am missing?
All help is appreciated.
Thank you.
npm run build only generates the build files at build folder , to run the project in production mode you need to upload the build folder files to a hosting provider or use some kind of local server to serve them .
There is a vscode extension which can run production files locally see the extension here .
After using
npm run build
to build developed application for deployment it shows white screen when opening
build/index.html
while I'm setting homepage: "." in package.json.
Console Errors Screen shots
enter image description here
I have found a way to run the project whit a npm package called serve
serve -s build
this worked for me instead of opening the file from /build/index.html directly
I've just run "npm run build" on a react app built with the create-react-app npm package. The issue now is that all the minified and bundled files and folders are referencing the root folder, when they are in a sub-folder. I've tried changing in index.html but that doesn't seem to work. Help?
#Jason Xu and #Mamdoh Saraireh thank you so very much for responding and attempting to help me.
It seems I am a complete idiot and did not read the full output of the build message. The solution to my problem is to add
"hompage":"./"
into my package.json file before running npm run build