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.

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.

Overview

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.

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:

• Before you start
• Overview
• Custom domain configuration
• GitHub settings
• Modifications to the GitHub Actions build file
  • Create build definitions for develop and main
  • Update build file events
  • Set build and deploy locations for each environment
  • Create kuroco_front.json for the development environment
• npm script verification
• .env file verification and modification
• Activity verification

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.

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.

 on:
   push:
     branches:
      - develop
   workflow_dispatch:
    branches: [ develop ]
 jobs:
   build:
     name: Build

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

Paste the code below into .github/workflows/build.yml for the production environment.

       - 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
         with:

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.

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

     steps:
       - 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@v1
         with:

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

npm script verification

The next step is to verify the npm script, a simple command using Node.js.
The abovementioned build-prod and build commands run this script.
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=...:

• build: NODE_ENV=development nuxt build
• build-prod: NODE_ENV=production nuxt build

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.

.env file verification and modification

Now 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]'
};

These modifications lead to the following dynamic changes:

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

This concludes the setup for both environments.

Activity verification

Let us verify the contents we have set so far. For this tutorial, we will only look at the development environment.

Push the develop branch to a remote repository, then access the repository on GitHub and click [Actions].

You should see a list of active or completed Actions.

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