https://github.com/grossacasac/create-dom99-app
An opinionated starter pack for front end web development
https://github.com/grossacasac/create-dom99-app
frontend hacktoberfest javascript multipage-application starter web
Last synced: about 1 year ago
JSON representation
An opinionated starter pack for front end web development
- Host: GitHub
- URL: https://github.com/grossacasac/create-dom99-app
- Owner: GrosSacASac
- License: cc0-1.0
- Created: 2018-01-04T18:53:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-10-27T13:07:34.000Z (over 3 years ago)
- Last Synced: 2025-03-23T22:38:48.920Z (about 1 year ago)
- Topics: frontend, hacktoberfest, javascript, multipage-application, starter, web
- Language: JavaScript
- Homepage:
- Size: 1.08 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: license.txt
Awesome Lists containing this project
README
# create-dom99-app
## An opinionated starter pack for front end web development
Made for static Single page apps. Get started with files and structure ready.
## What is included
### Application architecture
[core](https://github.com/mauriciosoares/core.js)
### DOM manipulation
[dom99](https://dom99.now.sh/)
### Linting
[eslint](https://eslint.org/)
### Testing
[AVA](https://github.com/avajs/ava)
### Zero second compile time during development
When developing, thanks to ES-modules there is no need to run a bundler, just refresh your browser to see changes.
## How to
### Requirements
Node 14+
### Download
Download on [github.com/GrosSacASac/create-dom99-app](https://github.com/GrosSacASac/create-dom99-app/archive/master.zip)
### Install dependencies
`npm ci`
### Edit files
Edit files in `source/`
#### How to create a new html page
* Create a new html file next to index.html, for example game.html
* Create a new css file next to index.css, for example game.css
#### How to create reusable components
* Create a folder of the component name inside source/components
* Create a html file with the template of the component for example source/components/superParagrah.html
* Optional, create a css and js file in the same folder
#### How to use a reusable component
* Inside your html import it with ``
* _Optional_ inside your css of the page or pages that is using it import its stylesheet with `@import '../components/superParagraph/superParagraph.css';`
* _Optional_ inside your js main of the page or pages that is using it import its js file with `import * as superParagraph from "../components/superParagraph/superParagraph.js";` and use it
### Dev
To enable auto reload on file change use
`npm run serve-dev`
Open http://localhost:8080/ (`source/index.html`)
### How does it work without compilation step ?
Html includes are handled by `tools/inlineHTMLRuntime.js`. It inlines every imported html file. It checks for `type="text/html"` and `src`. Open [`source/index.html`](./source/index.html) for an example.
```
```
JS and CSS modules are handled by the browser natively.
## Build for production
`npm run build-prod`
The results will be in `built/`
The results must be served as top level url.
`npm run serve-prod`
Or as individual commands
`npm run inline-html`
This will run `tools/inlineHTML.js` which is almost like its runtime counterpart, except that it creates a new file with every import inlined to avoid network requests.
`npm run static-copies`
Copy static assets
`npm run bundle-js`
This will run rollup, so that JS files also have their imports resolved to avoid network requests. It also minfies files.
## Linting
`npm run lint`
and
`npm run lint-fix` to automatically fix some issues
## Testing
`npm test`
## License
[CC0](./license.txt)
Dependencies may have other licenses. Feel free to change the license after you downloaded this starter pack for a new project.