Migrates from CRA to Vite

Fixes #118. Migrates "dev", "build", "test" and "test:e2e" from CRA to Vite (using Vitest for the tests).
gephi · Jan 29, 2024 · 2869588 · 2869588
1 parent fafe858
commit 2869588
Show file tree

Hide file tree

Showing 23 changed files with 6,504 additions and 26,972 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,7 +13,7 @@
 /coverage
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store

diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ Gephi Lite source code is distributed under the [GNU General Public License v3](
 
 Gephi Lite is a web application, written using [TypeScript](https://www.typescriptlang.org/) and [React](https://react.dev/). The styles are written using [SASS](https://sass-lang.com/), and are based on [Bootstrap v5](https://getbootstrap.com/).
 
-Gephi Lite uses [sigma.js](https://www.sigmajs.org/) for graph rendering, and [graphology](https://graphology.github.io/) as the graph model as well as for graph algorithms. It has been bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Gephi Lite uses [sigma.js](https://www.sigmajs.org/) for graph rendering, and [graphology](https://graphology.github.io/) as the graph model as well as for graph algorithms. It is built using [Vite](https://vitejs.dev/).
 
 To build Gephi Lite locally, you first need a recent version of [Node.js](https://nodejs.org/en) with [NPM](https://www.npmjs.com/) installed on your computer. You can then install the dependencies by running `npm install` in Gephi Lite's directory.
 
@@ -25,7 +25,7 @@ Now, in the project directory, you can run:
 ### `npm start`
 
 Runs the app in the development mode.\
-Open [http://localhost:3000/gephi-lite](http://localhost:3000/gephi-lite) to view it in the browser.
+Open [http://localhost:5173/gephi-lite](http://localhost:5173/gephi-lite) to view it in the browser.
 
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
@@ -39,9 +39,9 @@ End-to-end tests can be run with playwright.
 
 First make sure to install browsers : `npx playwright install`
 
-Then start teh e2e tests : `npm run test:e2e`
+Then start the e2e tests : `npm run test:e2e`
 
-If you have updated the project style/layout, you will have to delete the saved screenshot in /e2e/_.spec.ts-snapthots/_, and then run the e2e test to regenerate them.
+If you have updated the project style/layout, you will have to delete the saved screenshot in /e2e/_.spec.ts-snapshots/_, and then run the e2e test to regenerate them.
 
 ### `npm run build`
 
@@ -53,7 +53,7 @@ Your Gephi Lite is ready to be deployed!
 
 ## Deploy the application
 
-To allow users to synchronize their data with GitHub, Gephi Lite needs a reverse proxy to avoid CORS issues. When working locally in development, [we use `http-proxy-middleware`](https://github.com/gephi/gephi-lite/blob/main/src/setupProxy.js) to make that work.
+To allow users to synchronize their data with GitHub, Gephi Lite needs a reverse proxy to avoid CORS issues. When working locally in development, [we use `http-proxy-middleware`](https://github.com/gephi/gephi-lite/blob/main/vite.config.js) to make that work.
 
 To deploy the application, you need to define the env variable `REACT_APP_GITHUB_PROXY` before building it, by following those steps:
 

diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,25 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <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="A lighter, web-based spin-off of Gephi" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <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="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% 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
-      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`.
-    -->
+    <link rel="manifest" href="/manifest.json" />
     <title>Gephi Lite</title>
   </head>
   <body>
@@ -56,5 +47,6 @@
       })();
     </script>
     <!-- End Matomo Code -->
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,7 @@ @@
     /coverage
     # production
-    /build
+    /dist
     # misc
     .DS_Store
@@ Expand Down @@