https://github.com/nichoth/template-tonic-spa
Tonic + client-side routing
https://github.com/nichoth/template-tonic-spa
Last synced: over 1 year ago
JSON representation
Tonic + client-side routing
- Host: GitHub
- URL: https://github.com/nichoth/template-tonic-spa
- Owner: nichoth
- Created: 2023-05-25T02:29:05.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-06T04:25:41.000Z (over 1 year ago)
- Last Synced: 2024-12-19T01:32:48.907Z (over 1 year ago)
- Language: JavaScript
- Size: 1.33 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# template tonic
An example of [tonic](https://tonicframework.dev/) + client-side routing.
## use
1. Use the *template* button in github. Or clone this then `rm -rf .git && git init`. Then `npm i && npm init`.
2. Edit the source code in `src/index.js`.
3. start a local server
```bash
npm start
```
## see a demonstration
[template-tonic-spa.netlify.app](https://template-tonic-spa.netlify.app/)
## featuring
* `preversion` npm hook -- use [@nichoth/check-max-deps](https://github.com/nichoth/check-max-deps) to validate the number of dependencies, and lint.
* eslint via [standardx](https://www.npmjs.com/package/standardx) -- `npm run lint`
* type checking via a [jsconfig](https://code.visualstudio.com/docs/languages/jsconfig) file
## Start a local development server
```bash
npm start
```
## build
Create a static website in `public`
```bash
npm run build
```
## structure
This uses client side routing and the [single page app pattern](https://developer.mozilla.org/en-US/docs/Glossary/SPA). You would want to serve the same html for any route that is requested.
We are using application state in the root component
```js
this.state = {
route: (location.pathname + location.search),
count: 0
}
```
And passing state to child components as props:
```js
this.html``
```
This means that the state persists between route changes.
## vite
This uses [vite](https://vitejs.dev/) as a development server. This makes it easy to develop as a single page app.
## ESM
We are depending on the browser resolving ES modules. The module `@nichoth/tonic` is marked as external in the vite config:
```js
{
build: {
rollupOptions: {
external: ['@nichoth/tonic']
}
}
}
```
This pairs with our html file:
```html
{
"imports": {
"@nichoth/tonic": "./tonic.min.js"
}
}
```
[See an article about import maps](https://www.honeybadger.io/blog/import-maps/)
## test
```sh
npm test
```