feat: better process for getting started with Strapi

.envrc.json

@@ -133,7 +133,7 @@
       "description": "URL where the preview of pages in the Strapi Dashboard are hosted. You can use the Docker container name as the URL, for example: http://pdc_frontend:3000.",
       "required": true,
       "valueType": "url",
-      "developmentDefault": "http://pdc_frontend:3000"
+      "developmentDefault": "http://localhost:3000"
     },
     {
       "name": "HOST",
@@ -149,7 +149,7 @@
       "required": true,
       "valueType": "string",
       "examples": ["development", "production"],
-      "developmentDefault": "production"
+      "developmentDefault": "development"
     },
     {
       "name": "PGADMIN_DEFAULT_EMAIL",
@@ -188,16 +188,16 @@
       "name": "STRAPI_PRIVATE_URL",
       "description": "URL where Strapi is available on the internal network, for example to access the GraphQL API. You can use the Docker container name, e.g. http://pdc_strapi:1337.",
       "required": true,
-      "example": "http://pdc_strapi:1337",
-      "developmentDefault": "http://pdc_strapi:1337"
+      "example": "http://localhost:1337",
+      "developmentDefault": "http://localhost:1337"
     },
     {
       "name": "STRAPI_PUBLIC_URL",
       "description": "URL where Strapi is available to the public. You can use the Docker container name, e.g. http://pdc_strapi:1337.",
       "required": true,
       "valueType": "url",
-      "example": "http://pdc_strapi:1337",
-      "developmentDefault": "http://pdc_strapi:1337"
+      "example": "http://localhost:1337",
+      "developmentDefault": "http://localhost:1337"
     },
     {
       "name": "TRANSFER_TOKEN_SALT",
@@ -317,7 +317,7 @@
       "name": "STRAPI_ENV_LABEL",
       "description": "Text describing the environment, used to warn users of Strapi Dashboard when they are not working in production. Can not be localized.",
       "required": false,
-      "developmentDefault": "Development",
+      "developmentDefault": "development",
       "valueType": "string"
     },
     {
@@ -341,7 +341,7 @@
       "description": "URL for the Flo Legal API, used to access legal documents and templates.",
       "required": false,
       "valueType": "url",
-      "example": "https://example.com/api"
+      "example": "https://services-acc.flolegal.app/builder-api"
     },
     {
       "name": "KCM_SURVEY_API_KEY",

README.md

@@ -54,16 +54,16 @@ To run the application as a Docker container on your Mac, follow these steps:
    If there are no existing environment variables, run:
 
    ```bash
-   pnpm init:env
+   pnpm run env
    ```
 
    This command generates a .env file containing the necessary environment variables.
    The generated values are suitable for the PDC project in Docker production environment.
    - Running PDC in development mode
-     Update the generated .env file or create a .pdc.dev.env file with the same variables, modified for development.
-     For development, you need to adjust certain variables (for example, set NODE_ENV=development) to ensure the environment behaves correctly.
+     Update the generated .env file or create a `.pdc.dev.env` file with the same variables, modified for development.
+     For development, you need to adjust certain variables (for example, set `NODE_ENV=development`) to ensure the environment behaves correctly.
    - Running the VTH project
-     Run the same pnpm init:env command, then create a .vth.dev.env file with the same variables, modified for VTH development.
+     Run the same `pnpm run env` command, then create a `.vth.dev.env` file with the same variables, modified for VTH development.
 
      Environment variable definitions are based on the .envrc.json file in the project root.
      You can find detailed documentation for each variable in the [Environment Variables](./ENVIRONMENT_VARIABLES.md) file.
@@ -102,38 +102,26 @@ To run the application as a Docker container on your Mac, follow these steps:
 
 ## Start the server without Docker
 
-Before starting the server without Docker, create a `.env` file for both the frontend and the Strapi dashboard app.
+Before starting the server without Docker, create a `.env` file for both the frontend and the Strapi dashboard app: `pnpm run env`.
 
-**Frontend env:**
+Then run:
 
 ```shell
-FRONTEND_PUBLIC_URL=http://localhost:3000
-# these three environments variables below are required to be able to test the openFormsEmbed into the frontend. So you have to start the OpenForms server on your local machine
-PANDOSEARCH_API_URL= # You can use the following API URL to test the functionality of the SearchBar component: https://public.pandosearch.com/developer.pandosearch.com/. Valid keys that can be used in the searchBar field include: search, server, highlighting, and help.
-PREVIEW_SECRET_TOKEN= # the value should matched the same environment variable on the Strapi dashboard
-STRAPI_PRIVATE_URL=http://0.0.0.0:1337/
-STRAPI_PUBLIC_URL=http://0.0.0.0:1337/
-
+pnpm run development
 ```
 
-**Strapi Dashboard env:**
+Choose: `dev`, `both`, `pdc` to start the development frontend + backend for PDC.
 
-```shell
-NODE_ENV=development
-ADMIN_JWT_SECRET=
-API_TOKEN_SALT=
-APP_KEYS=
-FRONTEND_PUBLIC_URL=http://localhost:3000
-HOST=0.0.0.0
-JWT_SECRET=
-OPEN_FORMS_API_TOKEN=
-OPEN_FORMS_API_URL=http://localhost:8000/api/v2/
-PORT=1337
-# the value should matched the same environment variable on the Frontend
-PREVIEW_SECRET_TOKEN=
-STRAPI_PRIVATE_URL=http://0.0.0.0:1337
-STRAPI_PUBLIC_URL=http://0.0.0.0:1337
-```
+Visit the following URLs:
+
+- <http://localhost:3000/> for the website
+- <http://localhost:1337/admin/> for the Strapi admin interface
+
+When starting Strapi for the first time:
+
+1. Go to <http://localhost:1337/admin/> and create an account.
+2. Go to <http://localhost:1337/admin/> and login.
+3. Go to <http://localhost:1337/admin/settings/config-sync> and click "Import".
 
 ### Two Options to Run the Server
 

apps/pdc-dashboard/package.json

@@ -11,6 +11,7 @@
     "prebuild": "npm run clean",
     "build": "strapi build",
     "strapi": "strapi",
+    "env": "node src/env-init.mjs",
     "lint": "eslint --report-unused-disable-directives .",
     "lint:fix": "eslint --fix .",
     "lint-build": "tsc --noEmit --project tsconfig.json",

apps/pdc-dashboard/src/env-init.mjs

@@ -0,0 +1,32 @@
+import { config } from 'dotenv';
+
+import envrc from '../../../.envrc.json' with { type: 'json' };
+import { initEnv, subsetConfig } from '../../../scripts/env-lib.mjs';
+
+const variables = [
+  'ADMIN_JWT_SECRET',
+  'API_TOKEN_SALT',
+  'APP_KEYS',
+  'FLO_LEGAL_API_TOKEN',
+  'FLO_LEGAL_API_URL',
+  'FRONTEND_PUBLIC_URL',
+  'HOST',
+  'JWT_SECRET',
+  'NODE_ENV',
+  'OPEN_FORMS_API_TOKEN',
+  'OPEN_FORMS_API_URL',
+  'PGADMIN_DEFAULT_EMAIL',
+  'PGADMIN_DEFAULT_PASSWORD',
+  'PORT',
+  'PREVIEW_SECRET_TOKEN',
+  'STRAPI_ENV_LABEL',
+  'STRAPI_PRIVATE_URL',
+  'STRAPI_PUBLIC_URL',
+  'TRANSFER_TOKEN_SALT',
+];
+
+const init = () => {
+  initEnv('./.env', subsetConfig(envrc, variables), config().parsed);
+};
+
+init();

apps/pdc-dashboard/tsconfig.json

@@ -6,5 +6,15 @@
     "allowJs": true
   },
   "include": ["./", "src/**/*.json"],
