chore: alter project build tools to use NX and Vite for front-end. (#65)

* chore: add nx to repository * ci: alter job to use nx script * chore: migrate from CRA to Vite * chore: fix docker image to use dist folder instead of build
jpedroh · Sep 6, 2022 · 52a162b · 52a162b
1 parent 392f248
commit 52a162b
Show file tree

Hide file tree

Showing 15 changed files with 1,282 additions and 22,196 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -1,16 +1,14 @@
 name: CI
-on: push
+on:
+  - push
+  - pull_request
 jobs:
   test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - run: yarn --frozen-lockfile
-      - name: Build application packages
-        run: |
-          yarn workspace @mach/common run build
-          yarn workspace @mach/database run build
-          yarn workspace @mach/rpl-crawler run build
+      - run: yarn nx run-many --target=build
       - run: yarn test
   build_rest_api:
     runs-on: ubuntu-latest

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -77,7 +77,7 @@ jobs:
           yarn workspace @mach/front build
         env:
           SKIP_PREFLIGHT_CHECK: true
-          REACT_APP_APP_VERSION: ${{ github.event.release.tag_name }}
+          VITE_APP_VERSION: ${{ github.event.release.tag_name }}
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@releases/v3
         with:

diff --git a/nx.json b/nx.json
@@ -0,0 +1,25 @@
+{
+  "extends": "nx/presets/npm.json",
+  "tasksRunnerOptions": {
+    "default": {
+      "runner": "nx/tasks-runners/default",
+      "options": {
+        "cacheableOperations": [
+          "build",
+          "test",
+          "eject"
+        ]
+      }
+    }
+  },
+  "targetDefaults": {
+    "build": {
+      "dependsOn": [
+        "^build"
+      ]
+    }
+  },
+  "affected": {
+    "defaultBase": "master"
+  }
+}
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
     "jest": "^26.2.2",
     "semantic-release": "^17.4.3",
     "ts-jest": "^26.1.4",
-    "typescript": "^4.2.4"
+    "typescript": "^4.2.4",
+    "nx": "14.6.4"
   },
   "scripts": {
     "test": "yarn jest",

diff --git a/packages/front/Dockerfile b/packages/front/Dockerfile
@@ -1,7 +1,7 @@
 FROM node:lts AS build
 
 ARG APP_VERSION_ARG=v0.0.0
-ENV REACT_APP_APP_VERSION=$APP_VERSION_ARG
+ENV VITE_APP_VERSION=$APP_VERSION_ARG
 ENV SKIP_PREFLIGHT_CHECK=true
 ENV PUBLIC_URL=/
 
@@ -23,5 +23,5 @@ RUN yarn workspace @mach/common build
 RUN yarn workspace @mach/front build
 
 FROM nginx:1.15-alpine
-COPY --from=build /usr/src/app/packages/front/build /usr/share/nginx/html
+COPY --from=build /usr/src/app/packages/front/dist /usr/share/nginx/html
 COPY packages/front/nginx/nginx.conf /etc/nginx/conf.d/default.conf
diff --git a/packages/front/public/index.html → packages/front/index.html b/packages/front/public/index.html → packages/front/index.html
@@ -1,33 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="An open source tool for flight simulation"
-    />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="An open source tool for flight simulation" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
+  <link rel="manifest" href="/manifest.json" />
+  <!--
+      Notice the use of  in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Mach</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>Mach</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -37,5 +36,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+  <script type="module" src="src/index.tsx"></script>
+</body>
+
+</html>