Skip to content

Commit 899d721

Browse files
ReidyTReidyT
committed
chore(migration): migrate React app to Vite
1 parent 5c48789 commit 899d721

26 files changed

+2313
-7022
lines changed

‎.github/workflows/cypress.yml

+3-3
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ jobs:
2929
uses: cypress-io/github-action@v4
3030
env:
3131
PORT: 3000
32-
REACT_APP_API_HOST: http://localhost:3636
33-
REACT_APP_GRAASP_APP_KEY: id-1234567890
34-
REACT_APP_ENABLE_MOCK_API: true
32+
VITE_GRAASP_API_HOST: http://localhost:3636
33+
VITE_GRAASP_APP_KEY: id-1234567890
34+
VITE_ENABLE_MOCK_API: true
3535
with:
3636
wait-on: http://localhost:3000
3737
wait-on-timeout: 180

‎.github/workflows/deploy-dev.yml

+3-3
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ jobs:
2525
- name: Yarn build
2626
# Set environment variables required to perform the build. These are only available to this step
2727
env:
28-
REACT_APP_API_HOST: ${{ secrets.REACT_APP_API_HOST_DEV }}
29-
REACT_APP_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
30-
REACT_APP_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
28+
VITE_GRAASP_API_HOST: ${{ secrets.REACT_APP_API_HOST_DEV }}
29+
VITE_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
30+
VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
3131
run: yarn build
3232
shell: bash
3333

‎.github/workflows/deploy-prod.yml

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ jobs:
2424
- name: Yarn build
2525
# Set environment variables required to perform the build. These are only available to this step
2626
env:
27-
REACT_APP_API_HOST: ${{ secrets.REACT_APP_API_HOST_PROD }}
28-
REACT_APP_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
29-
REACT_APP_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
27+
VITE_GRAASP_API_HOST: ${{ secrets.REACT_APP_API_HOST_PROD }}
28+
VITE_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
29+
VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
3030
run: yarn build
3131
shell: bash
3232

‎.github/workflows/deploy-stage.yml

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ jobs:
2424
- name: Yarn build
2525
# Set environment variables required to perform the build. These are only available to this step
2626
env:
27-
REACT_APP_API_HOST: ${{ secrets.REACT_APP_API_HOST_STAGE }}
28-
REACT_APP_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
29-
REACT_APP_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
27+
VITE_GRAASP_API_HOST: ${{ secrets.REACT_APP_API_HOST_STAGE }}
28+
VITE_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
29+
VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
3030
run: yarn build
3131
shell: bash
3232

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
Create a env.development file with:
55
66
PORT=3005
7-
REACT_APP_GRAASP_APP_KEY=<app KEY>
8-
REACT_APP_ENABLE_MOCK_API=true
9-
REACT_APP_GRAASP_DOMAIN=localhost
10-
REACT_APP_API_HOST=<request address for the backend>
7+
VITE_GRAASP_APP_KEY=<app KEY>
8+
VITE_ENABLE_MOCK_API=true
9+
VITE_GRAASP_DOMAIN=localhost
10+
VITE_GRAASP_API_HOST=<request address for the backend>
1111
```
1212

1313
![GitHub package.json version](https://img.shields.io/github/package-json/v/graasp/graasp-app-text-analysis?color=green&style=flat-square)

‎cypress.config.ts

+13-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,22 @@
11
import { defineConfig } from 'cypress';
2+
import vitePreprocessor from 'cypress-vite';
3+
4+
import setupCoverage from '@cypress/code-coverage/task';
25

36
export default defineConfig({
47
video: false,
8+
retries: {
9+
runMode: 2,
10+
},
11+
chromeWebSecurity: false,
512
e2e: {
613
setupNodeEvents(on, config) {
7-
return require('./cypress/plugins/index')(on, config);
14+
// cypress-vite allow to using vite specific features
15+
// like plugins and virtual imports, import.meta, etc. in e2e tests
16+
on('file:preprocessor', vitePreprocessor());
17+
setupCoverage(on, config);
18+
return config;
819
},
9-
baseUrl: `http://localhost:${process.env.PORT || 3000}`,
20+
baseUrl: `http://localhost:${process.env.VITE_PORT || 3335}`,
1021
},
1122
});

