I didn’t find any way to host a React JS app on DirectAdmin online so I’m putting it up here and on my Business blog hoping it helps someone.

React JS is a popular Javascript framework created by Facebook used in building modern websites.

I’ve been tinkering with it for the past few weeks and one thing I noticed was every tutorial was pointing to Heroku, AWS & other cloud platforms when it got to the point of deployment.

I own two Web Hosting brands (this blog is hosted on one) and examining the final files from a React build, I didn’t see anything that should prevent the app from being hosted on this site so I went ahead to try it out and the process I went through is documented below.

This is for a Rock Paper Scissors Game from GitHub

1. Build your App

The app I’d upload was built using “Create-React-App” and the above Github Repo.

Once you’re done building and the app is working perfectly on your local server, go to your terminal and run one of the following commands:
yarn build

npm run build

This would create a production file for the App which you can deploy anywhere

2. Zip your Build folder

After running the above command, a new folder called “build” was created in the React development environment with the contents as shown below.

Just select all the contents and compress into a zip/tar/rar file.

3. Login to your DirectAdmin Hosting account

Login to your DirectAdmin.

It usually is https://yourwebsite.com:2223 (or whichever port your Hosting provider gives to you)

If you don’t have a Hosting plan you can get one with a .com domain for just £17 from Target Host.

4. Upload your zipped Build file & extract

After logging in, scroll down to “File Manager”

Then click on public_html

Upload your zipped file in here then extract it so all the files show as below:

5. Visit your homepage!

Believe it or not, if you’re uploading this on the root of your website, you’re done!

I uploaded mine to a sub folder though, so it didn’t load.

All I did was, open the “index.html” and remove the leading slash from:
href="manifest.json"

src="static/js/main.19eb9bc3.js"

and

href="static/css/main.eb1abba8.css"

which made the App search for these files in the subfolder & it all works!

Visit the React JS App on DirectAdmin here.

Please note this is the same process on cPanel & it might be more complex with apps communicating with a database and the like.