Skip to content

Commit 7c96388

Browse files
jhgilbertjhgilbert
committed
Initial commit
0 parents  commit 7c96388

35 files changed

+6468
-0
lines changed

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Jennifer H. Gilbert
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎app/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
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?

‎app/LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Jennifer H. Gilbert
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎app/README.md

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Starter React app that builds as a single HTML file
2+
3+
An app written with React, TypeScript, and Vite that builds as a single `index.html` file.
4+
5+
A one-file bundle doesn't make sense for most production applications, but it's handy for creating internal tools and prototypes that are easy to share, with no env setup required.
6+
7+
## UX components and styles
8+
9+
The project has ready-to-use UI components such as buttons and tabs, thanks to [Material UI](https://mui.com/material-ui). It also includes [Emotion](https://emotion.sh/docs/introduction) for styling your own components.
10+
11+
## Data storage and access
12+
13+
The app can access and use any data you provide in JSON format. The app can't write persistent data, though you could use something like `localStorage` for that if you needed to.
14+
15+
The app's "database" is [a `.ts` file](src/db.ts) that you can update with your own data (or replace programmatically) before building the app. Any data you store in that file will be available in [the `App` component](src/App.tsx) as `dbData`.
16+
17+
## Limitations
18+
19+
The app uses [vite-plugin-singlefile](https://github.com/richardtallent/vite-plugin-singlefile) (thanks, Richard Tallent!), so any limitations documented in the plugin's README apply to this app as well.
20+
21+
## Setup and usage instructions
22+
23+
### 1. Clone the repository
24+
25+
```shell
26+
git clone [email protected]:jhgilbert/single-file-react-app.git
27+
cd single-file-react-app
28+
```
29+
30+
### 2. Install dependencies
31+
32+
```shell
33+
npm install
34+
```
35+
36+
### 3. Run the development version
37+
38+
```shell
39+
npm run dev
40+
```
41+
42+
You should see output that looks something like this:
43+
44+
```shell
45+
VITE v5.4.10 ready in 92 ms
46+
47+
➜ Local: http://localhost:5173/
48+
➜ Network: use --host to expose
49+
➜ press h + enter to show help
50+
```
51+
52+
In your browser, visit the provided address (`http://localhost:5173` in the above example), and you should see a demo page.
53+
54+
### 4. Make and preview changes
55+
56+
Try changing some of the verbiage in `src/App.tsx`. The app should immediately reload, and you should see the changes in your browser.
57+
58+
### 5. Build and start the "production" version of the app
59+
60+
Run `npm run prod` to build the `dist/index.html` file as it will work in production. `dist/index.html` contains all of the code necessary to run your app, and opens in your browser automatically once the build is finished.
61+
62+
To just build the file without launching it, you can use `npm run build` instead.
63+
64+
### 6. Share the app
65+
66+
Once you've verified in staging that the file is working as expected, it's ready to be shared. **Make sure to share `dist/index.html`, not the root `index.html`.** The latter file is compiled to `dist/index.html` in the build process.

‎app/eslint.config.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎app/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Single-file app</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)