-  "exclude": ["node_modules/", "build/", "dist/", ".cache/", ".tmp/", "src/admin/", "**/*.test.ts", "src/plugins/**"]
+  "exclude": [
+    "node_modules/",
+    "build/",
+    "dist/",
+    ".cache/",
+    ".tmp/",
+    "src/admin/",
+    "**/*.test.ts",
+    "src/plugins/**",
+    "src/env-init.mjs"
+  ]
 }

apps/pdc-frontend/package.json

@@ -18,6 +18,7 @@
     "clean": "rimraf build .next",
     "build": "next build",
     "start": "next start -p 3000",
+    "env": "node src/env-init.mjs",
     "install-test-browsers": "playwright install",
     "lint": "eslint --report-unused-disable-directives .",
     "lint:fix": "eslint --fix .",

apps/pdc-frontend/src/env-init.mjs

@@ -0,0 +1,33 @@
+import { config } from 'dotenv';
+
+import envrc from '../../../.envrc.json' with { type: 'json' };
+import { initEnv, subsetConfig } from '../../../scripts/env-lib.mjs';
+
+const variables = [
+  'FLO_LEGAL_API_TOKEN',
+  'FLO_LEGAL_API_URL',
+  'FRONTEND_PUBLIC_URL',
+  'KCM_SURVEY_API_KEY',
+  'KCM_SURVEY_ID',
+  'KCM_SURVEY_STYLESHEETS_LINK',
+  'KCM_SURVEY_URL',
+  'KCM_SURVEY_VERSION',
+  'MATOMO_CONTAINER_ID',
+  'MATOMO_HOST',
+  'MATOMO_SITE_ID',
+  'OGONE_PAYMENT_SERVICE_URL',
+  'OPEN_FORMS_API_TOKEN',
+  'OPEN_FORMS_API_URL',
+  'OPEN_FORMS_CSS_URL',
+  'OPEN_FORMS_SDK_URL',
+  'PANDOSEARCH_API_URL',
+  'PREVIEW_SECRET_TOKEN',
+  'STRAPI_PRIVATE_URL',
+  'STRAPI_PUBLIC_URL',
+];
+
+const init = () => {
+  initEnv('./.env', subsetConfig(envrc, variables), config().parsed);
+};
+
+init();

