Newbi question here: Can you build a ReactJS app to run just in a browser, with no kind of web server?
The app that I want to run has been created with create-react-app and I've tried building it with npm run build, but when I opened with a browser the index.html file from the build directory, the page was empty and in the console I got an ERR_FILE_NOT_FOUND error for a bunch of css and js files, even though the files can be found in the specified location.
I'm asking this because I want to build an app for my work, where I don't have admin rights and I just wanted to copy-paste it.
The problem was that in the index.html file, where the files were imported, the path looked like this: <script src="/static/js/1.944de9ae.chunk.js"></script> where in fact you need to have a dot in from of the path, so like this: <script src="./static/js/1.944de9ae.chunk.js"></script>.
Sorry for the spam!
Related
I am learning to deploy different react apps on different hosting platform. So I cloned this repo Cloned Repo and run it locally and it works fine, so I am trying to deploy it on netlify.
Based on the repo this is how I configured the build settings on netlify
But after It finished deploying and I preview the deployed live link, the page is just blank without any error, Though I feel it's not routing to the main page based on the project webpack.config.js, but I don't know exactly what to do?
So the problem is that, in netlify, you have already mentioned your publish path as dist. But in your index.html, you have mentioned the script src as /dist/example.js.
We just need to modify the script src in index.html as example.js instead of /dist/example.js since we are already inside dist folder.
index.html
<script src="example.js"></script>
i was trying to publish my website via Vercel but somehow i couldn't...
I have the api url and token in index.js in consts folder.
I've tried to put api info in the .env file but i couldn't do that either.
Here is my files and the Vercel's error
I would be really happy if i use some help. Thank you.
My files
What vercel says
Keep all your .js files inside src folder.
Looking at your problem ,it looks like your index.js falls outside src folder. Try placing it directly in your src folder like your App.js, it should work fine.
Also, Run npm run build in your VS Code terminal before deploying it.
I want to run react from the HTML page so that it is displayed on the browser. Till now I was using node to run it but now I want that when I open my HTML file in the browser my react app should run there.
A production build might be what you need. Try executing npm run build (or yarn build, if you're using Yarn).
This creates a production build of your app in the build folder, which contains index.html along with other static files. Running index.html should run the app in your browser.
A production build is meant to be served to the end user, so remember that you won't be getting any nice crash messages or stack traces that you get from running it on Node. Neither would development-related niceties like hot-reloading work. If you're still working on your project actively, keep using Node.
By the way, if you just need to make any changes to the HTML file of your React app (like changing the title or adding an external script), you can do that in public/index.html too - you don't need to create a production build for that.
How can I get Parceljs to work with react? I'm using their example from their repo but it wont work.
https://github.com/parcel-bundler/examples
After I run 'npm start' it works and renders the page on localhost as expected but it will not work when I click the outputted file in /dist. So the page is just blank when I try to load it from dist/index.html. I also tried the production command from their website so it would stop watching the files but that also resulted in the dist folder loading a blank page.
How can I do this? Any help would be great. Essentially I want to be able to access the buddled files without localhost.
Thank you.
You're running the index files locally and the index.html is expecting the the css file and the js file to be at the root. When you're opening your file locally it is trying to find under C://
To get around this issue you have to edit the index.html unfortunately after you have compiled it. Here are three ways to get over the issue, method three focuses on fixing your issue but I would recommend methods one and two.
Method One
Install http-server by running npm install -g http-server
Go to your project dist folder via the terminal / cmd
Type http-server
Your project will open up in your default web browser
Method Two
Upload your application to a web server
Your application should run
Method Three (Not recommended)
Add the NPM script "production": "parcel build index.html"
Run production build by cd to your project and type npm run production
Go into your dist folder and open up the index.html in an editor
Edit the css file path from href="/main.--------.css" to href="./main.--------.css">
Edit the js file path from src="/main.--------.js" to href="./main.--------.js">
(NOTE: The React Add-on will not detect React when it is being opened locally, but the application will work fine.)
I am wondering if it is possible to deploy react.js web app that I've built to a share hosting site that does not have node.js installed?
I use webpack to build the application and it creates normal html, js, css file. I uploaded the static folder that includes all those html, js(bundle.js) and css files, but when I request the site, the server reply with 404 bundle.js not found response.
Use npm run build, you should get a folder with the index html file inside that will run your app. Try this with xampp first before you actually deploy to your server.
Here is everything step by step
npm run build
or
yarn run build
it will generate a build folder that looks like this:
Copy everything and move it to the htdocs in xampp or ftp upload the directory to the public_html file in your hosting
Yes you sure can put react on a shared hosting provider.
Seeing as you're getting a 404 error (not found), you are probably referencing your react file/bundle incorrectly. It might not even be named bundle.js if you're using a boilerplate to create your application.
Can you give more information? What does your index.html file look like? What does your directory structure look like? If you are able to post these files I can tell you what the issue is.
Update:
The answer below should be accepted. (Although this would assume that you have the ability to make a build which you have not verified or not.)
Make a build using the build command through whatever boilerplate you used. Deploy those files on your shared hosting server. Make sure that index.html is at the root of where your server is expecting the root to be and your app should be live.
For deploying a react app on a shared hosting you need to create a production build. Production build is a pack of all your react code and its dependencies.
in most shared hosting we put our site/app inside a public_html directory so if we hit www.yourdomain.com it serves the code from public_html directory.
so if your react app is ready to go, edit your package.json file add a new key value:
"homepage":"http://yourdomain.com"
then create a build using following command:
npm run build
after running the command you will see a new directory named build in your app root. It will contain js and css for the app and a index.html file. You need to upload all the content inside build directory to public_html directory, and that's all, go to your domain and your app will be working just fine.