I'm newbie on react, I did 2 paged website for exercise, all is working well on my localhost.
But i'm confused about how upload project to my linux server.
What i did ?
I create react app via terminal with this command :
create-react-app react-demo-project
Terminal create my project and in project root i have node_modules directory.
so here is i have some questions:
1- React project will work normally on linux hosting?
2- I need to all my project upload to ftp? Because there is arround 20.000 file in node_modules directory.
With this command build your app :
npm run build
Build folder has created in your project directory, open index.html in your browser and check output...
If you saw a blank page (after build and opening index.html) , you must change the main js file path in the index.html :
default is : src="/static/js/main.ddfa624a.js"
change to : src="./static/js/main.ddfa624a.js"
I changed js path and this worked !
create-react-app has a command to bundle your app to a ready to deploy state.
npm run build
This command will bundle your app in /build folder. With the contents of this folder you can deploy your app in any hosting environment. You don't need to install your packages and libraries manually when you use this command. More information about using this command and deploying your app in different hosting environments can be found create-react-app README
Deployment
npm run build creates a build directory with a production build of
your app. Set up your favorite HTTP server so that a visitor to your
site is served index.html, and requests to static paths like
/static/js/main.<hash>.js are served with the contents of the
/static/js/main.<hash>.js file.
1- React project will work normally on linux hosting?
Yes, it will work in all webservers, unless you have server side rendering (SSR)
2- I need to all my project upload to ftp? Because there is arround
20.000 file in node_modules directory.
Files in node_modules will NOT go to your web server. These are development dependency files used only during development.
Run npm run build
This will create a folder called build in project root. This will have all html, css , images and js files
Copy all files and folders in build folder to your site root.
If your site has to be hosted in a sub folder in root you need to do the below, otherwise you will see a blank page. This is because your static files (css, js etc) are not loaded correctly.
Open package.json
Add a new entry homepage: /your_subfolder/
It will look like this
Now do steps mentioned above and your site should work fine
Add this line to package.json:
"homepage": "./"
That should make it work without the need to adjust index.html after every build.
Related
I'm trying to launch a React app (create-react-app) to GoDaddy using cPanel and I am having issues creating the correct build. I am setting the homepage in package.json underneath "name" and "version" (not sure if order matters here) like this:
"homepage": "http://mydomainname.org"
However, when I run npm run build, I get a message saying "The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json.
Has anyone encountered this problem before?
That message is not an error. After you run the npm run build command a folder named build should appear and it contains your react app. You need to upload the contents of that folder to the public_html folder in cpanel's file manager. (Make sure you are uploading what is inside the build folder and not the build folder itself). Here is a link to a short tutorial
I have prototyped a ReactJS static app (no backend) on my local computer by following some tutorial. I have used create-react-app to generate my project. The next step (which is not part of the tutorial) is to upload that to S3 as a static website. I noticed that the node_modules folder is quite large (around 500 MB).
In my reading of other tutorials about static websites in AWS, some JavaScript libraries (jquery) are actually served using CDN, instead of being bundled with the app folder that is be uploaded to S3. Can that be done with node_modules as well so I can avoid uploading that?
Create react app comes with the tools necessary to develop and build your application.
develop
When you develop, you can run npm run start, it will run the project as a website and open it on the default browser.
build
When you are ready to deploy, use 'npm run build', it will produce a build directory with optimised code ready for deployment. You can copy the contents of the build directory into your S3 bucket.
https://create-react-app.dev/docs/production-build
You can also check the available commands in the scripts section of your package.json.
Then what happened to the node_modules directory
The build process is using webpack to build the project. it will only include the bare minimum files required to run your application. It will not include the entire node_modules directory.
You don't need to (and you shouldn't) upload node_modules. Your dependencies are compiled and the output file should be in your /build directory after you build your application. You just need to upload that directory to S3.
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 trying to deploy this react project https://github.com/tahnik/react-expressjs
and use apache server for static file. The example that I know that is working is on Angular, on angular we just run ng build --prod and this will create a dist folder where there is an index.html. On apache, we just serve the dist folder. But here we use React with webpack that not contain dist folder with an index.html so I don't know how to do that on your project.
PS : Sorry for my english, it's not my native language
Thanks
There is no index.html because it is a server side rendered application. In the repository you posted, the whole project is meant to be running as a server side application, there is no index.html file. Everything is served from express as you can see here.
When you run npm run build:client it just creates the js/css files. You would need to:
Create your own html and add css and js to it.
Add html-webpack-plugin to generate the html with all the css/js files already on it.
If you don't want to do that. You simply run npm start after your npm run build and the server will start. now you need to proxy from apache to this addr:port.
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.