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

DOM manipulation

dom99

Linting

eslint

Testing

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

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 <script type="text/html" src="components/superParagraph/superParagraph.html"></script>
• 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 for an example.

<script type="text/html" src="html/superParagraph.html"></script>

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

Dependencies may have other licenses. Feel free to change the license after you downloaded this starter pack for a new project.