‎cypress/plugins/index.ts

-38
This file was deleted.

‎cypress/support/commands.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ Cypress.Commands.add(
4848
win.appContext = {
4949
memberId: currentMember.id,
5050
itemId: MOCK_SERVER_ITEM.id,
51-
apiHost: Cypress.env('REACT_APP_API_HOST') || MOCK_SERVER_API_HOST,
51+
apiHost: Cypress.env('VITE_GRAASP_API_HOST') || MOCK_SERVER_API_HOST,
5252
...appContext,
5353
};
5454
});

‎cypress/tsconfig.json

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
{
2+
"extends": "../tsconfig.json",
23
"compilerOptions": {
34
"target": "es5",
4-
"lib": ["es5", "dom"],
5-
"types": ["cypress", "node"],
6-
"esModuleInterop": true
5+
"lib": ["es5", "dom", "ES2021.String"],
6+
"types": ["cypress", "node", "vite/client"],
7+
"esModuleInterop": true,
8+
"strictNullChecks": false,
9+
"strict": true,
10+
"sourceMap": false
711
},
8-
"include": ["**/*.ts", "../src/data/members.ts"]
12+
"include": ["**/*.ts", "../src/data/members.ts", "cypress.d.ts"],
13+
"exclude": ["coverage", ".nyc_output"]
914
}

‎docs/Setup_Intructions.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -359,10 +359,10 @@ jobs:
359359
- name: cypress run
360360
uses: cypress-io/github-action@v2
361361
env:
362-
REACT_APP_API_HOST: http://localhost:3636
363-
REACT_APP_GRAASP_DOMAIN: localhost
364-
REACT_APP_GRAASP_APP_KEY: id-1234567890
365-
REACT_APP_ENABLE_MOCK_API: true
362+
VITE_GRAASP_API_HOST: http://localhost:3636
363+
VITE_GRAASP_DOMAIN: localhost
364+
VITE_GRAASP_APP_KEY: id-1234567890
365+
VITE_ENABLE_MOCK_API: true
366366
NODE_ENV: test
367367
with:
368368
install: false

‎public/index.html ‎index.html

+6-5
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="icon" href="/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
88
<!-- todo: change this to appropriate values -->
99
<meta
1010
name="Text Analysis"
1111
content="A Graasp App created using a template."
1212
/>
13-
<meta name="version-info" content="%REACT_APP_VERSION%" />
13+
<meta name="version-info" content="%APP_VERSION%" />
1414
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
1515
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
1616
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
@@ -22,13 +22,13 @@
2222
manifest.json provides metadata used when your web app is installed on a
2323
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
2424
-->
25-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
25+
<link rel="manifest" href="/manifest.json" />
2626
<!--
27-
Notice the use of %PUBLIC_URL% in the tags above.
27+
Notice the use of in the tags above.
2828
It will be replaced with the URL of the `public` folder during the build.
2929
Only files inside the `public` folder can be referenced from the HTML.
3030
31-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
31+
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
3232
work correctly both with client-side routing and a non-root public URL.
3333
Learn how to configure a non-root public URL by running `npm run build`.
3434
-->
@@ -48,5 +48,6 @@
4848
To begin the development, run `npm start` or `yarn start`.
4949
To create a production bundle, use `npm run build` or `yarn build`.
5050
-->
51+
<script type="module" src="./src/index.tsx"></script>
5152
</body>
5253
</html>

‎package.json

