Containerized build (#419)

* Enable containerized build.

* Remove obsolete pre-render package

* Fix React rendering violations.

* Update readme

* Adjust package-lock

* Add eslint plugin

* Add prettier task and run it

---------

Co-authored-by: Martin Marosi <[email protected]>

Author: karelhala

.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "prettier"],
+  "plugins": ["prettier", "@typescript-eslint"],
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true,
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "16.6"
+    }
+  },
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "typescript-eslint/no-non-null-asserted-optional-chain": "off"
+  }
+}

.gitignore

@@ -36,3 +36,8 @@ public/canonical.json
 
 # rollup
 .rollup.cache
+# next
+.next
+next-env.d.ts
+out
+

Dockerfile

@@ -4,18 +4,19 @@ USER root
 
 WORKDIR /usr/share/builder
 
-COPY package.json package-lock.json tsconfig.json config-overrides.js ./
+COPY package.json package-lock.json tsconfig.json next.config.ts .eslintrc.json prettier.config.js proxy.mjs ./
 COPY src ./src
 COPY public ./public
-COPY packages/common ./packages/common
+COPY packages ./packages
 
 RUN npm i
+RUN npm run build
 
 FROM registry.access.redhat.com/ubi9/nginx-124
 
 WORKDIR /usr/share/nginx
 
-COPY --from=builder /usr/share/builder/ /usr/share/nginx/html
+COPY --from=builder /usr/share/builder/out /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/nginx.conf
 
 EXPOSE 8080

README.md

@@ -6,14 +6,12 @@ https://developers.redhat.com/api-catalog/
 
 ## Project structure
 
-The main package is found on [src](./src) and contains the React application for the site itself.
+The main package is found on [src](./src) and contains the Next.js application.
 
 Other packages includes:
 - [Common code](./packages/common) shared across other packages. Contains the information about the included APIs.
 - [Discovery](./packages/discovery) contains a file descriptor and its supporting schemas to describe the contents
   found in API catalog. It includes the list of the APIs, what group they form part of and their metadata.
-- [Prerender](./packages/prerender) is a cli tool to pre-render all the API catalog to increase SEO and make it easier to
-  be read by bots.
 - [Sitemap](./packages/sitemap) is a cli tool to create the sitemap.xml of API catalog. The sitemap package is also responsible for generating the [canonical format json file](./public/canonical.json) used by the Search Platform for indexing.
 - [transform](./packages/transform) is a cli tool to process the [discovery file](./packages/discovery/Discovery.yml)
   and create typescript code that can be loaded by API Catalog, the resulting code is stored in the
@@ -78,7 +76,7 @@ Use `npm install` to install all the project dependencies.
 
 ### Running the frontend
 
-Use `npm run start` to start the frontend application.
+Use `npm run dev` to start the frontend application.
 
 ### Running the discovery process
 
@@ -92,12 +90,6 @@ npm run discovery:build && npm run discovery:start -- --skip-api-fetch
 
 The sitemap can be re-generated by running: `SITEMAP_BASE_URL=https://my-base-url npm run sitemap`.
 
-### Pre-rendering the site
-
-To be more bot-friendly we pre-render the whole site to allow it to be crawled.
-You can run trigger a local run by building the site `npm run build` and then running `npm run prerender`. The results of the pre-rendering are written in
-[build/pre-rendered](./build/pre-rendered)
-
 ## Adding external content
 
 Details from each API is extracted from its openapi file to show in the API catalog. Sometimes this is not enough.
@@ -125,7 +117,7 @@ This is a list of the support sections, followed by the required file name.
 
 - Getting started: `getting-started.md`
 
-## Releasing to Production
+## Releasing to Production (Deprecated)
 
 We use GitLab tags for deployment to Production. Follow these steps:
 
@@ -150,6 +142,10 @@ We use GitLab tags for deployment to Production. Follow these steps:
 
 4. **Watch the pipeline:** Monitor the pipeline in GitLab's CI/CD > Pipelines section. If successful, your code is deployed to production.
 
+## Releasing to production (new)
+
+TBD
+
 ## SPAship configuration
 
 We require some components that are shared across developers.redhat.com (header and footer). These components needs to be copied (and synchronized from time to time).

next.config.ts

@@ -0,0 +1,39 @@
+import type { NextConfig } from 'next';
+import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  output: 'export',
+  images: {
+    unoptimized: true,
+  },
+  ...(process.env.DEV === 'true'
+    ? {
+        async rewrites() {
+          // proxy to get the assets from developers.redhat.com
+          return [
+            {
+              source: '/modules/:path*',
+              destination: 'http://localhost:3001/modules/:path*',
+            },
+          ];
+        },
+        basePath: '',
+      }
+    : {
+        basePath: '/api-catalog',
+      }),
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.plugins.push(
+        new MonacoWebpackPlugin({
+          languages: ['go', 'python', 'java', 'javascript', 'shell', 'cpp', 'ruby', 'json'],
+          filename: 'static/[name].worker.js',
+        }),
+      );
+    }
+    return config;
+  },
+};
+
+export default nextConfig;