Skip to content

Commit d15b520

Browse files
dheraultfloreks
andauthored
Add ViteJS as the frontend dev server and build system (#730)
Co-authored-by: Sebastian Florek <[email protected]>
1 parent 6bd324d commit d15b520

29 files changed

+3176
-9347
lines changed

www/.babelrc

Lines changed: 0 additions & 6 deletions
This file was deleted.

www/.browserslistrc

Lines changed: 0 additions & 9 deletions
This file was deleted.

www/.env

Lines changed: 0 additions & 3 deletions
This file was deleted.
File renamed without changes.

www/public/index.html renamed to www/index.html

Lines changed: 16 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,20 @@
88
name="description"
99
content="One-click deploy for any application"
1010
/>
11-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
12-
<link rel="apple-touch-icon" sizes="57x57" href="%PUBLIC_URL%/apple-icon-57x57.png">
13-
<link rel="apple-touch-icon" sizes="60x60" href="%PUBLIC_URL%/apple-icon-60x60.png">
14-
<link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/apple-icon-72x72.png">
15-
<link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/apple-icon-76x76.png">
16-
<link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/apple-icon-114x114.png">
17-
<link rel="apple-touch-icon" sizes="120x120" href="%PUBLIC_URL%/apple-icon-120x120.png">
18-
<link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/apple-icon-144x144.png">
19-
<link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/apple-icon-152x152.png">
20-
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-icon-180x180.png">
21-
<link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/android-icon-192x192.png">
22-
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
23-
<link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/favicon-96x96.png">
24-
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
11+
<link rel="icon" href="/favicon.ico" />
12+
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
13+
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
14+
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
15+
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
16+
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
17+
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
18+
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
19+
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
20+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
21+
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
22+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
23+
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
24+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
2525
<!-- Added by plural team -->
2626
<link rel='stylesheet' href='https://necolas.github.io/normalize.css/latest/normalize.css' />
2727
<link rel="stylesheet" href="/page-load-spinner/page-load-spinner.css" />
@@ -30,16 +30,7 @@
3030
manifest.json provides metadata used when your web app is installed on a
3131
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
3232
-->
33-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
34-
<!--
35-
Notice the use of %PUBLIC_URL% in the tags above.
36-
It will be replaced with the URL of the `public` folder during the build.
37-
Only files inside the `public` folder can be referenced from the HTML.
38-
39-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
40-
work correctly both with client-side routing and a non-root public URL.
41-
Learn how to configure a non-root public URL by running `npm run build`.
42-
-->
33+
<link rel="manifest" href="/manifest.json" />
4334
<!-- Load 'Inter' Google font -->
4435
<link rel="preconnect" href="https://fonts.googleapis.com">
4536
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -170,16 +161,7 @@ <h1>
170161
</div>
171162
<script src="/page-load-spinner/page-load-spinner.js"></script>
172163
</div>
173-
<!--
174-
This HTML file is a template.
175-
If you open it directly in the browser, you will see an empty page.
176-
177-
You can add webfonts, meta tags, or analytics to this file.
178-
The build step will place the bundled scripts into the <body> tag.
179-
180-
To begin the development, run `npm start` or `yarn start`.
181-
To create a production bundle, use `npm run build` or `yarn build`.
182-
-->
164+
<script type="module" src="/src/main.tsx"></script>
183165
<script src="https://js.stripe.com/v3/" />
184166
<script>
185167
// Intercom widget

www/package.json

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
{
22
"name": "www",
3-
"version": "0.1.0",
43
"private": true,
4+
"version": "0.1.0",
5+
"type": "module",
56
"scripts": {
7+
"build": "tsc && vite build",
8+
"preview": "vite preview",
69
"analyze": "source-map-explorer 'build/static/js/*.js'",
7-
"start": "PORT=3001 HTTPS=true react-scripts start",
10+
"start": "vite",
811
"start:prod": "yarn build && serve -s -p 3001 build",
9-
"build": "react-scripts build",
10-
"test": "react-scripts test --watchAll=false",
12+
"test": "vitest --run",
13+
"test:watch": "vitest",
14+
"test:coverage": "vitest run --coverage",
15+
"test:ui": "vitest --ui",
1116
"lint": "yarn lint:js && yarn lint:css",
1217
"lint:js": "eslint ./src",
1318
"lint:css": "stylelint src/**/*.css",
1419
"fix": "yarn fix:js && yarn fix:css",
1520
"fix:js": "eslint ./src --fix",
1621
"fix:css": "stylelint src/**/*.css --fix",
17-
"e2e": "concurrently -kill-others --success first \"yarn start\" \"wait-on https://localhost:3001 && cd e2e && yarn e2e:start\"",
22+
"e2e": "concurrently -kill-others --success first \"yarn start\" \"wait-on -c waitOnConfig.json -v https-get://localhost:3001 && cd e2e && yarn e2e:start\"",
1823
"unimported": "npx unimported",
1924
"graphql:codegen": "graphql-codegen --config codegen.yml"
2025
},
@@ -30,22 +35,21 @@
3035
"@gitbeaker/browser": "35.7.0",
3136
"@growthbook/growthbook": "0.20.0",
3237
"@growthbook/growthbook-react": "0.10.1",
33-
"@jest/types": "29.3.1",
3438
"@nivo/core": "0.80.0",
3539
"@nivo/geo": "0.80.0",
3640
"@nivo/line": "0.80.0",
3741
"@octokit/core": "3.6.0",
3842
"@pluralsh/design-system": "1.290.2",
39-
"@testing-library/jest-dom": "5.16.5",
40-
"@testing-library/react": "13.4.0",
43+
"@testing-library/react": "^13.4.0",
4144
"@types/styled-components": "5.1.26",
4245
"apollo-absinthe-upload-link": "1.7.0",
46+
"browserify-zlib": "0.2.0",
4347
"buffer": "6.0.3",
4448
"country-code-lookup": "0.0.20",
45-
"cra-template": "1.2.0",
4649
"d3-hierarchy": "3.1.2",
4750
"d3-selection": "3.0.0",
4851
"emoji-mart": "3.0.1",
52+
"events": "3.3.0",
4953
"filesize": "8.0.7",
5054
"fireworks-js": "1.4.1",
5155
"forge-core": "1.4.6",
@@ -61,6 +65,7 @@
6165
"moment": "2.29.4",
6266
"phoenix": "1.6.15",
6367
"pluralsh-absinthe-socket-apollo-link": "0.2.0",
68+
"process": "0.11.10",
6469
"prop-types": "15.8.1",
6570
"query-string": "7.1.1",
6671
"randomcolor": "0.6.2",
@@ -84,7 +89,6 @@
8489
"react-router-dom": "6.4.3",
8590
"react-sage": "0.3.16",
8691
"react-script-hook": "1.7.2",
87-
"react-scripts": "5.0.1",
8892
"react-spinners": "0.13.6",
8993
"react-stripe-elements": "6.1.2",
9094
"react-sweet-progress": "1.1.2",
@@ -98,7 +102,9 @@
98102
"slate": "0.85.0",
99103
"slate-history": "0.85.0",
100104
"slate-react": "0.83.2",
105+
"stream-browserify": "3.0.0",
101106
"styled-components": "5.3.6",
107+
"util": "0.12.5",
102108
"uuid": "9.0.0",
103109
"workbox-core": "6.5.4",
104110
"workbox-expiration": "6.5.4",
@@ -110,10 +116,8 @@
110116
"xterm-theme": "1.1.0"
111117
},
112118
"devDependencies": {
113-
"@babel/core": "7.20.2",
114-
"@babel/eslint-parser": "7.19.1",
115-
"@babel/preset-env": "7.20.2",
116-
"@babel/preset-react": "7.18.6",
119+
"@esbuild-plugins/node-globals-polyfill": "0.1.1",
120+
"@esbuild-plugins/node-modules-polyfill": "0.1.4",
117121
"@graphql-codegen/add": "3.2.1",
118122
"@graphql-codegen/cli": "2.13.12",
119123
"@graphql-codegen/introspection": "2.2.1",
@@ -122,27 +126,29 @@
122126
"@graphql-codegen/typescript-react-apollo": "3.3.6",
123127
"@pluralsh/eslint-config-typescript": "2.4.2",
124128
"@pluralsh/stylelint-config": "1.0.1",
129+
"@types/events": "3.0.0",
130+
"@types/jsdom": "^20",
125131
"@types/randomcolor": "0.5.6",
132+
"@types/react": "18.0.25",
133+
"@types/react-dom": "18.0.9",
126134
"@typescript-eslint/eslint-plugin": "5.43.0",
127135
"@typescript-eslint/parser": "5.43.0",
136+
"@vitejs/plugin-basic-ssl": "0.1.2",
137+
"@vitejs/plugin-react": "2.2.0",
138+
"@vitest/ui": "0.25.2",
128139
"concurrently": "7.5.0",
129140
"eslint": "8.27.0",
130141
"eslint-config-pluralsh": "3.1.0",
131142
"eslint-plugin-import": "2.26.0",
132-
"eslint-plugin-import-newlines": "^1.2.3",
143+
"eslint-plugin-import-newlines": "1.2.3",
144+
"jsdom": "^20.0.2",
133145
"postcss-import": "8.2.0",
134146
"serve": "14.1.1",
135147
"source-map-explorer": "2.5.3",
136148
"stylelint": "14.15.0",
137149
"typescript": "4.8.4",
150+
"vite": "3.2.3",
151+
"vitest": "0.25.2",
138152
"wait-on": "6.0.1"
139-
},
140-
"jest": {
141-
"moduleNameMapper": {
142-
"\\.(css)$": "identity-obj-proxy"
143-
},
144-
"transformIgnorePatterns": [
145-
"/node_modules/(?!(.*))"
146-
]
147153
}
148154
}

