Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrewlevada/webpack-lit-template
Starter template of multipage application on Lit build with Webpack
https://github.com/andrewlevada/webpack-lit-template
Last synced: 3 months ago
JSON representation
Starter template of multipage application on Lit build with Webpack
- Host: GitHub
- URL: https://github.com/andrewlevada/webpack-lit-template
- Owner: andrewlevada
- License: mit
- Created: 2021-01-15T14:52:00.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-01-12T07:22:34.000Z (6 months ago)
- Last Synced: 2024-01-23T04:19:54.064Z (5 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.34 MB
- Stars: 9
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-lit - Lit Webpack Starter - Starter for multipage apps with Lit and Typescript, using Webpack. (Starter Templates)
README
# Lit Webpack Project Starter
This project can be used as starting point for creating a multipage application with Lit. It also uses Typescript, Webpack and SCSS.
Fell free to clone it and start your project with bundle build configuration what works like a charm out of the box.
## Structure
Folders and files in this project:
1. `/src/pages` - all pages are stored here as top level components (it's recommended to add postfix `page` to every component's name in this folder). Webpack will generate html file for every mapped *(read later about this)* file from this folder and place page component in body.
2. `/src/pages/base.html` - base html file used for page generation (add `` and `` tags here)
3. `/src/components` - all other components in the project (not pages)
4. `/src/services` - place for logic (requests to api, algorithms, etc.)
5. `/src/utils` - place for useful function that can be used anywhere in project
6. `/src/assets/styles` - global styles (theming, layouts, mixins, etc.) - it's recommended to split global styles in different files here because tree-shaking will only remove entire files (not parts of files)
7. `/src/assets/to-root` - on build contents from this folder are copied to the root of the build (useful for files like `robots.txt` and `favicon.ico`)
8. `/src/global.ts` - contains global variables, styles for all components/pages and globally executed scripts, for example analytics
9. `/router.js` - this file is used to map urls to top level components (pages). Don't forget to change it each time you add a page or remove one.
## Setup
Install dependencies:
```bash
npm i
```
Don't forget to change name of the project in `package.json`!
## Dev Server
To start the dev server run (by default on _localhost:2797_):
```bash
npm run dev
```
## Build
In this repo TypeScript compiler is used to produce JavaScript that runs in modern browsers.
Also, ESLint is used along with it - they are executed in fix mode before every build.
So, you might want to configure linting rules in `.eslintrc.js` to make them fit your code style.
To build full app bundle (output files will be in _build_ folder) run:
```bash
npm run build
```
You can also generate build and _stats.json_ file, that can later be used for bundle analysis ([this tool](https://alexkuz.github.io/webpack-chart/) is my favourite):
```bash
npm run build:stats
```