I recently created a small website with react app , but after running , npm run build in the browser i find static folder in the browser in debugger , with my whole react app , components and app.js even node_modules , and of course i think , there is something wrong with npm run build , because , this is not how it suppose to work , by the way i'm using nginx and pm2 to connect my back-end to the website , both on the same server to deploy my website , so the question here , is the error here in nginx configuration or on react build script.
Create React App, give you a webpack configuration that by default include the option to include the source on the build.
You need to do this:
1. Eject your create-react-app project by running npm run eject:
2. Open your /config/webpack.config.prod.js.
3. Remove the line who contains the devtool: 'source-map'.
4. Build, and deploy your app again.
With this, you should don't have the source on your browser, check this if you need more information of webpack config: https://webpack.js.org/configuration/devtool/
NOTE: If you don't wanna eject your code, you can use rewire, and don't touch the base code of CRA and instead override with your configuration.
Hope this helps you!
Related
I wanted to deploy a react project. I used the npm run build command to create a build folder for deployment. Somehow, i dont know where the output ont this build folder is. Can someone explain to me, how i should proceed?
npm run build or yarn build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed.
React fails to make proper build, even with default app.
I ran commands npx create-react-app my-app then npm run build.
When I open index.html in /build, the site doesn't work and I get following logs:
You can just open a React (or Angular) build by clicking on the HTML file.
What you have to do is the following:
Install any static server module (i.e. serve):
npm install -g serve
In the root directory:
serve -s build
And then your app will be served.
It would be wise to do that before you deploy to any cloud storage or even your own server, but if you are 100% your app works, you can just deploy in on Vercel, Heroku or GitHub pages, they are free.
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 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 .
The react app is not building using the homepage tag in package.json file . "homepage":"https://entrepreneurcell.com" . After running npm run build , this is what I am getting in console :-
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
Please tell me a more efficient way of deploying react app on hostinger or highlight the mistake that i am doing.