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 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.

• 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 understand if some other computer requests a certain information and serve that desired information, and also provides securities to the database and other information stored in it.
• Most used servers are apache2, Nginix, Microsoft IIS, Open Resty.

HTML

• HyperText Markup Language is the markup language that makes the structured way to write the document that browser understands and displays in the desired format.
• Person who write HTML are called HTML authors
• HTML files are saved in .html or .htm
  • .htm because in initial days, all file extension are only 3 letters, but later that is not possible and now all servers support .html or .htm file extensions.

index.html

• This is the file that most of the servers (even the most famous apache2) look first to start with.
• It can also default.html. But somehow all forgot this filename and everyone started with

Basic Tags

• HTML written in the structured way that the contents will be enclosed within some tags.
• Based on what tag we use, browser will display those content in different format

H1 tag

• using H1 tag will make the content displayed in Heading 1 styling

H2 tag

• using H2 tag will make the content displayed in Heading 1 styling

p tag

• using p tag will make the content displayed in paragraph styling

img

• img tag can be used to display images stored in the same server or in different network location.

1. Create a Folder, preferably with the name as the name of extension(without space, so that useful for path navigation)
2. Create a File "manifest.json" inside the folder.

    >touch manifest.json
   

3. Add below code

   {
   
    "manifest_version": 2,
    "name": "Borderify",
    "version": "1.0",
   
    "description": "Adds a red border to all webpages matching mozilla.org.",
   
    "icons": {
      "48": "icons/test.png" 
    },
   
    "content_scripts": [
      {
        "matches": ["*://*.github.com/*"], 
        "js": ["github_test.js"] 
      }
    ]
   
   }
   

Below 3 keys are important, contains meta data of our plugin

• manifest_version (This is version of this manifest.json file used by the extension)
• name (This is our extension name)
• version (This is version of the extension)
• description is optional (can be upto 132 characters for Firefox and Chrome)
• icons is optional

  • key is image size in px, value is the path where we stored the image(48px * 48px is recommended size)

• content_scripts:

  • This will tell Firefox to load a script into Web pages whose URL matches a specific pattern.

• In this case, we're asking Firefox to load a script called "github_test.js" into all HTTP or HTTPS pages served from "github.com" or any of its subdomains.

1. Create file "github_test.js" inside the root directory

   document.body.style.border = "5px solid red"; //This will add red border for  the webpage  we asked to inject this property in content_scripts
   

   • This script will be loaded into the pages that match the pattern given in the content_scripts in manifest.json key.
   • The script has direct access to the document, like scripts loaded by the page itself.
2. In Firefox, open "about:debugging"
3. Select "This Firefox" option in the left pane.
4. Click "Load Temporary Add-on" button.
5. Select the manifest.json file of your project
6. Now the extension will be installed in your Firefox browser.
7. To load the plugin in Google chrome, navigate to "chrome://extensions/", toggle to Developer Mode, and select the plugin folder.