+30-21
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@testing-library/cypress": "9.0.0",
2626
"@testing-library/jest-dom": "5.16.5",
2727
"@testing-library/react": "14.1.2",
28+
"cypress-vite": "^1.5.0",
2829
"i18next": "22.5.0",
2930
"lodash.isequal": "^4.5.0",
3031
"lodash.isobject": "3.0.2",
@@ -35,32 +36,34 @@
3536
"react-dom": "18.2.0",
3637
"react-i18next": "12.3.1",
3738
"react-markdown": "^8.0.7",
38-
"react-scripts": "5.0.1",
3939
"react-toastify": "9.1.3",
4040
"remark-breaks": "^3.0.3",
41+
"remove": "^0.1.5",
4142
"typescript": "5.1.6",
4243
"uuid": "9.0.0"
4344
},
4445
"scripts": {
45-
"start": "env-cmd -f ./.env.local react-scripts -r @cypress/instrument-cra start",
46-
"start:dev": "env-cmd -f ./.env.development react-scripts -r @cypress/instrument-cra start",
47-
"start:test": "env-cmd -f ./.env.test react-scripts -r @cypress/instrument-cra start",
48-
"start:ci": "react-scripts -r @cypress/instrument-cra start",
49-
"build": "react-scripts build",
50-
"build:dev": "env-cmd -f ./.env.development react-scripts build",
51-
"test:cra": "react-scripts test",
52-
"eject": "react-scripts eject",
53-
"postinstall": "husky install",
54-
"prettier:write": "prettier {src,cypress}/**/*.{ts,tsx,js,jsx} --write",
55-
"prettier:check": "prettier {src,cypress}/**/*.{ts,tsx,js,jsx} --check",
56-
"hooks:install": "husky install",
57-
"hooks:uninstall": "husky uninstall",
58-
"pre-commit": "yarn prettier:check && yarn lint",
46+
"dev": "vite",
47+
"start": "yarn dev",
48+
"start:test": "vite --mode test",
49+
"build": "vite build",
50+
"build:dev": "vite build --mode development",
51+
"build:test": "vite build --mode test",
52+
"preview": "vite preview",
53+
"preview:dev": "vite preview --mode development",
54+
"preview:test": "vite preview --mode test",
5955
"lint": "eslint .",
60-
"type-check": "tsc --noEmit",
61-
"cypress:open": "env-cmd -f ./.env.development cypress open",
62-
"test": "concurrently -k -s first \"yarn start:test\" \"wait-on http://127.0.0.1:3333 && yarn test:ci\" ",
63-
"test:ci": "env-cmd -f ./.env.test cypress run --browser chrome --headless && nyc report --reporter=text --reporter=text-summary",
56+
"pre-commit": "yarn prettier:check && yarn lint && yarn type-check",
57+
"prettier:check": "prettier --check {src,cypress}/**/*.{js,ts,tsx,json}",
58+
"prettier:write": "prettier --write {src,cypress}/**/*.{js,ts,tsx,json}",
59+
"type-check": "tsc --noEmit && tsc --noEmit -p cypress/tsconfig.json",
60+
"check": "yarn prettier:check && yarn lint && yarn type-check",
61+
"hooks:uninstall": "husky uninstall",
62+
"hooks:install": "husky install",
63+
"cypress:open": "env-cmd -f ./.env.test cypress open --browser chrome",
64+
"test": "yarn build:test && concurrently -k -s first \"yarn preview:test\" \"yarn cypress:run\"",
65+
"cypress:run": "env-cmd -f ./.env.test cypress run --browser chrome",
66+
"postinstall": "husky install",
6467
"cov:report": "open ./coverage/lcov-report/index.html",
6568
"release": "standard-version -a",
6669
"release:first": "standard-version -a --first-release",
@@ -71,7 +74,6 @@
7174
"@commitlint/cli": "17.6.7",
7275
"@commitlint/config-conventional": "17.6.7",
7376
"@cypress/code-coverage": "3.12.17",
74-
"@cypress/instrument-cra": "1.4.0",
7577
"@trivago/prettier-plugin-sort-imports": "4.3.0",
7678
"@types/i18n": "0.13.10",
7779
"@types/jest": "29.5.11",
@@ -85,8 +87,9 @@
8587
"@types/uuid": "9.0.7",
8688
"@typescript-eslint/eslint-plugin": "5.30.7",
8789
"@typescript-eslint/parser": "5.30.7",
90+
"@vitejs/plugin-react": "^4.2.1",
8891
"concurrently": "8.2.2",
89-
"cypress": "^12.13.0",
92+
"cypress": "^13.6.1",
9093
"env-cmd": "10.1.0",
9194
"eslint": "8.18.0",
9295
"eslint-config-airbnb": "19.0.4",
@@ -103,7 +106,13 @@
103106
"nyc": "15.1.0",
104107
"prettier": "2.8.8",
105108
"pretty-quick": "3.1.3",
109+
"rollup-plugin-visualizer": "^5.12.0",
106110
"standard-version": "9.5.0",
111+
"vite": "^5.0.12",
112+
"vite-plugin-checker": "^0.6.2",
113+
"vite-plugin-dts": "^3.7.2",
114+
"vite-plugin-istanbul": "^5.0.0",
115+
"vitest": "^1.2.1",
107116
"wait-on": "7.2.0"
108117
},
109118
"browserslist": {

‎src/components/Root.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { CssBaseline, ThemeProvider, createTheme, styled } from '@mui/material';
1414
import { grey, orange, pink } from '@mui/material/colors';
1515
import { StyledEngineProvider } from '@mui/material/styles';
1616

17-
import { MOCK_API } from '../config/env';
17+
import { ENABLE_MOCK_API } from '../config/env';
1818
import i18nConfig from '../config/i18n';
1919
import {
2020
CONTEXT_FETCHING_ERROR_MESSAGE,
@@ -104,7 +104,7 @@ const Root: FC = () => {
104104
>
105105
<ToastContainer position="bottom-right" />
106106
<App />
107-
{process.env.NODE_ENV === 'development' && MOCK_API && (
107+
{import.meta.env.DEV && ENABLE_MOCK_API && (
108108
<GraaspContextDevTool
109109
members={mockMembers}
110110
context={mockContext}
@@ -113,7 +113,7 @@ const Root: FC = () => {
113113
)}
114114
</WithTokenContext>
115115
</WithLocalContext>
116-
{process.env.NODE_ENV === 'development' && (
116+
{import.meta.env.DEV && (
117117
<ReactQueryDevtools position="top-right" />
118118
)}
119119
</QueryClientProvider>

‎src/config/env.ts

+7-9
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
export const {
2-
REACT_APP_GRAASP_APP_KEY,
3-
REACT_APP_VERSION,
4-
REACT_APP_GOOGLE_ANALYTICS_ID,
5-
REACT_APP_ENABLE_MOCK_API,
6-
REACT_APP_API_HOST,
7-
} = window.Cypress ? Cypress.env() : process.env;
8-
9-
export const MOCK_API = REACT_APP_ENABLE_MOCK_API === 'true';
1+
export const GRAASP_APP_KEY = import.meta.env.VITE_GRAASP_APP_KEY;
2+
export const APP_VERSION = import.meta.env.VITE_VERSION;
3+
export const GOOGLE_ANALYTICS_ID = import.meta.env.VITE_GOOGLE_ANALYTICS_ID;
4+
export const ENABLE_MOCK_API =
5+
import.meta.env.VITE_ENABLE_MOCK_API === 'true' || false;
6+
export const GRAASP_API_HOST =
7+
import.meta.env.VITE_GRAASP_API_HOST || 'http://localhost:3000';

‎src/config/i18n.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ i18n.use(initReactI18next).init({
1515
resources,
1616
lng: 'en',
1717
// debug only when not in production
18-
debug: process.env.NODE_ENV !== 'production',
18+
debug: !import.meta.env.PROD,
1919
ns: [defaultNS],
2020
defaultNS,
2121
keySeparator: false,

‎src/config/queryClient.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { configureQueryClient } from '@graasp/apps-query-client';
22

3-
import { MOCK_API, REACT_APP_API_HOST, REACT_APP_GRAASP_APP_KEY } from './env';
3+
import { ENABLE_MOCK_API, GRAASP_API_HOST, GRAASP_APP_KEY } from './env';
44

55
const {
66
queryClient,
@@ -18,9 +18,9 @@ const {
1818
keepPreviousData: true,
1919
// avoid refetching when same data are closely fetched
2020
staleTime: 1000, // ms
21-
API_HOST: REACT_APP_API_HOST,
22-
GRAASP_APP_KEY: REACT_APP_GRAASP_APP_KEY,
23-
isStandalone: MOCK_API,
21+
API_HOST: GRAASP_API_HOST,
22+
GRAASP_APP_KEY,
23+
isStandalone: ENABLE_MOCK_API,
2424
});
2525

2626
export {

0 commit comments

Comments
 (0)