How to use Kuroco membership sample site (Required time 3 min)

Estimated working time: 3 minutes

For those who want to try Kuroco, we will explain how to use Kuroco using the membership sample site provided by our company as an open-source.
You can build a site with Kuroco without building or deploying the front-end, so it makes it easier for you to try Kuroco.
You can set up a membership site in about 3 minutes.
Please use it to understand what Kuroco can do and how it works.

Prerequisite

Browser

The membership site we'll build in this tutorial will not work on iOS/Safari, since some extra steps are needed to make it compatible. We will not cover that process in this tutorial so kindly use Google Chrome or Microsoft Edge.

Build a site

Let's start building a site.

Create Kuroco's account

Create your Kuroco account. Enter the required information on Free Trial and click [Sign up].

Image (fetched from Gyazo)

Please keep note of "Site name", "E-mail" and "Password" as you'll use them later.

A confirmation e-mail will be sent to the registered e-mail address.

Image (fetched from Gyazo)

Click on the URL received via e-mail and log in. Kuroco's management screen will be displayed.
Image (fetched from Gyazo)

CORS settings

Let's set CORS from the API page.
Click [API] -> [Default API] on the side menu and click [Operation CORS] button.

Image (fetched from Gyazo)

Click [Add Origin] in CORS_ALLOW_ORIGINS.
Image (fetched from Gyazo)

Enter https://dev-nuxt-auth.g.kuroco-front.app in the new field and click [Save].
Image (fetched from Gyazo)

The setup of CORS is now complete.

Check the membership site

Next, let's check the membership site.

Access the URL below.

https://dev-nuxt-auth.g.kuroco-front.app/

The login screen will be displayed so log in as follows:

  • Your site name: the site name you entered in the signup form
  • ID: E-mail you entered in signup form
  • Password: Password you entered in signup form

Click [Sign In] after filling the fields above to access the Home page.

Image (fetched from Gyazo)

Your membership site was created and the setup is now complete.
For the front-end, we're using a template site of KurocoFront created for Demo purposes. As for the back-end, it's based on your personal Kuroco account, meaning you'll need to populate your own data.

Let's try to update the site

Check contents

Click [Content] -> [お知らせ] in the side menu of the management page and you can find 1 test data.

Image (fetched from Gyazo)

This is the content that is displayed in "Latest articles" on the front-end.
Image (fetched from Gyazo)

fetched from Gyazo

Example: Add new content

On the Kuroco management page, click [Content] -> [お知らせ] and then click the [Add] button at the top right.
Image (fetched from Gyazo)

Enter the necessary information on the new content page and click [Add].

Image (fetched from Gyazo)

After adding, you can see that the new content which you have created is displayed in "Latest articles" on the front-end. Image (fetched from Gyazo)

Finally

You have completed building your site and have confirmed that it can be updated properly.
Your original membership site using your own Kuroco account has been completed.
You can use Kuroco without deploying the front-end so feel free to use it as a sample site.

Note:
In this tutorial, we used a common front-end to create the site easily.
By cloning the source code from the repository below and deploying it on the KurocoFront, you can easily build a site and can customize its design and functions.

https://github.com/diverta/front_nuxt_auth

If you have any questions, feel free to contact us via Contact us.

If you have any other questions, please use our contact form or Slack workspace.