Use Vite instead of CRA (#663)

openfoodfacts · Jul 9, 2023 · 9160cc5 · 9160cc5
1 parent b9d4f93
commit 9160cc5
Show file tree

Hide file tree

Showing 18 changed files with 646 additions and 7,225 deletions.
diff --git a/.gitignore b/.gitignore
@@ -23,3 +23,6 @@ yarn-debug.log*
 yarn-error.log*
 
 .idea
+
+# vite build
+dist/
diff --git a/README.md b/README.md
@@ -37,10 +37,10 @@ The main goal is: Every Open Food Facts user can annotate products in a few minu
 
 ## Setup:
 
-- Install Node: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
-- Install yarn `npm install --global yarn`
-- Install libraries `yarn install`
-- run the project locally `yarn start` (available on http://localhost:3000)
+- [Install Node](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+- [Install yarn](https://classic.yarnpkg.com/lang/en/docs/install/)
+- Install libraries: `yarn install`
+- run the project locally `yarn dev`
 
 ## Libraries:
 
@@ -54,19 +54,23 @@ Open Food Facts APIs and [Robotoff](https://github.com/openfoodfacts/robotoff)
 
 ## Build
 
-- `yarn build`
-
-Use a [simple webpack config](https://github.com/facebook/create-react-app/issues/3365#issuecomment-376546407) to bundle in a single file (build/bundle.min.js) and facilitate integration in OFF main site
+```
+yarn build
+```
 
 ## Countries list
 
-- `yarn countries`
+```
+yarn countries
+```
 
 Generate the JSON file `src/assets/countries.json` which contains all the countries available on OFF taxonomy. Data are obtained from static.openfoodfacts.org
 
 ## Taxonomy auto-complete
 
-- `node update-taxonomy-suggestions.js`
+```
+node update-taxonomy-suggestions.js
+```
 
 Fetch categories and labels taxonomy from OpenFoodFacts static files, and generate JSON files used by the `Autocomplete` fields.
 

diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Answer questions, make food transparency happen"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <!--
+    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="/manifest.json" />
+
+    <title>Hunger Games</title>
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+  </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.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+    <script>
+      if ("serviceWorker" in navigator) {
+        window.addEventListener("load", () => {
+          navigator.serviceWorker
+            .register("/serviceWorker.js")
+            .then((reg) => console.log("Success: ", reg.scope))
+            .catch((err) => console.log("Failure: ", err));
+        });
+      }
+    </script>
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -30,23 +30,20 @@
   "devDependencies": {
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.6",
-    "babel-loader": "^8.2.5",
+    "@vitejs/plugin-react": "^4.0.2",
     "husky": "^8.0.2",
     "prettier": "2.8.7",
     "pretty-quick": "^3.1.3",
-    "react-scripts-ts": "^3.1.0",
     "typescript": "^4.9.5",
-    "webpack-cli": "^5.0.1"
+    "vite": "^4.4.2"
   },
   "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "prettier": "prettier --write .",
-    "start": "react-scripts start",
     "countries": "node update-countries.js",
-    "build": "npm run build:react && npm run build:bundle",
-    "build:react": "react-scripts build",
-    "build:bundle": "webpack --config webpack.config.js",
     "test": "react-scripts test",
-    "eject": "react-scripts eject",
     "deploy": "bash deploy.sh",
     "prepare": "husky install"
   },

diff --git a/public/index.html b/public/index.html
diff --git a/src/App.js → src/App.jsx b/src/App.js → src/App.jsx
diff --git a/src/components/Footer/DiscoverTheProject.jsx b/src/components/Footer/DiscoverTheProject.jsx
@@ -60,6 +60,7 @@ const DiscoverTheProject = () => {
         {discover.map((content) => {
           return (
             <Button
+              key={content.text}
               sx={{
                 backgroundColor: "#a08d84",
                 "&:hover": { backgroundColor: "#887369" },

diff --git a/src/components/Footer/Donate.jsx b/src/components/Footer/Donate.jsx
@@ -46,7 +46,7 @@ const Donate = () => {
         {t("settings.text1")}
         <br />
         <br />
-        <Typography variant="h6">{t("settings.thank_you")} ❤️</Typography>
+        {t("settings.thank_you")} ❤️
       </Typography>
     </Box>
   );

diff --git a/src/components/Footer/DownloadOpenFoodFacts.jsx b/src/components/Footer/DownloadOpenFoodFacts.jsx
@@ -48,6 +48,7 @@ const DownloadOpenFoodFacts = () => {
       {footerLinks.map((link) => {
         return (
           <FooterButtons
+            key={link.title}
             title={link.title}
             subTitle={link.subTitle}
             icon={link.icon}

diff --git a/src/components/Footer/OpenFoodFacts.jsx b/src/components/Footer/OpenFoodFacts.jsx
@@ -56,7 +56,7 @@ const OpenFoodFacts = () => {
       <Box>
         {socialMedia.map((media) => {
           return (
-            <IconButton href={media.link} target="_blank">
+            <IconButton key={media.link} href={media.link} target="_blank">
               {media.icon}
             </IconButton>
           );

diff --git a/src/components/QuestionFilter/LabelFilter.tsx b/src/components/QuestionFilter/LabelFilter.tsx
@@ -8,7 +8,7 @@ import { URL_ORIGINE } from "../../const";
 // Otherwise fallback on english
 const AVAILABLE_OPTIONS = ["de", "es", "fr", "hr", "nl", "sv"];
 
-const cleanName = (name) =>
+const cleanName = (name: string) =>
   name
     .normalize("NFD")
     .replace(/[\u0300-\u036f]/g, "")

diff --git a/src/components/welcome/Welcome.jsx b/src/components/welcome/Welcome.jsx
@@ -5,6 +5,7 @@ import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/material/styles";
 import useControlled from "@mui/utils/useControlled";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import logo from "../../assets/logo.png";
 
 import Tour from "reactour";
 import {
@@ -37,7 +38,7 @@ export const getSteps = ({ t, withSelector, theme }) => [
               height: "auto",
               flex: "20%",
             }}
-            src={require("../../assets/logo.png")}
+            src={logo}
           />
           <Typography
             variant="h6"

diff --git a/src/const.js b/src/const.js
@@ -7,7 +7,7 @@ export const OFF_IMAGE_URL = "https://static.openfoodfacts.org/images/products";
 export const OFF_SEARCH = "https://world.openfoodfacts.org/cgi/search.pl";
 export const IS_DEVELOPMENT_MODE = process.env.NODE_ENV === "development";
 export const URL_ORIGINE = IS_DEVELOPMENT_MODE
-  ? "http://localhost:3000"
+  ? "http://localhost:5173"
   : "https://hunger.openfoodfacts.org/";
 export const NO_QUESTION_LEFT = "NO_QUESTION_LEFT";
 

diff --git a/src/pages/index.js → src/pages/index.jsx b/src/pages/index.js → src/pages/index.jsx
diff --git a/src/pages/shouldLoggedinPage/index.js → src/pages/shouldLoggedinPage/index.jsx b/src/pages/shouldLoggedinPage/index.js → src/pages/shouldLoggedinPage/index.jsx
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+});
diff --git a/webpack.config.js b/webpack.config.js