CODEWITHSUNDEEP
javascriptreactjs
Mizlul
Mizlul

Reputation: 2290

How to run the react app without a server

I have created the project using npx create-react-app my-app https://github.com/facebook/create-react-app.

When running npm run build I get the following:

70.28 KB build\static\js\2.93539f7c.chunk.js 22.82 KB build\static\css\main.cfe0ffe9.chunk.css 1.41 KB (+44 B) build\static\js\main.79f4d9a1.chunk.js 761 B build\static\js\runtime~main.fdfcfda2.js

The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages:

Looks like I need to have server to run the app.

Is it possible to run this locally without any server running? I mean since it is just html,css,js and why would a server be needed here? for what purpose?

Also there is many files generated into the build folder, there is an index.html too, a static folder, so its not like a single bundle.js and a single index.html, it seems more complicated.

Anyone can explain why the build folder is this much files? and which one to consider for running the app?

Thanks

Upvotes: 2

Views: 2974

Answers (2)

Mihail Serikov
Mihail Serikov

Reputation: 51

By default, Create React App produces a build assuming your app is hosted at the server root. To override this, specify the homepage in your package.json, for example:

"homepage": "http://mywebsite.com/relativepath"

This will let Create React App correctly infer the root path to use in the generated HTML file.

source: https://create-react-app.dev/docs/deployment/#building-for-relative-paths

So you should just specify your homepage as the current path:

"homepage": "./"

Upvotes: 2

Quentin
Quentin

Reputation: 943601

Is it possible to run this locally without any server running?

No

I mean since it is just html,css,js and why would a server be needed here? for what purpose?

React loads content using XHR, which can't make requests to file scheme URLs.

Anyone can explain why the build folder is this much files?

React makes use of code chunking to optimise which data is loaded. This means that JS which isn't used immediately can be loaded later on and not impact the time between initial page load and first render.

Upvotes: 3

Related Questions