fix: add NEXT_PUBLIC_SET_SECURE_COOKIE to control the behavior (#387)

Because

- Depend on NODE_ENV to do the logic is troublesome

This commit

- add `NEXT_PUBLIC_SET_SECURE_COOKIE` to control the behavior
- Replace `env.sh` with `next-env.mjs`

.env

@@ -1,10 +1,3 @@
-# These env are the base url of our backends, we are using api-gateway right now so you can safely ignore these env. They are only for debugging right now.
-NEXT_PUBLIC_CONSOLE_BASE_URL=http://localhost:3000
-NEXT_PUBLIC_MGMT_BACKEND_BASE_URL=http://localhost:8084
-NEXT_PUBLIC_PIPELINE_BACKEND_BASE_URL=http://localhost:8081
-NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL=http://localhost:8082
-NEXT_PUBLIC_MODEL_BACKEND_BASE_URL=http://localhost:8083
-
 # The API version
 NEXT_PUBLIC_API_VERSION=v1alpha
 
@@ -14,13 +7,10 @@ NEXT_PUBLIC_INSTILL_AI_USER_COOKIE_NAME=instill-ai-user
 # The edition of the console. If you are using our open source console, you don't need to change it
 NEXT_PUBLIC_CONSOLE_EDITION=local:ce-dev
 
-# When you set this to true, console will disable usage collection
-NEXT_PUBLIC_DISABLE_USAGE_COLLECTION=false
-
 # The endpoint to indicate the base url of api-gateway
 NEXT_PUBLIC_API_GATEWAY_BASE_URL=http://localhost:8080
 
-# This should be set to http://api-gateway:8080 when working in docker
+# This should be set to http://api-gateway:8080 when working in docker with VDP.
 NEXT_SERVER_API_GATEWAY_BASE_URL=http://localhost:8080
 
 # This env is a placeholder, do not use it
@@ -31,3 +21,17 @@ NEXT_PUBLIC_DISABLE_CREATE_UPDATE_DELETE_RESOURCE=false
 
 # Centralize configuration that control the amount of items per page of every lists.
 NEXT_PUBLIC_LIST_PAGE_SIZE=6
+
+# When you set this to true, console will disable usage collection
+NEXT_PUBLIC_DISABLE_USAGE_COLLECTION=false
+
+# When set to true, the onboarding cookie can only be set on a https domain
+# If you are using http, you need to set this to false
+NEXT_PUBLIC_SET_SECURE_COOKIE=false
+
+# These env are the base url of our backends, we are using api-gateway right now so you can safely ignore these env. They are only for debugging right now.
+NEXT_PUBLIC_CONSOLE_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_MGMT_BACKEND_BASE_URL=http://localhost:8084
+NEXT_PUBLIC_PIPELINE_BACKEND_BASE_URL=http://localhost:8081
+NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL=http://localhost:8082
+NEXT_PUBLIC_MODEL_BACKEND_BASE_URL=http://localhost:8083

Dockerfile

@@ -50,7 +50,7 @@ WORKDIR /app
 # Uncomment the following line in case you want to disable telemetry during runtime.
 ENV NEXT_TELEMETRY_DISABLED 1
 
-# We need bash to run our entrypoint.sh and env.sh
+# We need bash to run our entrypoint.sh
 RUN apk add --no-cache bash
 
 RUN addgroup --system --gid 1001 nodejs
@@ -61,9 +61,9 @@ COPY --from=builder /app/next.config.js ./
 COPY --from=builder /app/package.json ./package.json
 
 # We need to grant nextjs user to have the permission to alter the /public folder to
-# make env.sh work correctly. (env.sh will create __env.js under public folder)
+# make next-env.mjs work correctly. (next-env.mjs will create __env.js under public folder)
 COPY --from=builder --chown=nextjs:nodejs /app/public ./public
-COPY --from=builder --chown=nextjs:nodejs /app/env.sh ./
+COPY --from=builder --chown=nextjs:nodejs /app/next-env.mjs ./
 COPY --from=builder --chown=nextjs:nodejs /app/.env ./
 
 # Automatically leverage output traces to reduce image size 
@@ -78,11 +78,11 @@ USER nextjs
 
 # Permisions to execute script
 RUN chmod +x ./entrypoint.sh
-RUN chmod +x ./env.sh
+RUN chmod +x ./next-env.mjs
 
-# We need this permission for env.sh to create the __env.js in /public folder
+# We need this permission for next-env.mjs to create the __env.js in /public folder
 RUN chmod +wx ./public
-RUN chmod +rwx ./.env
+RUN chmod +rwx ./next-env.mjs
 
 EXPOSE 3000
 

Dockerfile.playwright

@@ -20,7 +20,7 @@ RUN adduser --system --uid 1001 playwright
 COPY --chown=playwright:nodejs ./integration-test ./integration-test
 COPY --chown=playwright:nodejs ./playwright.config.ts ./
 COPY --chown=playwright:nodejs ./.env ./
-COPY --chown=playwright:nodejs ./env.sh ./
+COPY --chown=playwright:nodejs ./next-env.mjs ./
 COPY --chown=playwright:nodejs ./entrypoint-playwright.sh ./
 
 RUN mkdir public
@@ -31,10 +31,7 @@ RUN echo "test user: $TEST_USER"
 
 # Permisions to execute script
 RUN chmod +x ./entrypoint-playwright.sh
-RUN chmod +x ./env.sh
+RUN chmod +x ./next-env.mjs
 
 # We need this permission for env.sh to create the __env.js in /public folder
-RUN chmod +rwx ./.env
-
-# Although this image has the full deps playwright needs, this is for pre-caution
-# RUN npx playwright install
+RUN chmod +rwx ./.env

README.md

@@ -25,27 +25,27 @@ The repo mainly follows the guideline of Next.js and has some personal touch on
 
 ### About configuration
 
-- babel.config.js: For the storybook to work correctly. (We use experimental.forceSwcTransforms in next.config.js to force Nextjs use SWC)
+- babel.config.js: For the storybook to work correctly. (We use experimental.forceSwcTransforms in next.config.js to force Nextjs to use SWC)
 
 ## About the UI components
 
 We are following the principles of Instill-ai's design system, you could find the detailed description [here](https://github.com/instill-ai/design-system).
 
 ## Code quality tools.
 
-We are using eslint with custom config for code style, commitlint to ensure commit messages follow instill-ai’s rules. Later we will refactor the codebase to adapt full end-to-end tests.
+We are using eslint with custom config for code style, commitlint to ensure commit messages to follow instill-ai’s rules. Later we will refactor the codebase to adapt full end-to-end tests.
 
 ## How to contribute
 
 To set up the local dev environment with this repo, you need to follow the below step:
 
 1. Clone the [VDP repo](https://github.com/instill-ai/vdp)
 2. Comment out the console part in the [docker-compose-dev.yml](https://github.com/instill-ai/vdp/blob/f563393dca62fc1961e1a370f5a38fb9bc51c5a3/docker-compose-dev.yml#L510) of the vdp folder. This is because we don’t want the latest image to interrupt our development.
-3. In the VDP folder you just clone, use `make build PROFILE=all` to build the full images of vdp, this step will take some time if this is your first time setting up the VDP.
-4. In the same VDP folder, use `make dev PROFILE=all` This will bring up the full working VDP backend, except the console you comment out at the second step.
+3. In the VDP folder you just clone, use `make build PROFILE=all` to build the full images of VDP, this step will take some time if this is your first time setting up the VDP.
+4. In the same VDP folder, use `make dev PROFILE=all` This will bring up the full working VDP backend, except the console you comment out in the second step.
 5. Clone the [console repo](https://github.com/instill-ai/console)
 6. Install pnpm if you don’t have it, use `npm install -g pnpm` or `brew install pnpm` if you have homebrew.
-7. Install all the dependencies, use `pnpm install`.
+7. Install all the dependencies, and use `pnpm install`.
 8. Make sure the environment variables in the `.env` file are correct. They should map one-to-one to the config of the VDP. Please check [.env](/.env) file
 9. You can now use `pnpm dev` to run the local Next.js server if your VDP has been set up correctly, it should not have any error at the browser inspection window.
 10. If you want to build a docker container you could use `pnpm docker-compose-up`.
@@ -66,7 +66,8 @@ To set up the local dev environment with this repo, you need to follow the below
 
 ### TLDR
 
-- We introduce `./env.sh` that will generate a `__env.js` file.
+- We introduce `./next-env.mjs` which digests the inline env variables and `.env` file then generate an `__env.js` file.
+- It will digest the environment variables from the `.env` file and the `process.env` object. (You can specify that only the variable with the prefix `NEXT_PUBLIC_` in the `process.env` will be digested, but it will digest all the variables in the `.env` file.)
 - We digest the `__env.js` file into HTML, it will inject additional variables into the window object.
 - We use a helper function in `/src/utils/config.ts` to access the window object and get the variables.
 - We can still use `process.env` to access the variables in the server-side code.
@@ -75,13 +76,13 @@ To set up the local dev environment with this repo, you need to follow the below
 
 In order to empower users to dynamically set up environment variables (They can take down all VDP services, change the console environment variables in the docker-compose then make dev again to update the environment variable in the container.) We need Next.js runtime environment variables instead of normal variables that passed with process.env.
 
-We introduce the shell script `./env.sh`. This script will read through the ./.env file and override it if you pass the new environment variable through docker-compose or `docker run -e` (Just as how we did it in `pnpm docker-run` command.)
+We introduce the shell script `./next-env.mjs`. This script will read through the ./.env file and override it if you pass the new environment variable through docker-compose or `docker run -e` (Just as how we did it in `pnpm docker-run` command.)
 
 This script will then generate a `__env.js` under `/public` folder. Then we include this script into our HTML in the `/src/pages/_document.tsx` file. 
 
-After embedding this script into the root, this `__env.js` will inject the environment variables into the window object so we can access it in the client-side code. We have a helper function lie in the `/src/utils/config.ts` that can help us simplify the process of retrieving the variables.
+After embedding this script into the root, this `__env.js` will inject the environment variables into the window object so we can access it in the client-side code. We have a helper function lying in the `/src/utils/config.ts` that can help us simplify the process of retrieving the variables.
 
-For server-side code, we will alter the ./.env file in the image. It can also access the new assigned variables by simply using `process.env`
+For server-side code, we will alter the ./.env file in the image. It can also access the newly assigned variables by simply using `process.env`
 
 ### How to use
 
@@ -90,7 +91,7 @@ For server-side code, we will alter the ./.env file in the image. It can also ac
 
 ### Caveats
 
-- Be careful of env prefix. For example, if you have inlined env CONSOLE_BASE_URL, but in the env file it is written as NEXT_PUBLIC_CONSOLE_BASE_URL, the `env.sh` will not find this env in `.env` file and alter it. We recommend you add `NEXT_PUBLIC_` prefix in all the env related to Next.js
+- Be careful of the env prefix. For example, if you have inlined env CONSOLE_BASE_URL, but in the env file it is written as NEXT_PUBLIC_CONSOLE_BASE_URL, the `next-env.mjs` will not find this env in `.env` file and alter it. We recommend you add `NEXT_PUBLIC_` prefix in all the env related to Next.js
 
 ## Security
 

entrypoint-playwright.sh

@@ -1,22 +1,3 @@
 #!/bin/bash
-echo "NEXT_PUBLIC_DISABLE_USAGE_COLLECTION=$NEXT_PUBLIC_DISABLE_USAGE_COLLECTION"
-test -n "$NEXT_PUBLIC_DISABLE_USAGE_COLLECTION"
-echo "NEXT_PUBLIC_MGMT_BACKEND_BASE_URL=$NEXT_PUBLIC_MGMT_BACKEND_BASE_URL"
-test -n "$NEXT_PUBLIC_MGMT_BACKEND_BASE_URL"
-echo "NEXT_PUBLIC_PIPELINE_BACKEND_BASE_URL=$NEXT_PUBLIC_PIPELINE_BACKEND_BASE_URL"
-test -n "$NEXT_PUBLIC_PIPELINE_BACKEND_BASE_URL"
-echo "NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL=$NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL"
-test -n "$NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL"
-echo "NEXT_PUBLIC_MODEL_BACKEND_BASE_URL=$NEXT_PUBLIC_MODEL_BACKEND_BASE_URL"
-test -n "$NEXT_PUBLIC_MODEL_BACKEND_BASE_URL"
-echo "NEXT_PUBLIC_CONSOLE_BASE_URL=$NEXT_PUBLIC_CONSOLE_BASE_URL"
-test -n "$NEXT_PUBLIC_CONSOLE_BASE_URL"
-echo "NEXT_PUBLIC_API_VERSION=$NEXT_PUBLIC_API_VERSION"
-test -n "$NEXT_PUBLIC_API_VERSION"
-echo "NEXT_PUBLIC_CONSOLE_EDITION=$NEXT_PUBLIC_CONSOLE_EDITION"
-test -n "$NEXT_PUBLIC_CONSOLE_EDITION"
-
-# we disable the creation of __env.js here
-ENVSH_CREATE_ENVJS=false NEXT_PUBLIC_DISABLE_USAGE_COLLECTION=$NEXT_PUBLIC_DISABLE_USAGE_COLLECTION NEXT_PUBLIC_MGMT_BACKEND_BASE_URL=$NEXT_PUBLIC_MGMT_BACKEND_BASE_URL NEXT_PUBLIC_PIPELINE_BACKEND_BASE_URL=$NEXT_PUBLIC_PIPELINE_BACKEND_BASE_URL NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL=$NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL NEXT_PUBLIC_MODEL_BACKEND_BASE_URL=$NEXT_PUBLIC_MODEL_BACKEND_BASE_URL NEXT_PUBLIC_API_VERSION=$NEXT_PUBLIC_API_VERSION NEXT_PUBLIC_CONSOLE_BASE_URL=$NEXT_PUBLIC_CONSOLE_BASE_URL NEXT_PUBLIC_CONSOLE_EDITION=$NEXT_PUBLIC_CONSOLE_EDITION ./env.sh
-
+node next-env.mjs
 npx playwright test

entrypoint.sh

@@ -1,27 +1,3 @@
 #!/bin/bash
-echo "NEXT_PUBLIC_DISABLE_USAGE_COLLECTION=$NEXT_PUBLIC_DISABLE_USAGE_COLLECTION"
-test -n "$NEXT_PUBLIC_DISABLE_USAGE_COLLECTION"
-echo "NEXT_PUBLIC_MGMT_BACKEND_BASE_URL=$NEXT_PUBLIC_MGMT_BACKEND_BASE_URL"
-test -n "$NEXT_PUBLIC_MGMT_BACKEND_BASE_URL"
-echo "NEXT_PUBLIC_PIPELINE_BACKEND_BASE_URL=$NEXT_PUBLIC_PIPELINE_BACKEND_BASE_URL"
-test -n "$NEXT_PUBLIC_PIPELINE_BACKEND_BASE_URL"
-echo "NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL=$NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL"
-test -n "$NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL"
-echo "NEXT_PUBLIC_MODEL_BACKEND_BASE_URL=$NEXT_PUBLIC_MODEL_BACKEND_BASE_URL"
-test -n "$NEXT_PUBLIC_MODEL_BACKEND_BASE_URL"
-echo "NEXT_PUBLIC_CONSOLE_BASE_URL=$NEXT_PUBLIC_CONSOLE_BASE_URL"
-test -n "$NEXT_PUBLIC_CONSOLE_BASE_URL"
-echo "NEXT_PUBLIC_API_GATEWAY_BASE_URL=$NEXT_PUBLIC_API_GATEWAY_BASE_URL"
-test -n "$NEXT_PUBLIC_API_GATEWAY_BASE_URL"
-echo "NEXT_PUBLIC_API_VERSION=$NEXT_PUBLIC_API_VERSION"
-test -n "$NEXT_PUBLIC_API_VERSION"
-echo "NEXT_PUBLIC_CONSOLE_EDITION=$NEXT_PUBLIC_CONSOLE_EDITION"
-test -n "$NEXT_PUBLIC_CONSOLE_EDITION"
-echo "NEXT_SERVER_API_GATEWAY_BASE_URL=$NEXT_SERVER_API_GATEWAY_BASE_URL"
-test -n "$NEXT_SERVER_API_GATEWAY_BASE_URL"
-echo "NEXT_PUBLIC_LIST_PAGE_SIZE=$NEXT_PUBLIC_LIST_PAGE_SIZE"
-test -n "$NEXT_PUBLIC_LIST_PAGE_SIZE"
-
-NEXT_PUBLIC_DISABLE_USAGE_COLLECTION=$NEXT_PUBLIC_DISABLE_USAGE_COLLECTION NEXT_PUBLIC_MGMT_BACKEND_BASE_URL=$NEXT_PUBLIC_MGMT_BACKEND_BASE_URL NEXT_PUBLIC_PIPELINE_BACKEND_BASE_URL=$NEXT_PUBLIC_PIPELINE_BACKEND_BASE_URL NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL=$NEXT_PUBLIC_CONNECTOR_BACKEND_BASE_URL NEXT_PUBLIC_MODEL_BACKEND_BASE_URL=$NEXT_PUBLIC_MODEL_BACKEND_BASE_URL NEXT_PUBLIC_API_VERSION=$NEXT_PUBLIC_API_VERSION NEXT_PUBLIC_CONSOLE_BASE_URL=$NEXT_PUBLIC_CONSOLE_BASE_URL NEXT_PUBLIC_CONSOLE_EDITION=$NEXT_PUBLIC_CONSOLE_EDITION NEXT_PUBLIC_API_GATEWAY_BASE_URL=$NEXT_PUBLIC_API_GATEWAY_BASE_URL NEXT_SERVER_API_GATEWAY_BASE_URL=$NEXT_SERVER_API_GATEWAY_BASE_URL NEXT_PUBLIC_DISABLE_CREATE_UPDATE_DELETE_RESOURCE=$NEXT_PUBLIC_DISABLE_CREATE_UPDATE_DELETE_RESOURCE NEXT_PUBLIC_LIST_PAGE_SIZE=$NEXT_PUBLIC_LIST_PAGE_SIZE ./env.sh
-
+node next-env.mjs
 node server.js