www/src/components/constants.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const SIDEBAR_WIDTH = '224px'
2-
export const PLURAL_ICON = `${process.env.PUBLIC_URL}/plrl-dark.png`
3-
export const PLURAL_WORD = `${process.env.PUBLIC_URL}/plural-white-word.png`
4-
export const PLURAL_MARK = `${process.env.PUBLIC_URL}/plural-logo.png`
5-
export const PLURAL_MARK_WHITE = `${process.env.PUBLIC_URL}/plural-white.png`
6-
export const PLURAL_FULL_LOGO_WHITE = `${process.env.PUBLIC_URL}/plural-full-logo-white.svg`
2+
export const PLURAL_ICON = '/plrl-dark.png'
3+
export const PLURAL_WORD = '/plural-white-word.png'
4+
export const PLURAL_MARK = '/plural-logo.png'
5+
export const PLURAL_MARK_WHITE = '/plural-white.png'
6+
export const PLURAL_FULL_LOGO_WHITE = '/plural-full-logo-white.svg'
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
export const ZOOM_INSTALL_URL = 'https://zoom.us/oauth/authorize?response_type=code&client_id=UvFM_sz_Tx2wn8N5HjA8Sg&redirect_uri={redirect_uri}'
2-
export const ZOOM_ICON = `${process.env.PUBLIC_URL}/zoom.svg`
2+
export const ZOOM_ICON = '/zoom.svg'

