A boilerplate to provide a starting point for developing TypeScript applications. It includes support for package management with pnpm, build automation with Rollup, testing with Jest, and CSS Modules with SCSS for enhanced styling capabilities.
- TypeScript
- Ready to use test suite with TypeScript and Jest
- CSS module with scss out of the box and auto class name conversion (
.demo-class
→demoClass
). - Ready to use bundling systems (production and development).
- Development server with hot reloading.
- Easy assets management
- Custom path alias
- Generate production ready static site.
To use this boilerplate, follow the steps below:
-
Clone the repository:
git clone https://github.com/hein-htut-aung/create-typescript-app.git
-
Change into the project directory:
cd create-typescript-app
-
Install dependencies using pnpm:
pnpm install
-
Run development server:
pnpm dev
-
To view the running application, open your web browser and navigate to
http://localhost:10001
.
pnpm dev
: Starts the development server with live reloading.pnpm prod
: Builds the project for production.pnpm test
: Runs the test suite.
├── src
│ ├── demo
│ │ └── styles.scss
│ │ └── index.ts
│ ├── main.ts
├── public
│ ├── index.html.js
│ ├── static
│ │ └── favicon.ico
│ │ └── site.webmanifest
│ └── assets
│ └── demo.png
├── tests
│ └── demo.test.ts
├── @types
│ └── custom.d.ts
└── .github
└── workflows
└── action.yml
src
: for source code files. ( alias:@src
)- entry point →
main.ts
- entry point →
public
: contains index html template (index.html.js
) and static assets.assets
: place to store images ( alias:@assets
)static
: for static files like favicon.ico, robot.txt, etc.
tests
: for test files.@types
: place to declare custom types..github
: to store various configuration files and workflows related to GitHub-specific features and actions. (learn more)
To avoid using long relative paths like ../../src, this boilerplate uses path aliases to improve code readability and maintainability, especially in larger projects with complex directory structures.
@assets
→./public/assets
@src
→./src
The create-typescript-app boilerplate already includes support for CSS modules using post-css and SCSS.
You can create an SCSS file, <filename>.scss, and use it anywhere under the src directory.
// style.scss
.demo-block {
background-color: black;
}
Note: create-typescript-app will automatically convert .demo-block
to demoBlock
.
import styles from './style';
document.getElementById('block');
block.classList.add(styles.demoImg);
Contributions are welcome! If you have any ideas, improvements, or bug fixes, please feel free to open an issue or submit a pull request.
This project is licensed under the MIT License.