Skip to content
This repository was archived by the owner on Jul 3, 2023. It is now read-only.

Commit bcf80ff

Browse files
kjesvalekjesvale
authored
Bytt fra CRA til Vite (#104)
* Bytt fra CRA til Vite * Deploy til dev * Fiks jest * Fiks serving av filer * Fjern react-scripts * Fjern craco-less
1 parent 9150ebe commit bcf80ff

21 files changed

+9821
-25678
lines changed

‎.github/workflows/deploy.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ jobs:
4646
deploy-til-dev:
4747
name: Deploy til dev-gcp
4848
needs: bygg-og-push-docker-image
49-
if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/importer-statistikk-med-vite'
49+
if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/vite'
5050
runs-on: ubuntu-latest
5151
steps:
5252
- uses: actions/checkout@v3

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ node_modules
1010

1111
# production
1212
/build
13+
/dist
1314
/server/build
1415

1516
# misc

‎Dockerfile

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ FROM navikt/node-express:16
22

33
WORKDIR /var
44

5-
COPY build/ build/
5+
COPY dist/ dist/
66
COPY server/build server/
77
copy server/node_modules server/node_modules
88

‎craco.config.js

-5
This file was deleted.

‎index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="no">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="description" content="Rekrutteringsbistand, et arbeidsmobiliseringsverktøy" />
7+
<title>Rekrutteringsbistand</title>
8+
</head>
9+
<body>
10+
<noscript>Du må skru på JavaScript for å kunne bruke Rekrutteringsbistand.</noscript>
11+
<div id="rekrutteringsbistand-container"></div>
12+
13+
<script type="module" src="/src/index.tsx"></script>
14+
</body>
15+
</html>

‎jest.config.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
preset: 'ts-jest',
3+
testEnvironment: 'node',
4+
transform: {
5+
'^.+\\.ts?$': 'ts-jest',
6+
},
7+
transformIgnorePatterns: ['<rootDir>/node_modules/'],
8+
};

‎package-lock.json

+9,696-25,544
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+27-34
Original file line numberDiff line numberDiff line change
@@ -3,52 +3,34 @@
33
"version": "0.1.0",
44
"private": true,
55
"homepage": "/",
6+
"scripts": {
7+
"start": "cross-env VITE_MOCK=true vite",
8+
"build": "vite build",
9+
"test": "jest src",
10+
"prepare": "husky install"
11+
},
612
"dependencies": {
713
"@navikt/ds-css": "^1.4.0",
814
"@navikt/ds-react": "^1.4.0",
915
"@navikt/navspa": "^6.0.1",
16+
"@vitejs/plugin-react": "^3.1.0",
1017
"amplitude-js": "^8.21.2",
18+
"cross-env": "^7.0.3",
1119
"history": "^5.3.0",
20+
"jest": "^29.5.0",
1221
"loadjs": "^4.2.0",
1322
"react": "^18.2.0",
1423
"react-dom": "^18.2.0",
15-
"react-router-dom": "^6.4.2"
16-
},
17-
"scripts": {
18-
"start": "BROWSER=none react-scripts start",
19-
"start:import": "BROWSER=none REACT_APP_IMPORT=true REACT_APP_MOCK=true react-scripts start",
20-
"start:mock": "BROWSER=none REACT_APP_MOCK=true react-scripts start",
21-
"build": "react-scripts build",
22-
"test": "react-scripts test",
23-
"eject": "react-scripts eject",
24-
"prepare": "husky install"
25-
},
26-
"eslintConfig": {
27-
"extends": [
28-
"react-app",
29-
"prettier"
30-
]
31-
},
32-
"prettier": {
33-
"tabWidth": 4,
34-
"trailingComma": "es5",
35-
"singleQuote": true,
36-
"printWidth": 100
37-
},
38-
"browserslist": {
39-
"production": [
40-
">0.2%",
41-
"not dead",
42-
"not op_mini all"
43-
],
44-
"development": [
45-
"last 1 chrome version",
46-
"last 1 firefox version"
47-
]
24+
"react-router-dom": "^6.4.2",
25+
"ts-jest": "^29.1.0",
26+
"vite": "^4.3.0",
27+
"vite-plugin-svgr": "^2.4.0"
4828
},
4929
"devDependencies": {
30+
"@jest/globals": "^29.5.0",
5031
"@types/amplitude-js": "^8.16.2",
5132
"@types/express": "^4.17.14",
33+
"@types/jest": "^29.5.1",
5234
"@types/loadjs": "^4.0.0",
5335
"@types/react": "^18.0.24",
5436
"@types/react-dom": "^18.0.8",
@@ -59,7 +41,18 @@
5941
"husky": "^8.0.1",
6042
"prettier": "^2.7.1",
6143
"pretty-quick": "^3.1.3",
62-
"react-scripts": "^5.0.1",
6344
"typescript": "^4.8.4"
45+
},
46+
"eslintConfig": {
47+
"extends": [
48+
"react-app",
49+
"prettier"
50+
]
51+
},
52+
"prettier": {
53+
"tabWidth": 4,
54+
"trailingComma": "es5",
55+
"singleQuote": true,
56+
"printWidth": 100
6457
}
6558
}

