How to deploy a create-react-app to a web host (ex. Siteground)?

Question

I'm building a react project using create-react-app and am trying to figure out how to deploy my code to my hosting server on Siteground.

Does anyone know the best way to do this? Do I import my build folder through FTP? Can I automate the process through GitHub?

Thanks in advance!

Answer 1

I have problem deploying on siteground as well the simple solution is to have a git repo for your build and setup your public_html folder on siteground to track that git repo.

make sure to also create

.htaccess

with the content something like this

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

If you don't have that your routing won't work

Also remember to go Tools->Speed->Caching and flush the cache if you have deployed otherwise before

Answer 2

If you are using create-react-app, then you could do:

1. npm run build or yarn build
2. Copy everything that is inside of the build folder as a result of the previous point
3. In order to get the routes working, add .htaccess file with the following content:

   <IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteBase /
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteCond %{REQUEST_FILENAME} !-l
     RewriteRule . /index.html [L]
   </IfModule>
   

4. Export it to the root folder of your server (normally public_html)

Check this great article for more info :)

Hope it helps!

Answer 3

I just uploaded my create-react-app to siteground with FileZilla here is the step by step:

1. Once you have it all production ready npm run build
2. Open siteGround on your browser and into myAcount section click on go to cPanel scroll down and find FTP Accounts
3. create a new account pointing to the directory public_html
4. once created, it will appear down below and all the way to the right click on configure FTP client and under manual setting you've got what you need to connnect
5. open FileZilla and in file go to siteManager then new site
6. host(in filezilla) === FTP server (in sitiGround), port set it as siteground port , protocol and encryption leave it as default
7. Logon Type set as normal , user === FTP user(siteGround) and password the one you've used to create that FTP user
8. click on connect and paste the content of yourApp/build (from the left side that is your PC) to (the folder at the right hand side) that is your public_html in siteGround

That's it! go to your website and check, the react app should be displayed there

here is the source of this procedure https://www.siteground.com/tutorials/ftp/ Here they use quick connect for fileZilla though, I have more than one site so siteManager is cleaner and stores your credentials for next time

Answer 4

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.

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.

source: create-react-app

Answer 5

Usually there are guided strategies from host vendors.

Example:

Heroku Create React App Build

S3 Cloudfront

Otherwise you'll have to manage it by yourself, registering a custom build script that acts with:

npm run build

And then move the build folder. If you use Maven you can manage the entire build with plugins like:

Frontend Maven Plugin

Answer 6

Per the create-react-app docs, you run npm run build and basically just take the output and FTP it to your web server.

However your question is very broad -- you could automate through GitHub or some other tool, but that's really going to beg opinionated responses on StackOverflow (which isn't the right forum for those kinds of questions).