Skip to content

Commit d81559d

Browse files
authored
Merge pull request #8 from emyann/feature/CLI-scaffolder
Feat(CLI): CLI to scaffold the project directory
2 parents e788c72 + e6f1ad1 commit d81559d

20 files changed

+623
-75
lines changed

β€Ž.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# Build results
22
dist/
33
typings/**/*
4+
app/
45

56
# Others
67
~$*

β€Ž.travis.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ before_install:
1313
- sh -e /etc/init.d/xvfb start
1414

1515
script:
16-
- npm run test
16+
- npm run test-cli

β€ŽREADME.md

Lines changed: 80 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,106 @@
11
# Typescript Webpack Starter
2+
23
[![Build Status](https://travis-ci.org/emyann/typescript-webpack-starter.svg?branch=develop)](https://travis-ci.org/emyann/typescript-webpack-starter)
3-
>A damn simple ES6 and Typescript Starter kit using webpack for packaging. Perfect for bootstraping your javascript project regardless any framework.
4+
>πŸš€ An ES6 and TypeScript Starter kit using webpack for bundling. Create your TypeScript module with neither build nor test configuration.
5+
46

57
## Built upon
68

79
- [x] [Webpack 3](https://webpack.js.org/)
810
- [x] [Typescript 2](https://blogs.msdn.microsoft.com/typescript/2016/07/11/announcing-typescript-2-0-beta/)
911
- [x] [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard)
10-
![Imgur](http://i.imgur.com/pETTX85.png)
12+
- [x] [Karma](https://karma-runner.github.io/1.0/index.html), [Jasmine](https://jasmine.github.io/)
1113

12-
# Getting started
14+
![Imgur](http://i.imgur.com/pETTX85.png)
1315

14-
## Clone Typescript Webpack Starter
1516

16-
```bash
17-
git clone https://github.com/emyann/typescript-webpack-starter.git
18-
cd typescript-webpack-starter
19-
# Install the dependencies
20-
npm install
21-
```
17+
## Quick Overview
2218

23-
## Run
19+
```sh
20+
npm install -g create-ts-lib
2421

25-
Start a Webpack dev server
26-
```bash
22+
create-ts-lib my-typescript-lib
23+
cd my-typescript-lib/
2724
npm start
2825
```
29-
And go to this URL: `http://localhost:3000` - πŸŽ‰
3026

31-
Start a Webpack server with the production configuration
32-
```bash
33-
npm run server:prod
27+
Then open http://localhost:3000/ to see your bootstrapped module.
28+
When you’re ready to deploy to production, create a minified bundle with `npm run build`.
29+
30+
### Get Started Immediately
31+
32+
You **don’t** need to install or configure tools like Webpack or Babel.<br>
33+
They are preconfigured so that you can focus on the code, but as a starter kit you still can modify them.
34+
35+
Just create a project, and you’re good to go.
36+
37+
### Built upon
38+
39+
- [x] [Webpack 3](https://webpack.js.org/)
40+
- [x] [Typescript 2](https://blogs.msdn.microsoft.com/typescript/2016/07/11/announcing-typescript-2-0-beta/)
41+
- [x] [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard)
42+
![Imgur](http://i.imgur.com/pETTX85.png)
43+
44+
## Getting started
45+
46+
### Installation
47+
48+
Install it once globally:
49+
50+
```sh
51+
npm install -g create-ts-lib
3452
```
3553

54+
### Creating a TypeScript module
3655

37-
## Build Only
38-
Build a development release
39-
```bash
40-
npm run build
56+
To create a new module, run:
57+
58+
```sh
59+
create-ts-lib my-ts-module
60+
cd my-ts-module
4161
```
4262

63+
It will create a directory called `my-ts-module` inside the current folder.<br>
64+
Inside that directory, it will generate the initial project structure and install the transitive dependencies:
4365

44-
Build a production release
45-
```bash
46-
npm run build:prod
4766
```
67+
my-ts-module
68+
β”œβ”€β”€ node_modules
69+
β”œβ”€β”€ src
70+
β”‚ └── index.html
71+
β”‚ └── index.spec.ts
72+
β”‚ └── index.ts
73+
β”‚ └── vendor.js
74+
β”œβ”€β”€ tests
75+
β”‚ └── unit
76+
β”‚ └── spec-bundle.js
77+
β”œβ”€β”€ README.md
78+
β”œβ”€β”€ package.json
79+
β”œβ”€β”€ .gitignore
80+
β”œβ”€β”€ karma.conf.js
81+
β”œβ”€β”€ tsconfig.json
82+
β”œβ”€β”€ tslint.json
83+
β”œβ”€β”€ typings.json
84+
└── webpack.config.js
85+
```
86+
87+
No configuration or complicated folder structures, just the files you need to build your app.<br>
88+
Once the installation is done, you can run some commands inside the project folder:
89+
90+
### `npm start` or `npm run server:prod`
91+
92+
Runs the app in development / production mode using Webpack dev server.
93+
Open [http://localhost:3000](http://localhost:3000) πŸŽ‰ to view it in the browser.
94+
95+
### `npm test`
96+
97+
Runs the unit tests using Karma as test runner and Jasmine as testing framework.
98+
99+
### `npm run build` or `npm run build:prod`
100+
Build a development release
101+
48102
After build phase, 3 files are generated into the `dist` folder:
49103
- `app.bundle.js` - contains the core of the application. From the entry point `src/index.ts`
50-
- `vendor.bundle.js` - contains the vendor dependencies
51-
- `index.html` - html page with references to the 2 files above
52-
53-
## TODO
104+
- `vendor.bundle.js` - contains the vendor dependencies. From the entry point `src/vendor.ts` (lodash is added as an example)
105+
- `index.html` - html page referencing these files
54106

55-
- [ ] Setup a webpack common configuration and use webpack-merge
56-
- [ ] `create-ts-app` or `create-typescript-app` CLI instead of cloning the entire repository

β€Žpackage-lock.json

Lines changed: 202 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
Β (0)