Can I deploy my ReactJS app on a regular host?

Question

I've seen many guides where people teach you how to deploy your react app on services like digital ocean, heroku, GitHub Pages, aws. But I'm wondering if I can deploy my React app (create-react-app) which consists of only front end in a host service like 000webhost or Ipage? Because a person wants me to design a website, and he says that he already has a domain name and a host service in lpage.

Cypher

Answer 1

I use webpack to bundle my react app. So at the end react app will be:

• one bundle (rarely more if you use dynamic bundle loading - probably not), that is just a javascript file
• your index.html that includes this file at the end of body
• and your .css that you can set in principle in one file (or separate folder with several files) and include at the top of your index.html

Regarding .css there are several better ways how to include, but you can likely start with simple setup as mentioned above.

So you just put these 3 things on your server, and your app is available at index.html.

P.S. Don't know what is Ipage, and haven't worked with create-react-app.

Azobenzene

But can you deploy your app on regular hosts doing that and just uploading the files to the root? I mean, services that are not virtual servers like heroku, digital ocean and others like these. – Cypher

Well, your host must be publicly visible, and has a server that serves files from some location. This location is root. You put the above stuff in the root and they are then accessible as a react app with myhost.com/index.html. Or you can put your files in some folder, and instruct the server that this folder is the root for the app and that myhost.com/myapp1/ looks at the root of that folder. Then index.html will be accessible at myhost.com/myapp1/index.html. – Azobenzene

What do you mean that it should has a server to serve the files? Can you recommend me some hosts in which you have done this? – Cypher

I've used Heroku to act as a plain host. You can just deploy index.html, bundle.js and css to heroku and it should work (maybe some issues, but not expected). On deploy tab in heroku you just pull these 3 things from github. – Azobenzene

Thank you! I just tested a simple app in 000webhost, and it works like a charm! Just as a suggestion, you should give create-react-app a try. Is a package that you can find in npm and creates a ReactJS app ready to be used. For further visitors, I used create-react-app, and then, I just executed npm run build and uploaded all my files to public_html folder in 000webhost (root folder) and it works. Watch out that your files uploaded to the static folder are well placed, if not, only you'll see is a white screen. – Cypher

Answer 2

Run 'npm run build' from your command line folder where your project is located. Copy files from the 'build' folder that is created and upload them in your host's root folder or equivalent. Takes less than a minute.

Erleena

My 'build' folder only contains a favicon image and a manifest.json file which isn't working with a typical web host. – Beatabeaten

Answer 3

This may be quite old, but, i have accomplished the React deploy on a regular web hosting on subdirectory;

A few things that must be changed or included

1 - Set the "homepage" on package.json - "homepage":"https://example.com" or in my case "homepage":"https://example.com/myApp"

2 - Set basename on router file - <Router basename={'/myApp'}></Router> OR <BrowserRouter basename={'/myApp'}></BrowserRouter>

3 - Set the .htaccess file as -

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

4 - build - npm run build

5 - Now i can access my React App on https://example.com/myApp

source: google and https://www.fullstacktutorials.com/deploy-react-app-subdirectory-10.html

Starinsky