vite migration (ohcnetwork#5140)

* initial vite migration

* fix npm dev command

* add workaround for react-phone-input-2

* pin node v18

* fix storybook and pwa

* remove node 16 engine from package.json

* prune packages

* Fix PUBLIC_URL env

* storybook: adds required font

* storybook: upgrade to SB v7, run migration scripts

* storybook: remove

* storybook: setup from scratch, add stories

* storybook: use vite builder and update out dir

* storybook: fix build command

* storybook: fix missing include in vite config

* storybook: revert to default out dir

* add missing entry for VITE_PUBLIC_URL

* update readme and cypress workflow

* cypress: fix rescript build command

* remove hardcoded variables from index.html

* change env variables prefix to REACT_ to maintain compatibility

* remove cra service worker files

* fix service worker implementation

---------

Co-authored-by: Ashesh3 <[email protected]>
Co-authored-by: rithviknishad <[email protected]>
Co-authored-by: Rithvik Nishad <[email protected]>

.env

@@ -4,6 +4,8 @@ REACT_APP_TITLE="CARE"
 REACT_APP_META_DESCRIPTION="CoronaSafe Network is an open-source public utility designed by a multi-disciplinary team of innovators and volunteers. CoronaSafe Care is a Digital Public Good recognised by United Nations."
 REACT_APP_COVER_IMAGE=https://cdn.coronasafe.network/care_logo.svg
 REACT_APP_COVER_IMAGE_ALT=https://cdn.coronasafe.network/care_logo.svg
+REACT_APP_CONFIG=""
+REACT_PUBLIC_URL="https://care.coronasafe.in"
 REACT_APP_SITE_URL=care.coronasafe.in
 REACT_APP_ANALYTICS_SERVER_URL=https://plausible.10bedicu.in
 

.github/workflows/cypress.yaml

@@ -41,14 +41,14 @@ jobs:
         run: npm install --legacy-peer-deps
 
       - name: Compile rescript files ⚙️
-        run: "npm run re:build"
+        run: "npm run build:res"
 
       - name: Cypress run 🥬
         uses: cypress-io/github-action@v4
         with:
           env: SKIP_PREFLIGHT_CHECK=true
           install: false
-          start: "npm run start:react"
+          start: "npm run dev:react"
           wait-on: "http://localhost:4000"
           wait-on-timeout: 300
           browser: electron

.gitignore

@@ -23,7 +23,9 @@ yarn-debug.log*
 yarn-error.log*
 .idea
 dist
+dev-dist
 build
+storybook-static
 .swp
 stats.json
 public/build-meta.json

.npmrc

@@ -1 +1,2 @@
 auto-install-peers=true
+legacy-peer-deps=true

.nvmrc

@@ -1 +1 @@
-v16.15.0
+v18

.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["../public"],
+  core: {
+    builder: {
+      name: "@storybook/builder-vite",
+      options: {
+        viteConfigPath: "./.storybook/vite.config.ts",
+      },
+    },
+  },
+};
+export default config;

.storybook/preview-head.html

@@ -1,7 +1,6 @@
-<script
-  src="https://kit.fontawesome.com/d69454c2e7.js"
-  crossorigin="anonymous"
-></script>
+<script>
+  window.global = window;
+</script>
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from "@storybook/react";
+import "../src/style/index.css";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  esbuild: {
+    loader: "tsx",
+    include: [/src\/.*\.[tj]sx?$/, /.storybook\/.*\.[tj]sx?$/],
+  },
+});

Dockerfile

@@ -1,5 +1,5 @@
 #build-stage
-FROM node:lts-buster-slim as build-stage
+FROM node:18-buster-slim as build-stage
 
 WORKDIR /app
 

README.md

@@ -40,7 +40,7 @@ npm install --legacy-peer-deps
 #### 🏃 Run the app in development mode
 
 ```sh
-npm run start
+npm run dev
 ```
 
 Once the development server has started, open [localhost:4000](http://localhost:4000) in your browser. The page will be automatically reloaded when you make edits and save. You will also see any lint errors in the console.
@@ -101,7 +101,7 @@ Builds the app for production to the `build` folder. It correctly bundles React
 #### Start a production `http-server`
 
 ```sh
-npm run start:Dev
+npm run preview
 ```
 
 Starts a production http-server in local to run the project with Service worker.

index.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+    />
+    <title>%REACT_APP_TITLE%</title>
+    <meta name="description" content="%REACT_APP_META_DESCRIPTION%" />
+    <meta property="og:title" content="%REACT_APP_TITLE%" />
+    <meta property="og:description" content="%REACT_APP_META_DESCRIPTION%" />
+    <meta property="og:image" content="%REACT_APP_COVER_IMAGE%" />
+    <meta property=" og:url" content="%REACT_PUBLIC_URL%" />
+    <meta property="og:site_name" content="%REACT_APP_TITLE%" />
+    <meta name="twitter:title" content="%REACT_APP_TITLE%" />
+    <meta name="twitter:description" content="%REACT_APP_META_DESCRIPTION%" />
+    <meta name="twitter:image" content="%REACT_APP_COVER_IMAGE%" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="Care" />
+    <meta name="theme-color" content="#33BB17" />
+    <link rel="shortcut icon" href="/favicon-dark.ico" type="image/x-icon" />
+    <link
+      rel="apple-touch-icon"
+      href="https://cdn.coronasafe.network/care-manifest/images/icons/icon-192x192.png"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+    <script
+      src="https://kit.fontawesome.com/d69454c2e7.js"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      defer
+      data-domain="%REACT_APP_SITE_URL%"
+      src="%REACT_APP_ANALYTICS_SERVER_URL%/js/script.js"
+    ></script>
+  </body>
+</html>

netlify.toml

@@ -2,26 +2,10 @@
 publish = "build/"
 command = "CI='' npm run build"
 
-## Yarn 3 cache does not work out of the box as of Jan 2022. Context:
-## https://github.com/netlify/build/issues/1535#issuecomment-1021947989
-## [build.environment]
-## NETLIFY_USE_YARN = "true"
-## YARN_VERSION = "3.2.1"
-## YARN_FLAGS = "--check-cache"
-## YARN_CACHE_FOLDER = "/opt/buildhome/.yarn_cache"
-## YARN_ENABLE_GLOBAL_CACHE = "true"
-## YARN_GLOBAL_FOLDER = "/opt/buildhome/.yarn_cache"
-
 [build.environment]
-NODE_VERSION = "16"
+NODE_VERSION = "18"
 NPM_FLAGS = "--legacy-peer-deps"
 NODE_OPTIONS = "--max_old_space_size=4096"
-## YARN_VERSION = "3.2.1"
-## YARN_FLAGS = "--mode=update-lockfile"
-## YARN_CACHE_FOLDER = "/opt/buildhome/.yarn_cache"
-
-## [[plugins]]
-## package = "/.netlify/netlify-plugin-yarn"
 
 [[redirects]]
 from = "/api/*"
@@ -40,4 +24,3 @@ status = 200
   cache-control = '''
   max-age=0,
   no-store'''
-