https://github.com/zcemycl/webpack-ts-mpa-example
Looking for best practice in creating github pages with html css and vanilla typescript.
https://github.com/zcemycl/webpack-ts-mpa-example
abtesting bootstrap cypress eslint expressjs github-pages htmlwebpackplugin husky javascript jest minicssextractplugin model-view-controller node prettier puppeteer typescript vaniila-javascript vanilla-typescript webpack webpack-merge
Last synced: 3 months ago
JSON representation
Looking for best practice in creating github pages with html css and vanilla typescript.
- Host: GitHub
- URL: https://github.com/zcemycl/webpack-ts-mpa-example
- Owner: zcemycl
- Created: 2022-09-12T21:40:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-30T23:30:18.000Z (over 2 years ago)
- Last Synced: 2025-02-17T10:53:21.449Z (3 months ago)
- Topics: abtesting, bootstrap, cypress, eslint, expressjs, github-pages, htmlwebpackplugin, husky, javascript, jest, minicssextractplugin, model-view-controller, node, prettier, puppeteer, typescript, vaniila-javascript, vanilla-typescript, webpack, webpack-merge
- Language: TypeScript
- Homepage: https://zcemycl.github.io/webpack-ts-mpa-example/
- Size: 2.96 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Multipages Application with Typescript and Webpack
 [](https://coveralls.io/github/zcemycl/webpack-ts-mpa-example?branch=main)
#### Project Structure
```
├── assets # css
│ ├── components
│ └── pages # @import components
│ ├── index.css
│ └── page1
│ ├── index-lg.css
│ ├── index-sm.css
│ ├── index-md.css
│ └── index.css # all @imports
├── dist # after build
│ ├── index.html # link one 1 js and 1 css
│ ├── index.bundle.js # group mvc
│ ├── index.css # many css to 1 css
│ └── page1
│ ├── index.html
│ ├── index.bundle.js
│ └── index.css
├── public # html
│ ├── components
│ └── pages # require partial/components
│ ├── index.html # require partial
│ ├── partial1.html
│ ├── partial2.html
│ └── page1
│ └── index.html
└── src # ts
├── utils # reusable
└── pages
├── index.ts # import mvc
├── index.model.ts
├── index.view.ts
├── index.control.ts
└── page1
├── index.ts
├── index.model.ts
├── index.view.ts
└── index.control.ts
```
Follow-ups: gif,jpg,jpeg,png?
#### Techniques
1. Model View Controller (MVC)
2. Jest for unit and mock testings
3. Puppeteer for e2e testing
4. Webpack
5. MultiPages Application
6. Github action to deploy github pages
7. Typescript
8. ESLint
9. Prettier
10. Cypress for e2e testing
#### Tools
1. Bash script for creating new page.
```
./setup_newpage.sh newpagename standard
```
### References
1. [Define global variable with webpack](https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack)
2. [How to use ESLint with TypeScript](https://khalilstemmler.com/blogs/typescript/eslint-for-typescript/)
3. [Linting in TypeScript using ESLint and Prettier](https://blog.logrocket.com/linting-typescript-eslint-prettier/)
4. [Create a Pre-commit Git Hook to Check and Fix Your JavaScript/TypeScript Code Automatically](https://javascript.plainenglish.io/create-a-pre-commit-git-hook-to-check-and-fix-your-javascript-typescript-code-b04de61834bd)