I use WordPress for many of my projects. While using WordPress, I can opt for any shared hosting, which is much cheaper and easier since I don’t have to build after coding and copy to my server.

However, for a few of my projects, I was using React.js, and I couldn’t use AWS or GCP. I wanted to use shared hosting to host this React website.

What I was doing is coding in my laptop, building the react website locally and uploading the build files into shared hosting. This is tedious as I will modify many times and want to see it live.

Can I Automate it?

I was thinking to automate it. And to automate it,

• I need the code to be somewhere online. So I use GitHub (which anyhow I’m doing to store my code)

• It have I have to build my code

• It have to copy my build files into server

I gone through lot of CI/CD services and found Buddy.Works suits me very well.

Using Buddy.Works For Automating Build and Copy Files

I listed the steps here I followed to automate the service.

1. Signup buddy.woks

2. Create a New Project. I named it “prasanthkj.com” (which is my own website)

3. Click “Actions” and add the actions we need. As I said, I need two steps to be automated.

4. I will do the coding, and I will push my code to GitHub. So the tool have to identify when I’m pushing my code and start the build and copy it.

5. For every project, we can create many pipelines for a set of actions to perform.

6. In my pipeline, first I have to make the setting to run this pipeline, only when git push is detected for my git repo. (Just authenicate buddy.works in your GitHub)

   

Note, the trigger. It has to run “On Events” and the event is git push. Yes, this is what I have to set to trigger the pipeline. (And yes, at any time, we can run manually if needed)

7. After that, I have to add the necessary actions to perform once it triggered.

8. After that, I add the necessary actions to perform once it is triggered.

9. First is to build the react app.

   

As seen in the video, just add node js and 2 steps to be there, to install packages and to build it.

Yes, we have a lot of action, we can do from this.

11. Next step is copy the build file into my hosting. I created my public_html as ftp folder, which we can do in from cpanel of shared hosting. Copy the ftp and have the username and password, and create the next action.

12. Select Transfer Files-> SFTP&FTP,

• Set Target to our ftp site.

• Set Source as “Pipeline Filesystem” and Pipeline filesystem path as “/build/” (where we have the build files in React)

  

And try the connection test and save it.

13. As seen in the screenshot, just this is sufficient to do my works, that too in a shared hosting, I can host my React website. That awesome right!

14. 

15. That’s it!. Now whenever I push my code from my terminal, within few time (depending on the size of the project), the website will be updated.

So, With this Buddy.Works CI/CD, we can use our shared hosting to have the React website and automatically build and have the build files.

I tried some other services also, but this seems very handy and easy to use.

Let me know if it works for you.