Vizzuality · Bluesmile82 · Jul 8, 2024 · Jun 6, 2024 · Jun 6, 2024 · Jun 20, 2024
diff --git a/.babelrc.js b/.babelrc.js
diff --git a/.env.sample b/.env.sample
@@ -1,19 +1,18 @@
 NODE_PATH=
-REACT_APP_DATA_GLOBE_SCENE_ID=
-REACT_APP_FEATURED_GLOBE_SCENE_ID=
-REACT_APP_ARGISJS_API_VERSION=
-REACT_APP_CONTENTFUL_SPACE_ID=
-REACT_APP_CONTENTFUL_TOKEN=
-REACT_APP_GA_MEASUREMENT_ID=
-REACT_APP_VERCEL_ENV=development
+VITE_APP_DATA_GLOBE_SCENE_ID=
+VITE_APP_FEATURED_GLOBE_SCENE_ID=
+VITE_APP_ARGISJS_API_VERSION=
+VITE_APP_CONTENTFUL_SPACE_ID=
+VITE_APP_CONTENTFUL_TOKEN=
+VITE_APP_GA_MEASUREMENT_ID=
+VITE_APP_VERCEL_ENV=development
 
-REACT_APP_TRANSIFEX_TOKEN=
-REACT_APP_TRANSIFEX_SECRET=
+VITE_APP_TRANSIFEX_TOKEN=
+VITE_APP_TRANSIFEX_SECRET=
 TRANSIFEX_TOKEN=
 TRANSIFEX_SECRET=
 
-SKIP_PREFLIGHT_CHECK=
 GENERATE_SOURCEMAP=
 
-REACT_APP_FEATURE_SPECIFIC_REGIONS_AOI=
-REACT_APP_FEATURE_ALLOWED_LANGUAGES=en,es,pt,fr
+VITE_APP_FEATURE_SPECIFIC_REGIONS_AOI=
+VITE_APP_FEATURE_ALLOWED_LANGUAGES=en,es,pt,fr
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -105,12 +105,6 @@ module.exports = {
             pattern: 'redux_modules/**',
             group: 'builtin',
           },
