chore: add build tools for website

apps/website/.env.development

@@ -1,4 +0,0 @@
-STRAPI_URL_API=http://127.0.0.1:1337/api
-STRAPI_URL=http://127.0.0.1:1337/
-NEXTAUTH_SECRET=<SECRET>
-NEXTAUTH_URL=http://localhost:4200

apps/website/.env.production

@@ -1,4 +0,0 @@
-STRAPI_URL_API=http://127.0.0.1:1337/api
-STRAPI_URL=http://127.0.0.1:1337/
-NEXTAUTH_SECRET=<SECRET>
-NEXTAUTH_URL=http://localhost:4200

apps/website/.env.staging

@@ -1,4 +0,0 @@
-STRAPI_URL_API=http://127.0.0.1:1337/api
-STRAPI_URL=http://127.0.0.1:1337/
-NEXTAUTH_SECRET=<SECRET>
-NEXTAUTH_URL=http://localhost:4200

apps/website/config.ts

@@ -1,5 +1,10 @@
-export default {
-  env: process.env.NODE_ENV,
+export const config = {
+  env: {
+    STRAPI_URL_API: process.env.NX_STRAPI_URL_API,
+    STRAPI_URL: process.env.NX_STRAPI_URL,
+    NEXTAUTH_SECRET: process.env.NX_NEXTAUTH_SECRET,
+    NEXTAUTH_URL: process.env.NX_NEXTAUTH_URL,
+  },
   mainApiEndpoint: 'https://conduit.productionready.io/api'
 }
 

apps/website/environments/environment.development.ts

@@ -0,0 +1,5 @@
+export const environment = {
+  strapiUrl: 'http://127.0.0.1:1337/',
+  strapiApiUrl: 'http://127.0.0.1:1337/api',
+  nextAuthSecret: "yBNW1wrb9CgOvEfbX6EQCvCDqiMkRBZP"
+}

apps/website/environments/environment.prod.ts

@@ -0,0 +1,5 @@
+export const environment = {
+  strapiUrl: 'http://admin.mecp.nasercloud.fr/',
+  strapiApiUrl: 'http://admin.mecp.nasercloud.fr/api',
+  nextAuthSecret: "yBNW1wrb9CgOvEfbX6EQCvCDqiMkRBZP"
+}

apps/website/environments/environment.staging.ts

@@ -0,0 +1,5 @@
+export const environment = {
+  strapiUrl: 'http://admin.mecp.nasercloud.fr/',
+  strapiApiUrl: 'http://admin.mecp.nasercloud.fr/api',
+  nextAuthSecret: "yBNW1wrb9CgOvEfbX6EQCvCDqiMkRBZP"
+}

apps/website/environments/environment.ts

@@ -0,0 +1,5 @@
+export const environment = {
+  strapiUrl: 'http://127.0.0.1:1337/',
+  strapiApiUrl: 'http://127.0.0.1:1337/api',
+  nextAuthSecret: "yBNW1wrb9CgOvEfbX6EQCvCDqiMkRBZP"
+}

apps/website/libs/api.ts

@@ -1,6 +1,8 @@
 import axios from "axios";
 import * as _ from 'lodash';
 
+import {environment} from "../environments/environment";
+
 export type Inputs = {
   email: string,
   username: string,
@@ -15,12 +17,12 @@ export const hasAvatar = (user) => {
 }
 
 export const getBackendImg = (imageUrl: string) => {
-  return `${process.env.STRAPI_URL}${imageUrl}`;
+  return `${environment.strapiUrl}${imageUrl}`;
 }
 
 export const signUpRequest = async (inputs: Inputs) => {
   try {
-    const registerResponse = await axios.post(`${process.env.STRAPI_URL_API}/auth/local/register`, {
+    const registerResponse = await axios.post(`${environment.strapiApiUrl}/auth/local/register`, {
       email: inputs.email,
       password: inputs.password,
       username: inputs.username,

apps/website/libs/auth.ts

@@ -1,7 +1,6 @@
 import axios from 'axios';
 import {signIn} from "next-auth/react";
-
-const strapiUrl = process.env.STRAPI_URL_API;
+import {config} from "../config";
 
 export async function createJwtToken(email, password) {
   return await signIn('credentials', {
@@ -12,12 +11,12 @@ export async function createJwtToken(email, password) {
 }
 
 export async function signInStrapi({email, password}) {
-  const res = await axios.post(`${strapiUrl}/auth/local`, {
+  const res = await axios.post(`${(config.env as any).STRAPI_URL_API}/auth/local`, {
     identifier: email,
     password,
   });
   if (res && res.data) {
-    const user = await axios.get(`${strapiUrl}/users/${res.data.user.id}?populate=deep`);
+    const user = await axios.get(`${(config.env as any).STRAPI_URL_API}/users/${res.data.user.id}?populate=deep`);
     if (user && user.data) {
       res.data.user = {...res.data.user, ...user.data};
     }

apps/website/next.config.js

@@ -1,16 +1,19 @@
 //@ts-check
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const { withNx } = require('./with-nx.js');
+const {withNx} = require('./with-nx.js');
 
 /**
  * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
+  reactStrictMode: true,
+  poweredByHeader: false,
+  output: 'standalone',
   nx: {
     // Set this to true if you would like to to use SVGR
     // See: https://github.com/gregberge/svgr
-    svgr: false,
+    svgr: false
   },
 };
 

apps/website/pages/_document.tsx

@@ -0,0 +1,13 @@
+import {Head, Html, Main, NextScript} from 'next/document';
+
+export default function Document() {
+  return (
+    <Html lang='en'>
+      <Head/>
+      <body>
+      <Main/>
+      <NextScript/>
+      </body>
+    </Html>
+  )
+};

apps/website/pages/api/auth/[...nextauth].ts

@@ -4,8 +4,10 @@ import {JWT} from "next-auth/jwt";
 import {AdapterUser} from "next-auth/adapters";
 
 import {signInStrapi} from '../../../libs/auth';
+import {environment} from "../../../environments/environment";
 
 export default NextAuth({
+
   // Configure one or more authentication providers
   providers: [
     CredentialsProvider({
@@ -59,4 +61,5 @@ export default NextAuth({
       return Promise.resolve(token);
     },
   },
+  secret: environment.nextAuthSecret
 });

apps/website/pages/home/index.tsx

@@ -3,10 +3,12 @@ import delve from "dlv";
 
 import SeoConfig from "../../components/seo-config/seo-config";
 import Layout from "../../components/layout/layout";
+import {config} from "../../config";
+import {environment} from "../../environments/environment";
 
 const getPageMetadata = async (path) => {
   try {
-    return await axios.get(`${process.env.STRAPI_URL_API}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
+    return await axios.get(`${environment.strapiApiUrl}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
   } catch (e) {
     console.error(e);
     return Promise.resolve({})
@@ -15,8 +17,8 @@ const getPageMetadata = async (path) => {
 
 export const getServerSideProps = async (context) => {
   const path = context.resolvedUrl;
-  const menuHeader = await axios.get(`${process.env.STRAPI_URL_API}/menus/1?nested&populate=deep`);
-  const menuFooter = await axios.get(`${process.env.STRAPI_URL_API}/menus/2?nested&populate=deep`);
+  const menuHeader = await axios.get(`${environment.strapiApiUrl}/menus/1?nested&populate=deep`);
+  const menuFooter = await axios.get(`${environment.strapiApiUrl}/menus/2?nested&populate=deep`);
   const page = await getPageMetadata(path);
   return {
     props: {

apps/website/pages/index.module.scss

@@ -1,2 +1,6 @@
+@import 'tailwindcss/base.css';
+@import 'tailwindcss/components.css';
+@import 'tailwindcss/utilities.css';
+
 .page {
 }

apps/website/pages/index.tsx

@@ -4,10 +4,13 @@ import delve from "dlv";
 import SeoConfig from "../components/seo-config/seo-config";
 
 import Layout from "../components/layout/layout";
+import {config} from "../config";
+import {environment} from "../environments/environment";
 
 const getPageMetadata = async (path) => {
   try {
-    return await axios.get(`${process.env.STRAPI_URL_API}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
+    console.log((config.env as any));
+    return await axios.get(`${environment.strapiApiUrl}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
   } catch (e) {
     console.error(e);
     return Promise.resolve({})
@@ -16,8 +19,9 @@ const getPageMetadata = async (path) => {
 
 export const getServerSideProps = async (context) => {
   const path = context.resolvedUrl;
-  const menuHeader = await axios.get(`${process.env.STRAPI_URL_API}/menus/1?nested&populate=deep`);
-  const menuFooter = await axios.get(`${process.env.STRAPI_URL_API}/menus/2?nested&populate=deep`);
+  console.log((config.env as any));
+  const menuHeader = await axios.get(`${environment.strapiApiUrl}/menus/1?nested&populate=deep`);
+  const menuFooter = await axios.get(`${environment.strapiApiUrl}/menus/2?nested&populate=deep`);
   const page = await getPageMetadata(path);
   return {
     props: {

apps/website/pages/lost-password/index.tsx

@@ -3,10 +3,12 @@ import delve from "dlv";
 import SeoConfig from "../../components/seo-config/seo-config";
 import Layout from "../../components/layout/layout";
 import styles from "../sign-up/index.module.scss";
+import {config} from "../../config";
+import {environment} from "../../environments/environment";
 
 const getPageMetadata = async (path) => {
   try {
-      return await axios.get(`${process.env.STRAPI_URL_API}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
+      return await axios.get(`${environment.strapiApiUrl}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
   } catch (e) {
     console.error(e);
     return Promise.resolve({})
@@ -15,8 +17,8 @@ const getPageMetadata = async (path) => {
 
 export const getServerSideProps = async (context) => {
   const path = context.resolvedUrl;
-  const menuHeader = await axios.get(`${process.env.STRAPI_URL_API}/menus/1?nested&populate=deep`);
-  const menuFooter = await axios.get(`${process.env.STRAPI_URL_API}/menus/2?nested&populate=deep`);
+  const menuHeader = await axios.get(`${environment.strapiApiUrl}/menus/1?nested&populate=deep`);
+  const menuFooter = await axios.get(`${environment.strapiApiUrl}/menus/2?nested&populate=deep`);
   const page = await getPageMetadata(path);
   return {
     props: {

apps/website/pages/sign-in/index.tsx

@@ -7,10 +7,12 @@ import Layout from "../../components/layout/layout";
 
 import styles from './index.module.scss';
 import {createJwtToken} from "../../libs/auth";
+import {config} from "../../config";
+import {environment} from "../../environments/environment";
 
 const getPageMetadata = async (path) => {
   try {
-    return await axios.get(`${process.env.STRAPI_URL_API}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
+    return await axios.get(`${environment.strapiApiUrl}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
   } catch (e) {
     console.error(e);
     return Promise.resolve({})
@@ -19,7 +21,7 @@ const getPageMetadata = async (path) => {
 
 export const getServerSideProps = async (context) => {
   const path = context.resolvedUrl;
-  const menuFooter = await axios.get(`${process.env.STRAPI_URL_API}/menus/2?nested&populate=deep`);
+  const menuFooter = await axios.get(`${environment.strapiApiUrl}/menus/2?nested&populate=deep`);
   const page = await getPageMetadata(path);
 
   return {

apps/website/pages/sign-up/index.tsx

@@ -3,17 +3,19 @@ import axios from "axios";
 import delve from 'dlv';
 import {useRouter} from "next/router";
 import {SubmitHandler, useForm} from 'react-hook-form';
+import {BehaviorSubject, catchError, debounceTime, distinctUntilChanged, filter, map, of, switchMap} from "rxjs";
+import {useEffect, useState} from "react";
 
 import SeoConfig from "../../components/seo-config/seo-config";
 import Layout from "../../components/layout/layout";
 import {Inputs, signUpRequest} from "../../libs/api";
 import {createJwtToken} from "../../libs/auth";
-import {useEffect, useState} from "react";
-import {BehaviorSubject, catchError, debounceTime, distinctUntilChanged, filter, map, of, switchMap} from "rxjs";
+import {config} from "../../config";
+import {environment} from "../../environments/environment";
 
 const getPageMetadata = async (path) => {
   try {
-    return await axios.get(`${process.env.STRAPI_URL_API}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
+    return await axios.get(`${environment.strapiApiUrl}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
   } catch (e) {
     console.error(e);
     return Promise.resolve({})
@@ -22,8 +24,8 @@ const getPageMetadata = async (path) => {
 
 export const getServerSideProps = async (context) => {
   const path = context.resolvedUrl;
-  const menuHeader = await axios.get(`${process.env.STRAPI_URL_API}/menus/1?nested&populate=deep`);
-  const menuFooter = await axios.get(`${process.env.STRAPI_URL_API}/menus/2?nested&populate=deep`);
+  const menuHeader = await axios.get(`${environment.strapiApiUrl}/menus/1?nested&populate=deep`);
+  const menuFooter = await axios.get(`${environment.strapiApiUrl}/menus/2?nested&populate=deep`);
   const page = await getPageMetadata(path);
 
   return {

apps/website/pages/signup-confirmation/index.tsx

@@ -3,10 +3,12 @@ import delve from 'dlv';
 
 import SeoConfig from "../../components/seo-config/seo-config";
 import Layout from "../../components/layout/layout";
+import {config} from "../../config";
+import {environment} from "../../environments/environment";
 
 const getPageMetadata = async (path) => {
   try {
-    return await axios.get(`${process.env.STRAPI_URL_API}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
+    return await axios.get(`${environment.strapiApiUrl}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
   } catch (e) {
     console.error(e);
     return Promise.resolve({})
@@ -15,8 +17,8 @@ const getPageMetadata = async (path) => {
 
 export const getServerSideProps = async (context) => {
   const path = context.resolvedUrl;
-  const menuHeader = await axios.get(`${process.env.STRAPI_URL_API}/menus/1?nested&populate=deep`);
-  const menuFooter = await axios.get(`${process.env.STRAPI_URL_API}/menus/2?nested&populate=deep`);
+  const menuHeader = await axios.get(`${environment.strapiApiUrl}/menus/1?nested&populate=deep`);
+  const menuFooter = await axios.get(`${environment.strapiApiUrl}/menus/2?nested&populate=deep`);
   const page = await getPageMetadata(path);
   return {
     props: {

apps/website/pages/styles.css

@@ -1,7 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
+@import 'tailwindcss/base.css';
+@import 'tailwindcss/components.css';
+@import 'tailwindcss/utilities.css';
 
 html, body {
   position: relative;

apps/website/postcss.config.js

@@ -0,0 +1,17 @@
+const {join} = require('path');
+
+// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
+// option from your application's configuration (i.e. project.json).
+//
+// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
+
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+};

apps/website/project.json

@@ -6,18 +6,40 @@
   "targets": {
     "build": {
       "executor": "@nrwl/next:build",
-      "outputs": ["{options.outputPath}"],
-      "defaultConfiguration": "production",
+      "outputs": [
+        "{options.outputPath}"
+      ],
+      "defaultConfiguration": "development",
       "options": {
         "root": "apps/website",
         "outputPath": "dist/apps/website"
       },
       "configurations": {
         "development": {
+          "fileReplacements": [
+            {
+              "replace": "apps/website/environments/environment.ts",
+              "with": "apps/website/environments/environment.development.ts"
+            }
+          ],
           "outputPath": "apps/website"
         },
-        "staging": {},
-        "production": {}
+        "staging": {
+          "fileReplacements": [
+            {
+              "replace": "apps/website/environments/environment.ts",
+              "with": "apps/website/environments/environment.staging.ts"
+            }
+          ]
+        },
+        "production": {
+          "fileReplacements": [
+            {
+              "replace": "apps/website/environments/environment.ts",
+              "with": "apps/website/environments/environment.prod.ts"
+            }
+          ]
+        }
       }
     },
     "serve": {
@@ -50,7 +72,9 @@
     },
     "test": {
       "executor": "@nrwl/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "outputs": [
+        "{workspaceRoot}/coverage/{projectRoot}"
+      ],
       "options": {
         "jestConfig": "apps/website/jest.config.ts",
         "passWithNoTests": true
@@ -58,9 +82,13 @@
     },
     "lint": {
       "executor": "@nrwl/linter:eslint",
-      "outputs": ["{options.outputFile}"],
+      "outputs": [
+        "{options.outputFile}"
+      ],
       "options": {
-        "lintFilePatterns": ["apps/website/**/*.{ts,tsx,js,jsx}"]
+        "lintFilePatterns": [
+          "apps/website/**/*.{ts,tsx,js,jsx}"
+        ]
       }
     }
   },

apps/website/tailwind.config.js

@@ -0,0 +1,18 @@
+const {createGlobPatternsForDependencies} = require('@nrwl/react/tailwind');
+const {join} = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    join(
+      __dirname,
+      '{src,pages,components}/**/*!(*.stories|*.spec).{ts,tsx,html}'
+    ),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  darkMode: 'class'
+};

package.json

@@ -16,9 +16,9 @@
     "build:client:staging": "npm run build client -- --configuration staging",
     "build:client:production": "npm run build client -- --configuration production",
     "start:website": "nx serve website",
-    "build:website:development": "npm run build website -- --configuration development --verbose",
-    "build:website:staging": "npm run build website -- --configuration staging",
-    "build:website:production": "npm run build website -- --configuration production",
+    "build:website:development": "nx build website --configuration development --verbose",
+    "build:website:staging": "nx build website --configuration staging",
+    "build:website:production": "nx build website --configuration production",
     "start": "nx serve",
     "build": "nx build",
     "test": "nx test"

scripts/strapi/build-staging.js

@@ -2,8 +2,8 @@ const fs = require('fs');
 const fse = require('fs-extra');
 const path = require('path');
 
-fse.copySync(path.join(__dirname, '..', '..', 'apps/backend/public'), path.join(__dirname, '..', '..', 'dist/backend/public'));
-fs.copyFileSync(path.join(__dirname, '..', '..', 'apps/backend/.env.staging'), path.join(__dirname, '..', '..', 'dist/backend/.env'));
-fs.copyFileSync(path.join(__dirname, 'sources/server.js'), path.join(__dirname, '..', '..', 'dist/backend/server.js'));
-fs.copyFileSync(path.join(__dirname, 'sources/package.json'), path.join(__dirname, '..', '..', 'dist/backend/package.json'));
-fs.copyFileSync(path.join(__dirname, 'sources/.strapi-updater.json'), path.join(__dirname, '..', '..', 'dist/backend/.strapi-updater.json'));
+fse.copySync(path.join(__dirname, '..', '..', 'apps/backend/public'), path.join(__dirname, '..', '..', 'dist', 'apps', 'backend/public'));
+fs.copyFileSync(path.join(__dirname, '..', '..', 'apps/backend/.env.staging'), path.join(__dirname, '..', '..', 'dist', 'apps', 'backend/.env'));
+fs.copyFileSync(path.join(__dirname, 'sources/server.js'), path.join(__dirname, '..', '..', 'dist', 'apps', 'backend/server.js'));
+fs.copyFileSync(path.join(__dirname, 'sources/package.json'), path.join(__dirname, '..', '..', 'dist', 'apps', 'backend/package.json'));
+fs.copyFileSync(path.join(__dirname, 'sources/.strapi-updater.json'), path.join(__dirname, '..', '..', 'dist', 'apps', 'backend/.strapi-updater.json'));

scripts/website/build-staging.js

@@ -0,0 +1,5 @@
+const fs = require('fs');
+const fse = require('fs-extra');
+const path = require('path');
+
+fs.copyFileSync(path.join(__dirname, 'sources/server.js'), path.join(__dirname, '..', '..', 'dist/apps/website/server.js'));