How to build pre-render pages based on environments

Question

My requirement is to pre-render pages from CMS and store in S3. In my app i have .env.development, .env.prod variables which holds the API endpoints of CMS.

I have two separate Jenkins job, one is for dev and another is for prod build. So when I start Jenkins job to build as "npm run build:dev" or "npm run build:prod" then it fetches JSON from CMS api endpoints defined in .env.development or .env.prod and creates build with version as "myapp-dev-<x.o>" or "myapp-prod-<x.o>" and upload in to nexus and also to S3.

But now the ask is to have a single build for both dev and prod and create only one version "myapp-<x.o>" My question is how is it possible to have pre-rendered pages based on environments within the same build version?

Andrew Zheng · Accepted Answer · 2021-03-22 16:54:21Z

It is not perfect but you can do it.

Have a customized distDir

We will pass the different environmental variables to control the build directories.

let distDir = 'devBuild';
if (process.env.BUILD_ENV === 'prod') {
  distDir = 'prod_build';
}
if (process.env.BUILD_ENV === 'stage') {
  distDir = 'stage_build';
}

Run 2 different builds

We need to run 2 builds with different variables to produce prod & stage builds. You can use npm-run-all to make npm scripts a bit easier to read.

  "build": "npm-run-all --parallel build:production build:staging",
  "build:production": "BUILD_ENV=prod next build", 
  "build:staging": "BUILD_ENV=stage next build",

Publish 2 builds in a single package

Now you should have 2 different builds in prod_build and stage_build. You can deploy them at the same time, with a single package version.

you can sync to the corresponding S3 buckets from prod_build and stage_build.

Collectives™ on Stack Overflow

How to build pre-render pages based on environments

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related