-
-          {
-            pattern: 'esri-loader',
-            group: 'builtin',
-            position: 'after',
-          },
           {
             pattern: 'router',
             group: 'builtin',

diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,7 @@
 
 # production
 /build
+/dist
 
 # local jekyll docs
 /_site

diff --git a/README.md b/README.md
@@ -1,9 +1,6 @@
 # Half Earth
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-And [`rewired`](https://github.com/timarney/react-app-rewired) instead of [`ejected`](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject)
-
-Arcgis JS is consumed as React components through [esri-loader](https://github.com/esri/esri-loader)
+This project is using [Vite](https://vitejs.dev/) as the build tool and [React](https://reactjs.org/) as the main library. The map is built using [Arcgis JS](https://developers.arcgis.com/javascript/) with the [@arcgis/core](https://www.npmjs.com/package/@arcgis/core) package.
 
 Clone the repo and run `yarn install` to install the needed dependencies.
 
@@ -16,7 +13,7 @@ It uses github pages and the content is generated from the `_docs` folder.
 
 In the project directory, you can run:
 
-### `yarn start`
+### `yarn dev`
 
 Runs the app in the development mode.<br>
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@@ -29,7 +26,6 @@ You will also see any lint errors in the console.
 ### `yarn test`
 
 Launches the test runner in the interactive watch mode.<br>
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
 ### `yarn run build`
 
@@ -39,10 +35,4 @@ It correctly bundles React in production mode and optimizes the build for the be
 The build is minified and the filenames include the hashes.<br>
 Your app is ready to be deployed!
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `config-overrides`
-
-This file is ised to override/extend the default `create-react-app` webpack configuration.
-
-Since `create-react-app` version 2 is used under the hoods no configuration to allow the use of [`CSSModules`](https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet) is needed. Just have in mind that for it to work the file naming convention `file-name.module.scss` should be followed.
+See the section about [build](https://vitejs.dev/guide/build) for more information.
diff --git a/_docs/dev/env.md b/_docs/dev/env.md
@@ -12,26 +12,25 @@ If the features are always showing independently from the env try to remove the
 Current env variables
 
 NODE_ENV=
-# env variables on create react app should start with REACT_APP to be available
-# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#docsNav
-REACT_APP_DATA_GLOBE_SCENE_ID= Esri Scene Id for the data globe
-REACT_APP_FEATURED_GLOBE_SCENE_ID= Esri Scene Id for the featured globe
-REACT_APP_ARGISJS_API_VERSION= ArcGis js version
-REACT_APP_CONTENTFUL_SPACE_ID= Contentful space id for featured globe and metadata
-REACT_APP_TRANSIFEX_TOKEN= Transifex token for translation
+# env variables on create react app should start with VITE_APP to be available
+# https://vitejs.dev/guide/env-and-mode
+VITE_APP_DATA_GLOBE_SCENE_ID= Esri Scene Id for the data globe
+VITE_APP_FEATURED_GLOBE_SCENE_ID= Esri Scene Id for the featured globe
+VITE_APP_ARGISJS_API_VERSION= ArcGis js version
+VITE_APP_CONTENTFUL_SPACE_ID= Contentful space id for featured globe and metadata
+VITE_APP_TRANSIFEX_TOKEN= Transifex token for translation
 TRANSIFEX_TOKEN= Transifex token for translation (Same as the react app one)
 TRANSIFEX_SECRET= Transifex secret for translation (Same as the react app one)
-REACT_APP_TRANSIFEX_SECRET= Transifex secret for translation (Same as the react app one)
-REACT_APP_CONTENTFUL_TOKEN= Contentful token
-REACT_APP_GA_MEASUREMENT_ID= Google analytics code
+VITE_APP_TRANSIFEX_SECRET= Transifex secret for translation (Same as the react app one)
+VITE_APP_CONTENTFUL_TOKEN= Contentful token
+VITE_APP_GA_MEASUREMENT_ID= Google analytics code
 
-SKIP_PREFLIGHT_CHECK=true keep true, CRA does'nt support different versions of eslint https://github.com/facebook/create-react-app/issues/5247
 GENERATE_SOURCEMAP=false keep false. This is a fix for a problem with react-scripts 5 not handling the sourcemaps correctly and having some warnings
 
 
-REACT_APP_VERCEL_ENV= Current environment, provided by vercel
+VITE_APP_VERCEL_ENV= Current environment, provided by vercel
 
-REACT_APP_FEATURE_SPECIFIC_REGIONS_AOI= Show specific regions as an option in analyze areas
-REACT_APP_FEATURE_ALLOWED_LANGUAGES= Languages showing in language switcher
+VITE_APP_FEATURE_SPECIFIC_REGIONS_AOI= Show specific regions as an option in analyze areas
+VITE_APP_FEATURE_ALLOWED_LANGUAGES= Languages showing in language switcher
 
 Temporal
diff --git a/_docs/scientists/pr-reviewing.md b/_docs/scientists/pr-reviewing.md
@@ -7,12 +7,12 @@ permalink: /_docs/science/sci-fe
 
 # Science `Pull Requests` reviewing
 
-The metadata is controlled by the back end (arcGIS online), but some elements of the data are in the FE code. Most of the code reviews from Science involve checking the name of the layers that are shown on the sidebar and the legend. When reviewing follow the `suggest` approach described in [this article](https://haacked.com/archive/2019/06/03/suggested-changes/){:target="_blank"}. 
+The metadata is controlled by the back end (arcGIS online), but some elements of the data are in the FE code. Most of the code reviews from Science involve checking the name of the layers that are shown on the sidebar and the legend. When reviewing follow the `suggest` approach described in [this article](https://haacked.com/archive/2019/06/03/suggested-changes/){:target="_blank"}.
 ### Code files to check
-- The file that contains the layers config that shows information on the side bar and legend is `src/constants/-layers-urls.js`. 
+- The file that contains the layers config that shows information on the side bar and legend is `src/constants/-layers-urls.js`.
 
 ### How to run the app in local
-Always seek advice from the Tech Lead. As an initial resource, there is a [Blogin post](https://vizzuality.blogin.co/posts/how-to-have-half-earth-in-your-computer-in-less-than-50-min-102803) telling the story of setting up the app in local. Key elements to keep in mind is to request the `.env` file from the Front End team. The `.env` file is ignored by git. This file is updated every time the ArcGIS Javascript API is updated (`REACT_APP_ARGISJS_API_VERSION=`). Check the `public/index.html` file to see which version is being used. The code line:
+Always seek advice from the Tech Lead. As an initial resource, there is a [Blogin post](https://vizzuality.blogin.co/posts/how-to-have-half-earth-in-your-computer-in-less-than-50-min-102803) telling the story of setting up the app in local. Key elements to keep in mind is to request the `.env` file from the Front End team. The `.env` file is ignored by git. This file is updated every time the ArcGIS Javascript API is updated (`VITE_APP_ARGISJS_API_VERSION=`). Check the `public/index.html` file to see which version is being used. The code line:
 ```
 <link rel="stylesheet" href="https://js.arcgis.com/<argis javascript API version>/esri/css/main.css">
 ```
diff --git a/config-overrides.js b/config-overrides.js
diff --git a/declarations/declarations.d.ts b/declarations/declarations.d.ts
@@ -5,5 +5,6 @@ declare module '*.scss' {
 
 declare module '*.svg';
 declare module '*.svg?sprite';
+declare module '*.svg?react';
 declare module '*.png';
 declare module '*.jpg';
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/css/main.css">
+    <link rel="stylesheet"
+      href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
+    <!-- Fonts -->
+    <!-- ivipresto Adobe font -->
+    <link href="https://use.typekit.net/yql8sej.css" rel="stylesheet">
+
+    <!-- Transifex -->
+    <script type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/@transifex/native/dist/browser.native.min.js"></script>
+
+    <title>Half-Earth Project Map</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>