Skip to content

Commit 664ae01

Browse files
thienandangthanhthienandangthanh
authored
Replace create-react-app with vite (#15)
* Init new vite project * Add rendition 35.1.0 * Add browserslist-to-esbuild * Add browsersListToEsbuild config * Add styled-components 6.1.0 * Add whatwg-fetch 3.6.19 * Add husky and lint-staged * Add @types/json-schema * Add promise-polyfill * Copy src from old ui - copy src directory - move public/index.html to index.html - remove %PUBLIC_URL% - add module script to the bottom of the body tag * Use util instead of Node.js util Reference: APIDevTools/json-schema-ref-parser#257 (comment) * Add `start` script to run as old ui * Set default port to 3000 and auto open browser * Remove redundant vite.svg logo * Use `build` instead of `dist` as build output Reason: to match create-react-app output * Only output sourcemap in development mode * Use eslint instead of @balena/lint with lintstaged * Rename project and version * Downgrade husky to v4, lint-staged to v10 * Replace old ui with new vite ui * Revert README changes * Remove redundant HTML comment Reason: %PUBLIC_URL% is not used with vite * Place generated assets inside the `static/assets` Reason: to serve with wifi-connect binary * Only run eslint fix with ts, tsx file with husky * Replace CRA with Vite in README
1 parent e542a30 commit 664ae01

26 files changed

+9565
-23660
lines changed

Diff for: ‎ui/.eslintrc.cjs

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:@typescript-eslint/recommended',
7+
'plugin:react-hooks/recommended',
8+
],
9+
ignorePatterns: ['dist', '.eslintrc.cjs'],
10+
parser: '@typescript-eslint/parser',
11+
plugins: ['react-refresh'],
12+
rules: {
13+
'react-refresh/only-export-components': [
14+
'warn',
15+
{ allowConstantExport: true },
16+
],
17+
},
18+
}

Diff for: ‎ui/.gitignore

+20-25
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,24 @@
1-
# Generated by Cargo
2-
# will have compiled files and executables
3-
/target/
4-
5-
# These are backup files generated by rustfmt
6-
**/*.rs.bk
7-
8-
# dependencies
9-
/node_modules
10-
/.pnp
11-
.pnp.js
12-
13-
# testing
14-
/coverage
15-
16-
# production
17-
# /build
18-
19-
# misc
20-
.DS_Store
21-
.env.local
22-
.env.development.local
23-
.env.test.local
24-
.env.production.local
25-
1+
# Logs
2+
logs
3+
*.log
264
npm-debug.log*
275
yarn-debug.log*
286
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
299

10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

Diff for: ‎ui/.lintstagedrc

+3-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
{
2-
"*.ts": [
3-
"balena-lint --typescript --fix"
2+
"*.{ts,tsx}": [
3+
"eslint --fix"
44
],
5-
6-
"*.tsx": [
7-
"balena-lint --typescript --fix"
8-
],
9-
}
5+
}

Diff for: ‎ui/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22

33
## Setting up the development environment
44

5-
The UI for **WiFi Connect** is built using **React**, bootstrapped by **create-react-app**. In order to develop for the UI you need to do the following:
5+
The UI for **WiFi Connect** is built using **React**, bootstrapped by **Vite**. In order to develop for the UI you need to do the following:
66

77
1. Run `npm install` in the UI folder.
88
2. Run `npm start` to start the development server. This will serve the UI on `localhost:3000` by default.
99
3. Any changes to the code will automatically reflect in the UI without having to manually refresh.
1010

1111
The production bundle is generated by running `npm build`, which will bundle and minify the react code. This will create a `build` folder where all the static resources will be located. You can then serve the `index.html` file and the contents of the `build` folder however you wish.
1212

13-
All networking requests are done using the `fetch` API. Polyfills are added for `fetch` and `Promise` which should improve the support for older browsers.
13+
All networking requests are done using the `fetch` API. Polyfills are added for `fetch` and `Promise` which should improve the support for older browsers.

Diff for: ‎ui/build/asset-manifest.json

-19
This file was deleted.

Diff for: ‎ui/build/index.html

+21-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,21 @@
1-
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/static/favicon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/static/manifest.json"/><title>WiFi Connect</title><link href="/static/css/2.c38cd9da.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,i,f=t[0],l=t[1],c=t[2],p=0,s=[];p<f.length;p++)i=f[p],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(a&&a(t);s.length;)s.shift()();return u.push.apply(u,c||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,f=1;f<r.length;f++){var l=r[f];0!==o[l]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/";var f=this["webpackJsonpwifi-connect-ui"]=this["webpackJsonpwifi-connect-ui"]||[],l=f.push.bind(f);f.push=t,f=f.slice();for(var c=0;c<f.length;c++)t(f[c]);var a=l;r()}([])</script><script src="/static/js/2.ef060f46.chunk.js"></script><script src="/static/js/main.2b22a9e9.chunk.js"></script></body></html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="shortcut icon" href="/static/favicon.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<link rel="manifest" href="/static/manifest.json" />
9+
<title>WiFi Connect</title>
10+
<script type="module" crossorigin src="/static/assets/index-f000a586.js"></script>
11+
</head>
12+
<body>
13+
<noscript>You need to enable JavaScript to run this app.</noscript>
14+
<div id="root"></div>
15+
16+
<script>
17+
globalThis.global = globalThis;
18+
globalThis.process = { env: {} };
19+
</script>
20+
</body>
21+
</html>

Diff for: ‎ui/build/precache-manifest.96ed21ec05e3b25e96ee640119b0334b.js

-30
This file was deleted.

Diff for: ‎ui/build/service-worker.js

-39
This file was deleted.

0 commit comments

Comments
 (0)