www/src/components/layout/ApplicationLayout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ function ServiceAccountBanner({ previousUser }: any) {
4747

4848
function ApplicationLayout({ children }: any) {
4949
const previousUser = getPreviousUserData()
50-
const isProduction = process.env.NODE_ENV === 'production'
50+
const isProduction = import.meta.env.MODE === 'production'
5151

5252
return (
5353
<Flex

www/src/components/repos/constants.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
export const DEFAULT_CHART_ICON = `${process.env.PUBLIC_URL}/chart.png`
2-
export const DEFAULT_TF_ICON = `${process.env.PUBLIC_URL}/terraform.png`
3-
export const DEFAULT_DKR_ICON = `${process.env.PUBLIC_URL}/docker.png`
4-
export const DEFAULT_GCP_ICON = `${process.env.PUBLIC_URL}/gcp.png`
5-
export const DEFAULT_AZURE_ICON = `${process.env.PUBLIC_URL}/azure.png`
6-
export const DEFAULT_AWS_ICON = `${process.env.PUBLIC_URL}/aws.png`
7-
export const DEFAULT_EQUINIX_ICON = `${process.env.PUBLIC_URL}/equinix-metal.png`
8-
export const DEFAULT_KIND_ICON = `${process.env.PUBLIC_URL}/kind.png`
9-
export const DARK_AWS_ICON = `${process.env.PUBLIC_URL}/aws-icon.png`
1+
export const DEFAULT_CHART_ICON = '/chart.png'
2+
export const DEFAULT_TF_ICON = '/terraform.png'
3+
export const DEFAULT_DKR_ICON = '/docker.png'
4+
export const DEFAULT_GCP_ICON = '/gcp.png'
5+
export const DEFAULT_AZURE_ICON = '/azure.png'
6+
export const DEFAULT_AWS_ICON = '/aws.png'
7+
export const DEFAULT_EQUINIX_ICON = '/equinix-metal.png'
8+
export const DEFAULT_KIND_ICON = '/kind.png'
9+
export const DARK_AWS_ICON = '/aws-icon.png'
1010

1111
export const ProviderIcons = {
1212
GCP: DEFAULT_GCP_ICON,

0 commit comments

Comments
 (0)