https://github.com/hanetooth/create-typescript-app
A boilerplate for typescript application with pnpm, rollup, typescript, css modules (scss) and jest.
https://github.com/hanetooth/create-typescript-app
boilerplate typescript typescript-boilerplate
Last synced: about 1 month ago
JSON representation
A boilerplate for typescript application with pnpm, rollup, typescript, css modules (scss) and jest.
- Host: GitHub
- URL: https://github.com/hanetooth/create-typescript-app
- Owner: hanetooth
- License: mit
- Created: 2023-05-14T07:11:48.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-03T14:03:27.000Z (about 2 years ago)
- Last Synced: 2025-05-01T11:05:21.377Z (about 2 months ago)
- Topics: boilerplate, typescript, typescript-boilerplate
- Language: JavaScript
- Homepage:
- Size: 160 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-typescript - create-typescript-app - provides a starting point for TypeScript web applications. pnpm, Rollup, Jest, and CSS Modules with SCSS. (Getting Started with (Awesome) TypeScript / Typescript Project Starters)
README
# Create TypeScript App
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.
## Features
- 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.
## Getting Started
To use this boilerplate, follow the steps below:
1. Clone the repository:
```bash
git clone https://github.com/hein-htut-aung/create-typescript-app.git
```
2. Change into the project directory:
```bash
cd create-typescript-app
```
3. Install dependencies using pnpm:
```bash
pnpm install
```
4. Run development server:
```bash
pnpm dev
```
5. To view the running application, open your web browser and navigate to `http://localhost:10001`.
## Scripts
- `pnpm dev`: Starts the development server with live reloading.
- `pnpm prod`: Builds the project for production.
- `pnpm test`: Runs the test suite.
## Project structure
```bash
├── 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`
- `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](https://docs.github.com/en/actions/using-workflows/about-workflows))
## Path Alias
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`
## Styling
The **create-typescript-app** boilerplate already includes support for CSS modules using post-css and SCSS.
You can create an SCSS file, \.scss, and use it anywhere under the src directory.
### Example
```scss
// style.scss
.demo-block {
background-color: black;
}
```
Note: *create-typescript-app will automatically convert `.demo-block` to `demoBlock`.*
#### Usage
```typescript
import styles from './style';
document.getElementById('block');
block.classList.add(styles.demoImg);
```
## Contributing
Contributions are welcome! If you have any ideas, improvements, or bug fixes, please feel free to open an issue or submit a pull request.
## License
This project is licensed under the [MIT License](LICENSE).