Skip to content

Commit

Permalink
Merge pull request #8317 from marmelab/demo-vitz
Browse files Browse the repository at this point in the history
[Demo] Move e-commerce demo from webpack to vite
  • Loading branch information
slax57 authored Oct 27, 2022
2 parents 4effe63 + e2e2318 commit 20cb3f3
Show file tree
Hide file tree
Showing 11 changed files with 905 additions and 89 deletions.
4 changes: 4 additions & 0 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,10 @@ jobs:
run: make build
- name: Build e-commerce
run: make build-demo
env:
# Needed as workaround for Vite https://github.com/vitejs/vite/issues/2433#issuecomment-831399876
# value = (your memory in GiB, 6.51 for GH Actions) * 1024 - 512
NODE_OPTIONS: '--max-old-space-size=6163'

crm:
runs-on: ubuntu-latest
Expand Down
4 changes: 2 additions & 2 deletions examples/demo/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ make run-demo

In the project directory, you can run:

### `npm start`
### `npm dev`

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

### `npm run build`
### `npm build`

Builds the app for production to the `build` folder.<br>
It correctly bundles React in production mode and optimizes the build for the best performance.
Expand Down
21 changes: 0 additions & 21 deletions examples/demo/build.js

This file was deleted.

14 changes: 3 additions & 11 deletions examples/demo/public/index.html → examples/demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,8 @@
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<!--
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" />
<link rel="shortcut icon" href="./favicon.ico" />
<title>Posters Galore Administration</title>
<style>
body {
Expand Down Expand Up @@ -130,4 +121,5 @@
</div>
</div>
</body>
<script type="module" src="/src/index.tsx"></script>
</html>
21 changes: 8 additions & 13 deletions examples/demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"@mui/material": "^5.0.2",
"@types/inflection": "^1.5.28",
"@types/recharts": "^1.8.10",
"@vitejs/plugin-react": "^2.2.0",
"clsx": "^1.1.1",
"data-generator-retail": "^4.0.0",
"date-fns": "^2.19.0",
Expand All @@ -34,31 +35,25 @@
"react-dom": "^17.0.0",
"react-router": "^6.1.0",
"react-router-dom": "^6.1.0",
"react-scripts": "^5.0.0",
"recharts": "^2.1.5"
"recharts": "^2.1.15"
},
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "react-scripts start",
"build": "yarn node ./build.js",
"eject": "react-scripts test"
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"homepage": ".",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 10",
"not op_mini all"
],
"devDependencies": {
"@types/fetch-mock": "^7.3.2",
"@types/jest": "^26.0.19",
"@types/node": "^12.12.14",
"@types/prop-types": "^15.6.0",
"@types/react": "^17.0.20",
"@types/react-dom": "^17.0.9",
"@vitejs/plugin-react": "^2.2.0",
"rewire": "^5.0.0",
"source-map-explorer": "^2.0.0",
"typescript": "^4.4.0"
"typescript": "^4.4.0",
"vite": "^3.2.0"
}
}
5 changes: 0 additions & 5 deletions examples/demo/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
/** @jsxRuntime classic */
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'proxy-polyfill';
// IE11 needs "jsxRuntime classic" for this initial file which means that "React" needs to be in scope
// https://github.com/facebook/create-react-app/issues/9906

import * as React from 'react';
import ReactDOM from 'react-dom';
Expand Down
3 changes: 2 additions & 1 deletion examples/demo/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,6 @@
},
"include": [
"src"
]
],
"references": [{ "path": "./tsconfig.node.json" }]
}
10 changes: 10 additions & 0 deletions examples/demo/tsconfig.node.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

53 changes: 53 additions & 0 deletions examples/demo/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { defineConfig } from 'vite';
import path from 'path';
import fs from 'fs';
import react from '@vitejs/plugin-react';

const packages = fs.readdirSync(path.resolve(__dirname, '../../packages'));
const aliases = packages.reduce((acc, dirName) => {
const packageJson = require(path.resolve(
__dirname,
'../../packages',
dirName,
'package.json'
));
acc[packageJson.name] = path.resolve(
__dirname,
`${path.resolve('../..')}/packages/${packageJson.name}/src`
);
return acc;
}, {});

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
define: {
'process.env': process.env,
},
server: {
port: 8000,
},
base: './',
esbuild: {
keepNames: true,
},
build: {
sourcemap: true,
},
resolve: {
preserveSymlinks: true,
alias: [
// allow profiling in production
{ find: 'react-dom', replacement: 'react-dom/profiling' },
{
find: 'scheduler/tracing',
replacement: 'scheduler/tracing-profiling',
},
// we need to manually follow the symlinks for local packages to allow deep HMR
...Object.keys(aliases).map(packageName => ({
find: packageName,
replacement: aliases[packageName],
})),
],
},
});
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
"run-simple": "cd examples/simple && yarn start",
"run-no-code": "cd examples/no-code && yarn dev",
"run-tutorial": "cd examples/tutorial && yarn start",
"run-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=rest yarn start",
"run-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=rest yarn dev",
"build-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=rest yarn build",
"run-graphql-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=graphql yarn start",
"run-graphql-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=graphql yarn dev",
"run-demo-watch": "concurrently \"yarn run watch\" \"yarn run run-demo\"",
"run-graphql-demo-watch": "concurrently \"yarn run watch\" \"yarn run run-graphql-demo\"",
"run-crm": "cd examples/crm && yarn start",
Expand Down
Loading

0 comments on commit 20cb3f3

Please sign in to comment.