Skip to main content

Separating development and production environments for your sample membership site


This tutorial explains how to separate the development environment from the production environment. Doing so allows you to verify any updates or modifications before they are published to the production site.

What you'll learn

The following process will be used to separate the development and production environments.

Before you start

To begin this tutorial, you should have built a site by copying the open-source sample membership site (NuxtAuth-based KurocoFront template site). If you have not done so, see Tutorial: Building a membership website on Kuroco from the sample site template.

For this tutorial, we will create two types of environments:

  • Development
  • Production

You will be verifying and publishing your code step by step from the development to the production environment.

We will create a branch on GitHub for each environment, and the relevant GitHub Actions will be executed each time the branch is updated. We will also set up a flow that automatically updates the front-end of the corresponding environment.

Custom domain configuration

Refer to Tutorial: Using your own custom domain name on KurocoFront on how to set up your domain.

Also, modify the front-end domain and API domain so that they form a subdomain relationship (i.e., matching domains or first-party cookies). Due to third-party cookie restrictions, the sample membership site may not be able to store cookies using the cookie login method for certain browser/usage environments.

See: Tutorial: Display topic data with Security: Cookie

GitHub settings

For this tutorial, you need to split the GitHub repository into two branches as follows.

Production environmentmain
Development environmentdevelop

For more on branch splitting, refer to GitHub Docs: Managing branches.


We recommend protecting your main branch to prevent releases to unexpected production environments. For more information on this topic, see GitHub Docs: Managing a branch protection rule.

.env file verification and modification

First let's verify and update the current env file.

The ./env.${environment}.js files for both development and production environments already exist:

  • env.development.js
  • env.production.js

Modify these files for each Kuroco environment you have created. In this tutorial, we are modifying them as follows:

module.exports = {
META_TITLE: 'Nuxt Auth',
ROBOTS: 'index',
BASE_URL: 'https://[Original-domain]'
module.exports = {
META_TITLE: '[Dev] Nuxt Auth',
ROBOTS: 'noindex',
BASE_URL: 'https://[Original-domain]'

The original API domain should match the one you set up in Custom domain configuration.

These modifications lead to the following dynamic changes:

  • Production environment META_TITLE: Nuxt Auth
  • Development environment META_TITLE: [Dev] Nuxt Auth

npm script verification

The next step is to verify the npm script, a simple command using Node.js.
In NuxtAuth, the contents are pre-defined in package.json.

An excerpt from package.json shows the configuration below.

"scripts": {
"build": "cross-env NODE_ENV=development nuxt build",
"generate": "cross-env NODE_ENV=development nuxt generate",
"build-prod": "cross-env NODE_ENV=production nuxt build",
"generate-prod": "cross-env NODE_ENV=production nuxt generate",

Currently, build and build-prod have different values of NODE_ENV=...:

buildcross-env NODE_ENV=development nuxt buildbuild command for developmen
generatecross-env NODE_ENV=development nuxt generategenerate command for development
build-prodcross-env NODE_ENV=production nuxt buildbuild command for production
generate-prodcross-env NODE_ENV=production nuxt generategenereta command for production

This value affects nuxt.config.js, the configuration file for the build.

It should contain the following code:

const environment = process.env.NODE_ENV; // <- (*1)
const envSettings = require(`./env.${environment}.js`);

export default {
env: envSettings,


head: {
htmlAttrs: {
lang: 'en'
titleTemplate: '%s - ',
title: envSettings.META_TITLE, // <- (*2)

(*1) specifies the value of NODE_ENV=... , which changes dynamically depending on the npm script.

  • For build: require('./env.develop.js')
  • For build-prod: require('./env.production.js')

In (*2), the META_TITLE values are defined in the respective env.${environment}.js files.

Modifications to the GitHub Actions build file

Modify the existing /.github/workflow/build.yml file as needed on the develop and main branches, respectively.
Make the following changes:

Create build definitions for develop and main

Make two build files, one for the production environment and one for the development environment:

  • For production: .github/workflows/build.yml.
  • For development: .github/workflows/develop.yml.

Since .github/workflows/build.yml already exists, you can simply copy it. However, .github/workflows/develop.yml needs to be created from scratch.

Set build and deploy locations for each environment

Modify the build behavior to fit each environment.

In this tutorial, we will modify the following npm scripts:

  • For production: build-prod and generate-prod
  • For development: build and generate

First, in .github/workflows/build.yml for the production environment, modify run: npm run build and run: npm run generate to run: npm run build-prod and run: npm run generate-prod.(There are two places each.)

Image from Gyazo

       - name: Install dependencies
run: npm ci
- name: Build
run: npm run build-prod
- name: Generate
run: npm run generate-prod
- name: Archive Production Artifact
uses: actions/upload-artifact@v2

Next, modify .github/workflows/develop.yml for the development environment. Click [KurocoFront] -> [GitHub] and copy the content in the GitHub Actions workflow file staging site text area.

Image from Gyazo

Overwrite the .github/workflows/develop.yml file with the copied contents.

Image from Gyazo

Update build file events

Next, modify each build file such that events are triggered only by updates to the following branches:

  • For production: main
  • For development: develop

Paste the code below into .github/workflows/develop.yml.

- develop
branches: [ develop ]
name: Build

Create kuroco_front.json for the development environment

Copy the kuroco_front.json file in the /src/static directory to create kuroco_front_dev.json.

Image from Gyazo

Also, you need to apply kuroco_front_dev.json only to develop.yml. Insert the code below into develop.yml.

       - name: Checkout Repo
uses: actions/checkout@v2
ref: ${{ steps.get_branch.outputs.branch }}
+ - name: Copy kuroco_front.json
+ run: cp src/static/kuroco_front_dev.json src/static/kuroco_front.json
- name: Use Node.js
uses: actions/setup-node@v2
- name: Checkout Repo
uses: actions/checkout@v2
+ - name: Copy kuroco_front.json
+ run: cp src/static/kuroco_front_dev.json src/static/kuroco_front.json
- name: Use Node.js
uses: actions/setup-node@v2

For more information, see FAQ: What is kuroco_front.json?.

Activity verification

Confirmation of file configuration

Let us verify the contents we have set so far.
The YAML file and kuroco_front.json are separated for the production environment and the development environment, so the main branch and the development branch both have the following file structure.

- build.yml
- develop.yml
- static
- kuroco_front_dev.json
- kuroco_front.json

Image from Gyazo

Confirmation of build

Once the push for each environment is completed, access the respective repository on GitHub and click on [Actions].

Image from Gyazo

You should see a list of active or completed Actions.

Image from Gyazo

When the build is completed, verify that the META_TITLE of the development environment reads **[Dev] Nuxt Auth**.


If you have any other questions, please contact us or check out Our Slack Community.