apps/pdc-frontend/src/middleware.ts

@@ -1,12 +1,13 @@
 import acceptLanguage from 'accept-language';
 import { NextRequest, NextResponse } from 'next/server';
 
+import { GetProductsOldSlugsQuery } from '../gql/graphql';
+
 import { fallbackLng, languages } from './app/i18n/settings';
 import { GET_PRODUCTS_OLD_SLUGS } from './query';
 import { fetchData, getRedirectURL, getStrapiGraphqlURL, type ProductRedirect } from './util';
 
 import { getContentSecurityPolicy } from '@/util/cspConfig';
-import { GetProductsOldSlugsQuery } from '../gql/graphql';
 
 acceptLanguage.languages(languages);
 

apps/strapi.frameless.io/docs/developers/readme.md

@@ -54,7 +54,7 @@ To run the application as a Docker container on your Mac, follow these steps:
    If there are no existing environment variables, run:
 
    ```bash
-   pnpm init:env
+   pnpm env
    ```
 
    This command generates a .env file containing the necessary environment variables.
@@ -63,7 +63,7 @@ To run the application as a Docker container on your Mac, follow these steps:
      Update the generated .env file or create a .pdc.dev.env file with the same variables, modified for development.
      For development, you need to adjust certain variables (for example, set NODE_ENV=development) to ensure the environment behaves correctly.
    - Running the VTH project
-     Run the same pnpm init:env command, then create a .vth.dev.env file with the same variables, modified for VTH development.
+     Run the same pnpm env command, then create a .vth.dev.env file with the same variables, modified for VTH development.
 
      Environment variable definitions are based on the .envrc.json file in the project root.
      You can find detailed documentation for each variable in the [Environment Variables](./ENVIRONMENT_VARIABLES.md) file.

package.json

@@ -37,7 +37,7 @@
     "turbo-test": "turbo test",
     "clean": "pnpm run --if-present --recursive clean",
     "clean-node_modules": "pnpm -r exec rimraf node_modules && rimraf node_modules",
-    "init:env": "node scripts/env-init.mjs",
+    "env": "pnpm run --recursive env",
     "lint": "npm-run-all --parallel lint:js lint:css lint:prettier lint:md",
     "lint:js": "eslint --report-unused-disable-directives .",
     "lint:css": "stylelint '**/*.{css,scss}'",
@@ -68,6 +68,7 @@
     "@changesets/cli": "2.30.0",
     "@commitlint/cli": "20.4.3",
     "@commitlint/config-conventional": "20.4.3",
+    "@frameless/eslint-config": "1.1.2",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
     "@types/node": "20.1.7",