Merge pull request #170 from aws-samples/migrate-to-next

Add NextJS and Typescript to the frontend

Author: mendaomn

.gitignore

@@ -1,5 +1,8 @@
 __pycache__
 frontend/node_modules
+frontend/.next
+frontend/.swc
+frontend/build
 infrastructure/cognitolambda/node_modules
 .DS_Store
 .hugo_build.lock

README.md

@@ -111,7 +111,7 @@ Start the React frontend by running:
 ```bash
 cd frontend/
 npm install # if this is your first time starting the frontend
-npm start
+npm run dev
 ```
 
 Then navigate to [http://localhost:3000](http://localhost:3000)

frontend/.babelrc.json

@@ -0,0 +1,10 @@
+// This file is only here to disable SWC, which is currently broken
+// and causes AppLayout to go into an infinite loop, firing a
+// RangeError: Maximum call stack size exceeded
+// 
+// Next allegedly already fixed this problem with this PR:
+// https://github.com/vercel/next.js/pull/37607
+// therefore we can probably remove this file in the future
+{
+    "presets": ["next/babel"]
+}

frontend/.dockerignore

@@ -1 +1,4 @@
 node_modules
+.next
+.swc
+build

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

frontend/.nvmrc

@@ -0,0 +1 @@
+16

frontend/Dockerfile

@@ -1,12 +1,17 @@
-# build environment
-FROM node:13.12.0-alpine as build
+# Install dependencies
+FROM node:16-alpine as deps
 WORKDIR /app
-ENV PATH /app/node_modules/.bin:$PATH
-ARG PUBLIC_URL=
 COPY package.json ./
 COPY package-lock.json ./
 RUN npm ci
-RUN npm install react-scripts@3.4.1 -g
-COPY . ./
-RUN npm install
-RUN npm run build
+
+# Build source code
+FROM node:16-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+# Disable telemetry
+#   Next.js collects completely anonymous telemetry data about general usage.
+#   Learn more here: https://nextjs.org/telemetry
+ENV NEXT_TELEMETRY_DISABLED 1
+RUN npm run export

frontend/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

frontend/next.config.js

@@ -0,0 +1,43 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance
+// with the License. A copy of the License is located at
+//
+// http://aws.amazon.com/apache2.0/
+//
+// or in the "LICENSE.txt" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES
+// OR CONDITIONS OF ANY KIND, express or implied. See the License for the specific language governing permissions and
+// limitations under the License.
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  async rewrites() {
+    return [
+      /**
+      * Rewrite everything to `pages/index`
+      * 
+      * This is only here because as of yet we are not
+      * relying on NextJS routing and react-router-dom
+      * does not play well with SSR.
+      * 
+      * While doing the transition to NextJS routing,
+      * we need a way to support both ways of functioning.
+      * 
+      * Please note, this is only useful in the context of
+      * local development (`npm run dev`), as this app is
+      * currently being built as a static export
+      * and no rewrite is going to be actually run in production
+      */
+      {
+        source: "/:any*",
+        destination: "/",
+      },
+    ];
+  },
+}
+
+const withTM = require("next-transpile-modules")([
+  "@awsui/components-react",
+]);
+
+module.exports = withTM(nextConfig);