‎public/index.html

-24
This file was deleted.

‎server/src/server.ts

+3-7
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { logger } from './logger';
1414
export const app = express();
1515

1616
const port = process.env.PORT || 8080;
17-
const buildPath = path.join(__dirname, '../build');
17+
const buildPath = path.join(__dirname, '../dist');
1818
const cluster = process.env.NAIS_CLUSTER_NAME;
1919
const clusterOnPrem = cluster === 'prod-gcp' ? 'prod-fss' : 'dev-fss';
2020
export const miljøErProd = cluster === 'prod-gcp' || cluster === 'prod-fss';
@@ -54,11 +54,6 @@ const startServer = () => {
5454

5555
app.get([`/internal/isAlive`, `/internal/isReady`], (_, res) => res.sendStatus(200));
5656

57-
const pathsForServingApp = ['/', '/*'];
58-
59-
app.use('/static/js', express.static(`${buildPath}/static/js`));
60-
app.use('/static/css', express.static(`${buildPath}/static/css`));
61-
6257
app.get(
6358
'/feature-toggle/kandidatmatch',
6459
respondUnauthorizedIfNotLoggedIn,
@@ -93,7 +88,8 @@ const startServer = () => {
9388
OPEN_SEARCH_PASSWORD
9489
);
9590

96-
app.get(pathsForServingApp, redirectIfUnauthorized, (_, res) => {
91+
app.use(`/assets`, express.static(`${buildPath}/assets`));
92+
app.get(['/', '/*'], redirectIfUnauthorized, (_, res) => {
9793
res.sendFile(`${buildPath}/index.html`);
9894
});
9995

‎src/amplitude.ts

+9-7
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,12 @@ export const sendGenerellEvent = (
4444

4545
const client: AmplitudeClient = amplitudeJs.getInstance();
4646

47-
client.init(getApiKey(), '', {
48-
apiEndpoint: 'amplitude.nav.no/collect',
49-
saveEvents: false,
50-
includeUtm: true,
51-
batchEvents: false,
52-
includeReferrer: false,
53-
});
47+
if (import.meta.env.PROD) {
48+
client.init(getApiKey(), '', {
49+
apiEndpoint: 'amplitude.nav.no/collect',
50+
saveEvents: false,
51+
includeUtm: true,
52+
batchEvents: false,
53+
includeReferrer: false,
54+
});
55+
}

‎src/index.css

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '@navikt/ds-css' layer(designsystem);
2+
13
body {
24
margin: 0;
35
background-color: var(--navds-semantic-color-canvas-background);

‎src/index.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,20 @@ import { createRoot } from 'react-dom/client';
44
import ContainerRouter from './ContainerRouter';
55
import App from './App';
66
import './index.css';
7-
import '@navikt/ds-css';
8-
9-
if (process.env.REACT_APP_MOCK) {
10-
require('./mock/mock-api');
11-
}
127

138
const container = document.getElementById('rekrutteringsbistand-container');
149
const root = createRoot(container!);
1510

1611
const history = createBrowserHistory();
1712

13+
const setupMock = async () => {
14+
await import('./mock/mock-api');
15+
};
16+
17+
if (import.meta.env.VITE_MOCK) {
18+
setupMock();
19+
}
20+
1821
root.render(
1922
<React.StrictMode>
2023
<ContainerRouter history={history}>

‎src/microfrontends/assetManifestUtils.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export type ViteAssetManifest = Record<
1010
{
1111
file: string;
1212
css: string[];
13+
assets?: string[];
1314
}
1415
>;
1516

@@ -49,10 +50,11 @@ export const craAssetManifestParser = (manifestObject: ManifestObject): Asset[]
4950
export const viteAssetManifestParser =
5051
(appBaseUrl: string = '') =>
5152
(manifestObject: ViteAssetManifest): Asset[] => {
52-
const { file, css } = manifestObject['index.html'];
53+
const { file, css, assets } = manifestObject['index.html'];
5354

5455
const script = { type: 'module', path: `/${appBaseUrl}/${file}` };
5556
const styles = css.map((path) => ({ path: `/${appBaseUrl}/${path}` }));
57+
const otherAssets = (assets ?? []).map((path) => ({ path: `/${appBaseUrl}/${path}` }));
5658

57-
return [script, ...styles];
59+
return [script, ...styles, ...otherAssets];
5860
};

‎src/microfrontends/microfrontends.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { Loader } from '@navikt/ds-react';
33
import { AsyncNavspa } from '@navikt/navspa';
44

55
import { craAssetManifestParser, viteAssetManifestParser } from './assetManifestUtils';
6-
import css from './microfrontends.module.css';
76
import { History } from 'history';
7+
import css from './microfrontends.module.css';
88

99
type FellesMicrofrontendProps = {
1010
navKontor: string | null;

‎src/modia/Modiadekoratør.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const Modiadekoratør: FunctionComponent<Props> = ({ navKontor, onNavKontorChang
6161
}
6262
}, []);
6363

64-
const className = process.env.REACT_APP_MOCK ? css.mocket : undefined;
64+
const className = import.meta.env.VITE_MOCK ? css.mocket : undefined;
6565

6666
if (status === Status.LasterNed) {
6767
return <div className={css.placeholder} />;

‎src/react-app-env.d.ts

-1
This file was deleted.

‎src/setupProxy.js

-21
This file was deleted.

‎src/utils/path.test.js ‎src/utils/path.test.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { expect, test } from '@jest/globals';
12
import { generaliserPath } from './path';
23

34
test('generaliserPath erstatter kandidatnumre med en placeholder', () => {

‎tsconfig.json

+22-24
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
11
{
2-
"compilerOptions": {
3-
"target": "es5",
4-
"lib": [
5-
"dom",
6-
"dom.iterable",
7-
"esnext"
8-
],
9-
"allowJs": true,
10-
"skipLibCheck": true,
11-
"esModuleInterop": true,
12-
"allowSyntheticDefaultImports": true,
13-
"strict": true,
14-
"forceConsistentCasingInFileNames": true,
15-
"module": "esnext",
16-
"moduleResolution": "node",
17-
"resolveJsonModule": true,
18-
"isolatedModules": true,
19-
"noEmit": true,
20-
"jsx": "react-jsx",
21-
"noFallthroughCasesInSwitch": true
22-
},
23-
"include": [
24-
"src"
25-
]
2+
"compilerOptions": {
3+
"outDir": "./dist/",
4+
"sourceMap": true,
5+
"strictNullChecks": true,
6+
"module": "ESNext",
7+
"types": ["jest", "vite/client", "vite-plugin-svgr/client"],
8+
"jsx": "react-jsx",
9+
"target": "ESNext",
10+
"allowJs": true,
11+
"strict": false,
12+
"moduleResolution": "node",
13+
"resolveJsonModule": true,
14+
"allowSyntheticDefaultImports": true,
15+
"lib": ["es7", "dom"],
16+
"skipLibCheck": true,
17+
"esModuleInterop": true,
18+
"forceConsistentCasingInFileNames": true,
19+
"noFallthroughCasesInSwitch": true,
20+
"isolatedModules": true,
21+
"noEmit": true
22+
},
23+
"include": ["./src/"]
2624
}

‎vite.config.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { defineConfig } from 'vite';
2+
import react from '@vitejs/plugin-react';
3+
import svgrPlugin from 'vite-plugin-svgr';
4+
5+
export default defineConfig(({ mode }) => {
6+
return {
7+
plugins: [react(), svgrPlugin()],
8+
server: {
9+
port: 3000,
10+
proxy: {
11+
'/kandidatsok-proxy': 'http://localhost:3005/kandidatsok-proxy',
12+
13+
'/rekrutteringsbistand-statistikk': 'http://localhost:3001',
14+
'/rekrutteringsbistand-stilling': 'http://localhost:3002',
15+
'/rekrutteringsbistand-kandidat': 'http://localhost:3003',
16+
'/rekrutteringsbistand-stillingssok': 'http://localhost:3004',
17+
'/rekrutteringsbistand-kandidatsok': 'http://localhost:3005',
18+
},
19+
},
20+
};
21+
});

0 commit comments

Comments
 (0)