-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9c9aa17
commit 93799a6
Showing
6 changed files
with
807 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
<!DOCTYPE html> | ||
<html lang="en" dir="ltr"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<meta | ||
name="viewport" | ||
content="width=device-width, initial-scale=1, shrink-to-fit=no" | ||
/> | ||
<meta name="theme-color" content="#ffffff" /> | ||
|
||
<!-- Injection point for base URL from backend --> | ||
<meta name="dhis2-base-url" content="__DHIS2_BASE_URL__" /> | ||
|
||
<!-- | ||
manifest.json provides metadata used when your web app is installed on a | ||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ | ||
--> | ||
<link | ||
rel="manifest" | ||
crossorigin="use-credentials" | ||
href="/manifest.json" | ||
/> | ||
<meta name="msapplication-config" content="browserconfig.xml" /> | ||
|
||
<link rel="icon" href="/favicon.ico" /> | ||
<link | ||
rel="apple-touch-icon" | ||
sizes="180x180" | ||
href="/apple-touch-icon.png" | ||
/> | ||
<link | ||
rel="icon" | ||
type="image/png" | ||
sizes="48x48" | ||
href="/favicon-48x48.png" | ||
/> | ||
<link | ||
rel="icon" | ||
type="image/png" | ||
sizes="32x32" | ||
href="/favicon-32x32.png" | ||
/> | ||
<link | ||
rel="icon" | ||
type="image/png" | ||
sizes="16x16" | ||
href="/favicon-16x16.png" | ||
/> | ||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#235b8b" /> | ||
|
||
<title>%REACT_APP_DHIS2_APP_NAME% | DHIS2</title> | ||
</head> | ||
<body> | ||
<noscript>You need to enable JavaScript to run this app.</noscript> | ||
<div id="dhis2-app-root"></div> | ||
<div id="dhis2-portal-root"></div> | ||
|
||
<!-- The entrypoint for Vite --> | ||
<script type="module" src="./src/index.js"></script> | ||
|
||
<!-- | ||
This HTML file is a template. | ||
If you open it directly in the browser, you will see an empty page. | ||
You can add webfonts, meta tags, or analytics to this file. | ||
The build step will place the bundled scripts into the <body> tag. | ||
To begin the development, run `npm start` or `yarn start`. | ||
To create a production bundle, use `npm run build` or `yarn build`. | ||
--> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
import { resolve } from 'path' | ||
import react from '@vitejs/plugin-react' | ||
import { defineConfig, loadEnv, transformWithEsbuild } from 'vite' | ||
|
||
// https://vitejs.dev/config/ | ||
export default defineConfig(({ mode }) => { | ||
// https://vitejs.dev/config/#using-environment-variables-in-config | ||
const env = loadEnv(mode, process.cwd(), ['REACT_APP', 'NODE_ENV']) | ||
|
||
// WIP | ||
// Use individual properties for drop-in replacements instead of a whole | ||
// object, which allows for better code trimming optimizations | ||
const defineOptions = {} | ||
Object.entries(env).forEach(([key, val]) => { | ||
defineOptions[`process.env.${key}`] = JSON.stringify(val) | ||
}) | ||
console.log({ env, defineOptions }) | ||
|
||
return { | ||
plugins: [ | ||
{ | ||
name: 'treat-js-files-as-jsx', | ||
async transform(code, id) { | ||
if (!id.match(/src\/.*\.js$/)) { | ||
return null | ||
} | ||
|
||
// Use the exposed transform from vite, instead of directly | ||
// transforming with esbuild | ||
return transformWithEsbuild(code, id, { | ||
loader: 'jsx', | ||
jsx: 'automatic', | ||
}) | ||
}, | ||
}, | ||
react(), | ||
], | ||
|
||
// By default, assets are resolved to the root of the domain ('/'), but | ||
// deployed apps aren't served from there. | ||
// This option is basically the same as PUBLIC_URL for CRA and Parcel. | ||
// Works for both dev and production. | ||
base: './', | ||
|
||
// Change default ENV prefix from VITE_ to be backward compatible with CRA | ||
// https://vitejs.dev/config/shared-options.html#envprefix | ||
envPrefix: 'REACT_APP', | ||
|
||
// Need to add vars on process.env here -- drop-in replacement | ||
define: defineOptions, | ||
|
||
build: { | ||
rollupOptions: { | ||
input: { | ||
main: resolve(__dirname, 'index.html'), | ||
// Build an optional plugin -- shares code with main app | ||
// TODO: Dynamically build a plugin, based on context | ||
// plugin: resolve(__dirname, 'plugin.html'), | ||
// TODO: Build the service worker | ||
// 'service-worker': resolve( | ||
// __dirname, | ||
// 'src/service-worker.js' | ||
// ), | ||
}, | ||
output: { | ||
// Make sure the service worker output file has the right name | ||
entryFileNames: (assetInfo) => | ||
assetInfo.name === 'service-worker' | ||
? '[name].js' | ||
: 'assets/[name]-[hash].js', | ||
}, | ||
}, | ||
}, | ||
|
||
optimizeDeps: { | ||
force: true, | ||
esbuildOptions: { | ||
loader: { | ||
'.js': 'jsx', | ||
}, | ||
}, | ||
}, | ||
|
||
// Allow JSX in .js files (at the cost of performance): | ||
// https://stackoverflow.com/a/74620428 | ||
// todo: (switching JSX files to .jsx to not need this allows optimization): | ||
// https://twitter.com/youyuxi/status/1362050255009816577 | ||
// esbuild: { | ||
// loader: 'jsx', | ||
// include: [ | ||
// // Business as usual for .jsx and .tsx files | ||
// 'src/**/*.jsx', | ||
// 'src/**/*.tsx', | ||
// 'node_modules/**/*.jsx', | ||
// 'node_modules/**/*.tsx', | ||
|
||
// // Optional: Add the specific files you want to allow JSX syntax in | ||
// // "src/LocalJsxInJsComponent.js", | ||
// // "node_modules/bad-jsx-in-js-component/js/BadJSXinJS.js", | ||
// // "node_modules/bad-jsx-in-js-component/ts/BadTSXInTs.ts", | ||
|
||
// // Add these lines to allow all .js files to contain JSX | ||
// 'src/**/*.js', | ||
// 'node_modules/**/*.js', | ||
|
||
// // Add these lines to allow all .ts files to contain JSX | ||
// 'src/**/*.ts', | ||
// 'node_modules/**/*.ts', | ||
// ], | ||
// exclude: [], | ||
// ensure React is imported in files with JSX | ||
// jsx: 'automatic', | ||
// }, | ||
} | ||
}) |
Oops, something went wrong.