Using Buddy.Works to Automate React Deployment on Shared Hosting

Search for a command to run...

No comments yet. Be the first to comment.
Web Web is the system of interconnected networks. Main system which collects and serves the information is called as servers. Servers Servers are the computer which was connected to internet 24*7. Servers has the set of software that can understan...

Below steps to be followed for creating Firefox extension Create a Folder, preferably with the name as the name of extension(without space, so that useful for path navigation) Create a File "manifest.json" inside the folder. >touch manifest.jso...

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.
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 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.
I listed the steps here I followed to automate the service.
Signup buddy.woks
Create a New Project. I named it “prasanthkj.com” (which is my own website)
Click “Actions” and add the actions we need. As I said, I need two steps to be automated.
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.
For every project, we can create many pipelines for a set of actions to perform.
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)
After that, I have to add the necessary actions to perform once it triggered.
After that, I add the necessary actions to perform once it is triggered.
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.
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.
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.
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!

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.
I tried some other services also, but this seems very handy and easy to use.
Let me know if it works for you.