webproj v0.0.14

webproj

Toolkits for build web application

The keywords:

• TypeScript
• Scss
• Webpack
• Jest
• VSCode
• Chrome

Getting start

Step1: Initial the folder structs

# npm
npm create tcaer
# yarn
yarn create tcaer

Step2: Start dev server

via docker

docker run --rm -v .:/app -p 8080:8080 hairyrabbit/tcaer

via pnpm

pnpm i && pnpm run dev

Step3: Open vscode editor

code .

Step4: Open browser

open http://localhost:8080

Folder struct

|- root/                    # App root
  |- src/                   # Sources
    |- style/               # Styles
      |- util/              # Style utils, for import by other style file
        |- _example.scss    # Example of util style file
      |- index.scss         # The global style
      |- var.yaml           # The gloabl variable, transform to css variable and mount to `:root` selector
    |- page/                # Page route entry will automate code split
      |- ExamplePage
        |- index.tsx        # Page entry scripts
        |- style.scss       # Page styles
    |- index.js             # The main app entry
  |- asset/                 # Static files
    |- icon/                # Icons, svg format files
    |- logo/                # App logo icon or web favicons
    |- image/               # Pictures
    |- font/                # Font files
    |- audio/               # Audio files
    |- video/               # Video files
  |- .editorconfig          # Editorconfig plugin config
  |- .gitignore             # Git ignore config
  |- tsconfig.ts            # Typescript project config
  |- react.ts               # tcaer config
  |- package.json           # package config

Typescript

TODO

Style

TODO

VSCode

TODO

Chrome

TODO