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

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.

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.

kuroco_front.json

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