Using the KurocoFront app domain for your front-end staging site

Once you have your custom domain, you can use the default domain https://SITE-KEY.g.kuroco-front.app for your staging site. This tutorial explains how to do so by creating a separate GitHub branch.

We will implement the following branch and domain structure.

Branch	Domain
main	Custom domain
develop	https://SITE-KEY.g.kuroco-front.app

Note: As an example, develop is used as the branch name of the staging site. You can use any name you want.

This tutorial assumes that your site can be displayed on your custom domain, based on the instructions in Tutorial: Using your own custom domain name on KurocoFront.

Implementing a staging site

1. Create a branch for the staging site on GitHub

First, separate the production site and staging site displays in the GitHub branch. Go to your directory and execute the following command:

git checkout -b develop

2. Modify the build.yml file for the staging site

Next, modify the /.github/workflow/build.yml file in the develop branch. In the sidebar menu of the Kuroco management screen, click [KurocoFront] -> [GitHub] and copy the content in the GitHub Actions workflow file staging site text area.

Open /.github/workflow/build.yml in the develop branch and overwrite the existing content with the text you copied.

Then, replace the text following branches: in the build.yml file with the branch name of your staging site. For this tutorial, we are changing this text from main to develop.

Save the file after the modification.

Push the changes to GitHub and execute the GitHub Actions. Click the [Actions] tab on GitHub to check the build status. When the build process is completed, it will be displayed in the develop branch.

The staging domain (https://SITE-KEY.g.kuroco-front.app) will now reflect any changes to the staging site in the develop branch.

Verifying the staging site

Now, verify that the staging site reflects the updates to the develop branch. For this tutorial, we will implement basic authentication on the staging site.

In the develop branch, write the following code in kuroco_front.json:

{
    "rewrites": [
        {
          "source": ".*",
          "destination": "/index.html"
        }
      ],
    "redirects": [],
    "basic":["user:pass"],
    "ip_restrictions":[]
}

Then save the file and push it to GitHub. Once the build is completed, access the staging site from the logo on the Kuroco admin panel.

You will see that the staging site now requires basic authentication.

Click [Top page] in Kuroco to open the production site, which does not require basic authentication. As expected, the production site will not reflect any updates to the develop branch.