Using the Media Sample Site

We have released a Media Sample Site that can be used as a template for building Kuroco.

The Media Sample Site includes content display commonly used in corporate websites, as well as a login function as part of the template.

Please use it as a template when starting a project with Kuroco.

Demo Site

Demo Site URL: https://dev-next-media.g.kuroco-front.app/
Repository: https://github.com/diverta/front_next_media

List of Features

• Content Management
  • Article list
  • Article details
  • Ranking
  • Feature Article
  • Category Search
  • Tag Search
  • Keyword Search
• Contact Form
  • Dynamic display of inquiries
  • Form submission
• Membership Functionality
  • Registration and cancellation
  • Login and logout
  • Updating member information
  • Password reminder
  • Members Only Articles
  • Favorite

Concept

This sample site is created with the following concepts in mind:

• Present as an implementation example using the Next.js App Router
• This is a template site for users to edit and use, aimed at users who are somewhat familiar with using frontend frameworks
• Minimizing the use of plugins, with users having the option to add desired plugins themselves.
• The template does not incorporate a CSS framework, allowing users to apply the one they are familiar with.

Prerequisites

The following are required before proceeding with this project.

info

This project uses Next.js. Please make sure that Next is available in your environment in advance.
Reference: Next.js Installation

info

To deploy the project, push the source code to GitHub. Please create a GitHub account in advance.
Reference: GitHub Docs Quickstart

Preparing the Backend

Registering with Kuroco

First, register for a Kuroco account. Fill in the required information from the Free Trial page and click "Register".

caution

The Media Sample Site will be created as a sub-site.
Please prepare separate site keys for the main site and the sub-site.

The site key used to register the Kuroco account from the free trial will be the main site key.

You will receive a registration confirmation email in the inbox of the registered email address. Click the management screen URL provided in the email to log in, and the following screen will be displayed.

Adding a Sub-Site

Add a sub-site for the Media Sample Site from the site list.

info

The main site that you've registered via the free trial page is a membership sample site by default. For this exercise, we will not be using the frontend of the main site.
Register your credit card for payment on the main site and the costs, including the usage fee for the sub-site, will be billed to the main site.

Click [Environment Settings] -> [Site List].

Click [Add].

Set the copied site name as [Template]Next Media(Default), fill in the required items, and click [Add].

After receiving the registration completion email for the sub-site, log in and check the content.

note

From now on, all explanations of the Kuroco management screen will be for the sub-site.

Setting CORS

We will set the CORS in the API page.
Click [API] -> [Default], then click "Operation CORS".

Click "Add Origin" for CORS_ALLOW_ORIGINS.

Set http://localhost:3000 in the new field and click "Save".

The CORS settings configurations are now done.

Prepare the frontend

Clone the media sample site repository

Clone the source code to your local directory from the GitHub repository. Execute the following command in the terminal.

git clone https://github.com/diverta/front_next_media.git

After cloning, navigate to the front_next_media directory and install the project.

cd front_next_media
npm install

Next, open .env file and change the NEXT_PUBLIC_BASE_URL to your site's API domain.

tip

You can find the API domain in your account settings or on the endpoint list page.

Once you're ready, execute the following command in the command line to check the local display.

npm run dev

Access http://localhost:3000 to see the site.

Create a repository on GitHub and push the files

Next, push the cloned repository to your own repository.
Log in to GitHub and click [Repositories] -> [New].

The repository creation screen will appear, fill in the necessary information, and click "Create repository".
(In this case, I entered "kuroco_front_next_media" for the "Repository name".)

That completes the repository creation.

Now, push the files you cloned to this repository.
Currently, it is associated with https://github.com/diverta/front_next_media.git, you will need to change it to the repository you created earlier.

Execute the following command in the command line.

git remote set-url origin https://github.com/YourGitHubAccount/kuroco_front_next_media.git

Note: Please change the following two points according to your own account.

• YourGitHubAccount: Your GitHub account name
• kuroco_front_next_media: The repository name you created earlier

The remote repository has now been changed. Just to be sure, execute the following command in the command line.

git remote -v

You will see that the repository has been changed to the one you set.

origin  https://github.com/YourGitHubAccount/kuroco_front_next_media.git (fetch)
origin  https://github.com/YourGitHubAccount/kuroco_front_next_media.git (push)

Now, push the files to the GitHub repository you created. Please execute the following command.

git push -u origin main

When you check the GitHub repository, you will see that the files have been pushed.

tip

Note: How to handle errors when pushing
In this sample site, there is a yml file for GitHub Actions in the repository.
Therefore, depending on the GitHub settings, an error may be displayed. If an error occurs, please refer to FAQ -> I get an error message when I push to the GitHub repository. How can I resolve it? for troubleshooting.

The frontend preparation is now complete. Next, we will explain how to connect to your Kuroco.

Connecting Kuroco and GitHub for deployment

KurocoFront configuration

Using KurocoFront, we will connect Kuroco with the GitHub repository that was cloned earlier.

Click [KurocoFront] -> [GitHub] to display KurocoFront.

Click "Authorize GitHub Repository".

You will be prompted to log in to GitHub, so please log in.

After logging in, the GitHub screen will be displayed.

Select the repository to connect from "Repository access".

tip

The repository connection settings can be changed later. If you want to use multiple Kuroco with one account, you will need to select multiple repositories here.

tip

Please note that only repositories with administrator privileges can be connected.

After selecting the repository, click "Save".

You will be prompted to log in to Kuroco again, so please log in.

Once the connection is complete, you will be redirected to the KurocoFront screen.

Select the cloned repository in "Repository" and click "Update".

In "GitHub workflow integration", select the following and click "Update":

• Workflow: Build and deploy to KurocoFront
• Target branch: main

The configuration of KurocoFront is now complete.

Modifying the build.yml file

Modify the /.github/workflow/build.yml file.
Access [KurocoFront] -> [GitHub], set the Framework to next and copy the contents inside the "Repository" framework text area.

Open /.github/workflow/build.yml and overwrite it with the copied contents.

Once the file is updated, push the changes to GitHub. The process is complete after GitHub Actions has been executed and the build and deployment has been completed successfully.

Checking the display

Click "View site" from the Kuroco management screen.

Then, the site cloned from front_next_media will be displayed.

Adding Content

The media sample site has a site top article list and article details constructed with SSG (Static Site Generation).
This means that API requests are sent during deployment to fetch the latest articles.

Since pre-fetched content can be displayed when users access the site, it is possible to reduce the number of API requests and improve performance. However, if you add or update content on the Kuroco side, the added content will not be displayed unless you redeploy.

Kuroco has a feature to execute GitHub Actions linked to content additions and updates, performing the deployment, so enable this feature to add content.

Click [Add] from the content list.

Enter the desired content and enable [GitHub Actions Workflow] to add the content.

tip

Since the settings are remembered for each piece of content, it will be checked as enabled by default from the second time onwards.

You can see that GitHub Actions is executed simultaneously with the addition of content.

Once the deployment is complete, it will be displayed on the front end.

When building the front end, appropriately use SSG and CSR (Client-Side Rendering) according to the project's requirements, such as using SSG for pages where content doesn't change frequently and SEO is important, and CSR for pages that require real-time data updates or display content differently depending on the user.

Questions and bug reports

The setup for the media sample site is now complete.

If you have any questions or concerns, please contact us through our inquiry form.
Also, if you find any issues with the code, please submit an issue or pull request through our repository.