zcemycl / webpack-ts-mpa-example

Looking for best practice in creating github pages with html css and vanilla typescript.

Multipages Application with Typescript and Webpack

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
2. How to use ESLint with TypeScript
3. Linting in TypeScript using ESLint and Prettier
4. Create a Pre-commit Git Hook to Check and Fix Your JavaScript/TypeScript Code Automatically