Skip to content

Commit 20cb3f3

Browse files
slax57slax57
authored
Merge pull request #8317 from marmelab/demo-vitz
[Demo] Move e-commerce demo from webpack to vite
2 parents 4effe63 + e2e2318 commit 20cb3f3

11 files changed

+905
-89
lines changed

‎.github/workflows/test.yml

+4
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,10 @@ jobs:
7979
run: make build
8080
- name: Build e-commerce
8181
run: make build-demo
82+
env:
83+
# Needed as workaround for Vite https://github.com/vitejs/vite/issues/2433#issuecomment-831399876
84+
# value = (your memory in GiB, 6.51 for GH Actions) * 1024 - 512
85+
NODE_OPTIONS: '--max-old-space-size=6163'
8286

8387
crm:
8488
runs-on: ubuntu-latest

‎examples/demo/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ make run-demo
2626

2727
In the project directory, you can run:
2828

29-
### `npm start`
29+
### `npm dev`
3030

3131
Runs the app in the development mode.<br>
3232
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@@ -39,7 +39,7 @@ You will also see any lint errors in the console.
3939
Launches the test runner in the interactive watch mode.<br>
4040
See the section about [running tests](#running-tests) for more information.
4141

42-
### `npm run build`
42+
### `npm build`
4343

4444
Builds the app for production to the `build` folder.<br>
4545
It correctly bundles React in production mode and optimizes the build for the best performance.

‎examples/demo/build.js

-21
This file was deleted.

‎examples/demo/public/index.html ‎examples/demo/index.html

+3-11
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,8 @@
77
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
88
/>
99
<meta name="theme-color" content="#000000" />
10-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
11-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
12-
<!--
13-
Notice the use of %PUBLIC_URL% in the tags above.
14-
It will be replaced with the URL of the `public` folder during the build.
15-
Only files inside the `public` folder can be referenced from the HTML.
16-
17-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
18-
work correctly both with client-side routing and a non-root public URL.
19-
Learn how to configure a non-root public URL by running `npm run build`.
20-
-->
10+
<link rel="manifest" href="./manifest.json" />
11+
<link rel="shortcut icon" href="./favicon.ico" />
2112
<title>Posters Galore Administration</title>
2213
<style>
2314
body {
@@ -130,4 +121,5 @@
130121
</div>
131122
</div>
132123
</body>
124+
<script type="module" src="/src/index.tsx"></script>
133125
</html>

‎examples/demo/package.json

+8-13
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@mui/material": "^5.0.2",
99
"@types/inflection": "^1.5.28",
1010
"@types/recharts": "^1.8.10",
11+
"@vitejs/plugin-react": "^2.2.0",
1112
"clsx": "^1.1.1",
1213
"data-generator-retail": "^4.0.0",
1314
"date-fns": "^2.19.0",
@@ -34,31 +35,25 @@
3435
"react-dom": "^17.0.0",
3536
"react-router": "^6.1.0",
3637
"react-router-dom": "^6.1.0",
37-
"react-scripts": "^5.0.0",
38-
"recharts": "^2.1.5"
38+
"recharts": "^2.1.15"
3939
},
4040
"scripts": {
4141
"analyze": "source-map-explorer 'build/static/js/*.js'",
42-
"start": "react-scripts start",
43-
"build": "yarn node ./build.js",
44-
"eject": "react-scripts test"
42+
"dev": "vite",
43+
"build": "tsc && vite build",
44+
"preview": "vite preview"
4545
},
46-
"homepage": ".",
47-
"browserslist": [
48-
">0.2%",
49-
"not dead",
50-
"not ie <= 10",
51-
"not op_mini all"
52-
],
5346
"devDependencies": {
5447
"@types/fetch-mock": "^7.3.2",
5548
"@types/jest": "^26.0.19",
5649
"@types/node": "^12.12.14",
5750
"@types/prop-types": "^15.6.0",
5851
"@types/react": "^17.0.20",
5952
"@types/react-dom": "^17.0.9",
53+
"@vitejs/plugin-react": "^2.2.0",
6054
"rewire": "^5.0.0",
6155
"source-map-explorer": "^2.0.0",
62-
"typescript": "^4.4.0"
56+
"typescript": "^4.4.0",
57+
"vite": "^3.2.0"
6358
}
6459
}

‎examples/demo/src/index.tsx

-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
/** @jsxRuntime classic */
2-
import 'react-app-polyfill/ie11';
3-
import 'react-app-polyfill/stable';
41
import 'proxy-polyfill';
5-
// IE11 needs "jsxRuntime classic" for this initial file which means that "React" needs to be in scope
6-
// https://github.com/facebook/create-react-app/issues/9906
72

83
import * as React from 'react';
94
import ReactDOM from 'react-dom';

‎examples/demo/tsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,6 @@
2222
},
2323
"include": [
2424
"src"
25-
]
25+
],
26+
"references": [{ "path": "./tsconfig.node.json" }]
2627
}

‎examples/demo/tsconfig.node.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"composite": true,
4+
"module": "ESNext",
5+
"moduleResolution": "Node",
6+
"allowSyntheticDefaultImports": true
7+
},
8+
"include": ["vite.config.ts"]
9+
}
10+

‎examples/demo/vite.config.ts

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { defineConfig } from 'vite';
2+
import path from 'path';
3+
import fs from 'fs';
4+
import react from '@vitejs/plugin-react';
5+
6+
const packages = fs.readdirSync(path.resolve(__dirname, '../../packages'));
7+
const aliases = packages.reduce((acc, dirName) => {
8+
const packageJson = require(path.resolve(
9+
__dirname,
10+
'../../packages',
11+
dirName,
12+
'package.json'
13+
));
14+
acc[packageJson.name] = path.resolve(
15+
__dirname,
16+
`${path.resolve('../..')}/packages/${packageJson.name}/src`
17+
);
18+
return acc;
19+
}, {});
20+
21+
// https://vitejs.dev/config/
22+
export default defineConfig({
23+
plugins: [react()],
24+
define: {
25+
'process.env': process.env,
26+
},
27+
server: {
28+
port: 8000,
29+
},
30+
base: './',
31+
esbuild: {
32+
keepNames: true,
33+
},
34+
build: {
35+
sourcemap: true,
36+
},
37+
resolve: {
38+
preserveSymlinks: true,
39+
alias: [
40+
// allow profiling in production
41+
{ find: 'react-dom', replacement: 'react-dom/profiling' },
42+
{
43+
find: 'scheduler/tracing',
44+
replacement: 'scheduler/tracing-profiling',
45+
},
46+
// we need to manually follow the symlinks for local packages to allow deep HMR
47+
...Object.keys(aliases).map(packageName => ({
48+
find: packageName,
49+
replacement: aliases[packageName],
50+
})),
51+
],
52+
},
53+
});

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@
1515
"run-simple": "cd examples/simple && yarn start",
1616
"run-no-code": "cd examples/no-code && yarn dev",
1717
"run-tutorial": "cd examples/tutorial && yarn start",
18-
"run-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=rest yarn start",
18+
"run-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=rest yarn dev",
1919
"build-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=rest yarn build",
20-
"run-graphql-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=graphql yarn start",
20+
"run-graphql-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=graphql yarn dev",
2121
"run-demo-watch": "concurrently \"yarn run watch\" \"yarn run run-demo\"",
2222
"run-graphql-demo-watch": "concurrently \"yarn run watch\" \"yarn run run-graphql-demo\"",
2323
"run-crm": "cd examples/crm && yarn start",

0 commit comments

Comments
 (0)