How upload reactjs project to ftp?

Viewed 20488

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.

4 Answers

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.

  1. Run npm run build
  2. This will create a folder called build in project root. This will have all html, css , images and js files
  3. 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

homepage in package.json

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.

enter image description here

Related