How to deploy the source from GitHub to KurocoFront

This tutorial explains how to deploy the source from GitHub to KurocoFront.

1. Prepare a repository

In GitHub, prepare a repository where you want to deploy to KurocoFront.

Note: Only static files can be hosted initially by default, so repositories must contain JavaScript frameworks such as Nuxt.js and HTML/CSS/JS files, as well as media files such as images.
The screenshot above shows Nuxt.js repository.

2. Connect GitHub repository with KurocoFront

On Kuroco's management page, click [KurocoFront] -> [GitHub] on the side menu to access KurocoFront's page.
Then click [Authorize GitHub Repository].

Login to GitHub once the login screen is displayed.

GitHub screen is displayed after login.

From "Repository access", select the repository to connect with KurocoFront.

Note: you can change Kuroco connection settings afterward. If you use multiple Kuroco with one account, you will have to select multiple repositories here because there is only one GitHub Apps for Kuroco.
Note: Please note that the repository which can be connected is the only one with an admin authority.

Click [Save] after selecting the repository.

Login to Kuroco again.

KurocoFront page appears after the connection is completed.

The connection of GitHub repository and KurocoFront is completed.

3. Create kuroco_front.json

In order to use KurocoFront, kuroco_front.json need to be placed under the root directory.
Note: Create kuroco_front.json under /static in case of Nuxt.js.

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

Note: You can use the URL rewrite process, basic authentication and IP address access limit for kuroco_front.json. The password of BASIC authentication is a plain text. Be careful when you change the repository to public.

4. Place YAML file under .github/workflows

To use GitHub action, place the YAML file under .github/workflows.
Copy the part in KurocoFront's page shown below and create build.yml by adjusting the build command and the branch name and such.

Place the created build.yml under .github/workflows to complete the configuration.

5. Display the front page

Click [Top page] button on the side menu.

If the deployed site is displayed without any issue, the deployment is complete.

Regarding the domain

KurocoFront's domain looks like https://sample.g.kuroco-front.app by default.
Refer to How to use original domain on KurocoFront regarding the original domain.

Remark

• If you don't know how to setup GitHub Actions, feel free to contact us via Support Slack.

• Please not that the site will not be displayed without kuroco_front.json.