All Projects β†’ nobrainr β†’ Typescript Webpack Starter

nobrainr / Typescript Webpack Starter

Licence: mit
⚑ create-ts-lib: A Starter Kit and a CLI to create your TypeScript / ES6 module bundled by Webpack without thinking about build or unit tests configurations. 🏠

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects
es6
455 projects
es2015
71 projects

Projects that are alternatives of or similar to Typescript Webpack Starter

Angularjs Webpack Starter
πŸš€ A modern frontend setup for AngularJS projects using NPM, TypeScript and Webpack.
Stars: ✭ 173 (-51.68%)
Mutual labels:  webpack, npm, karma, jasmine
Modern Wasm Starter
πŸ›Έ Run C++ code on web and create blazingly fast websites! A starter template to easily create WebAssembly packages using type-safe C++ bindings with automatic TypeScript declarations.
Stars: ✭ 140 (-60.89%)
Mutual labels:  webpack, starter, npm
Kotlin Frontend Plugin
Gradle Kotlin (http://kotlinlang.org) plugin for frontend development
Stars: ✭ 578 (+61.45%)
Mutual labels:  webpack, npm, karma
Semaphore Ng2 Webpack
Stars: ✭ 81 (-77.37%)
Mutual labels:  webpack, karma, jasmine
React Cordova Boilerplate
TodoMVC example for react with development tools to build a cordova application
Stars: ✭ 206 (-42.46%)
Mutual labels:  webpack, karma, jasmine
angular-material-boilerplate
A straightforward and well structured boilerplate based on Google's Angular Material project.
Stars: ✭ 28 (-92.18%)
Mutual labels:  jasmine, karma
angular-unit-testing-examples
Showroom for different Angular unit testing concepts
Stars: ✭ 19 (-94.69%)
Mutual labels:  jasmine, karma
vue-popover
Reusable popover component for Vue
Stars: ✭ 22 (-93.85%)
Mutual labels:  jasmine, karma
Input Range Scss
Styling Cross-Browser Compatible Range Inputs with Sass
Stars: ✭ 272 (-24.02%)
Mutual labels:  npm, npm-package
example-typescript-package
Example TypeScript Package ready to be published on npm & Tutorial / Instruction / Workflow for 2021
Stars: ✭ 71 (-80.17%)
Mutual labels:  npm-package, starter
Ngx Smart Modal
Modal/Dialog component crafted for Angular
Stars: ✭ 256 (-28.49%)
Mutual labels:  npm, npm-package
Tooltip Sequence
A simple step by step tooltip helper for any site
Stars: ✭ 287 (-19.83%)
Mutual labels:  npm, npm-package
go-echo-boilerplate
The fastest way to build a restful API with golang and echo framework. Includes common required features for modern web applications. A boilerplate project with golang and Echo.
Stars: ✭ 53 (-85.2%)
Mutual labels:  starter, unit-test
typescript-npm-package-template
Boilerplate to kickstart creating an npm package using TypeScript
Stars: ✭ 122 (-65.92%)
Mutual labels:  npm-package, starter
metadatamanagement
Metadatamanagement (MDM) - Data Search for Higher Education Research and Science Studies
Stars: ✭ 21 (-94.13%)
Mutual labels:  jasmine, karma
generator-speedseed
Oriented to components, allow create/choice template, multiple configuration with easy maintenance
Stars: ✭ 13 (-96.37%)
Mutual labels:  jasmine, karma
Vue Electron Template
An Electron & Vue.js template with Hot-reloading enabled and common Vue plugins, dev, debug and build scripts configured.
Stars: ✭ 260 (-27.37%)
Mutual labels:  webpack, starter
Ionic Boilerplate
✨ An Ionic Starter kit featuring Tests, E2E, Karma, Protractor, Jasmine, Istanbul, Gitlab CI, Automatic IPA and APK, TypeScript 2, TsLint, Codelyzer, Typedoc, Yarn, Rollup, and Webpack 2
Stars: ✭ 309 (-13.69%)
Mutual labels:  webpack, karma
Webpack Cdn Plugin
A webpack plugin that use externals of CDN urls for production and local node_modules for development
Stars: ✭ 306 (-14.53%)
Mutual labels:  webpack, npm
Alfred Npms
Alfred 3 workflow to search for npm packages with npms.io
Stars: ✭ 312 (-12.85%)
Mutual labels:  npm, npm-package

create-ts-lib Backers on Open Collective Sponsors on Open Collective CircleCI Npm Package

Quick Start

You can execute the create-ts-lib CLI using npx or by installing it globally with npm i -g create-ts-lib.

# Use NPX or npm install -g create-ts-lib to install it as a global package
npx [email protected] my-typescript-lib
cd my-typescript-lib && npm start

Build and Serve it

  • Browse http://localhost:3000/ to see your bootstrapped module.
  • A bundle is created under /dist folder.
  • Create a minified bundle with npm run build.

Features

You don’t need to install or configure tools like Webpack, Typescript, Karma or Jasmine.
They are preconfigured so that you can focus on the code, but as a starter kit you still can modify all the configuration files.

Create a Typescript project

# Use NPX or npm install -g create-ts-lib to install it as a global package
npx [email protected] my-typescript-lib
cd my-typescript-lib && npm start

Calling create-ts-lib with my-typescript-lib as an argument creates a directory my-typescript-lib inside the current directory.
Inside that directory, the initial file structure of the project is generated with all the devDependencies installed.

my-typescript-lib
β”œβ”€β”€ node_modules
β”œβ”€β”€ src
β”‚   └── index.html
β”‚   └── index.ts
β”‚   └── MyLibrary.ts
β”‚   └── MyLibrary.spec.ts
β”œβ”€β”€ tests
β”‚    └── unit
β”‚        └── spec-bundle.js
β”œβ”€β”€ README.md
β”œβ”€β”€ package.json
β”œβ”€β”€ .gitignore
β”œβ”€β”€ karma.conf.js
β”œβ”€β”€ tsconfig.json
β”œβ”€β”€ tslint.json
└── webpack.config.js

No configuration or complicated folder structures, just the files you need to start your app / package / module.

npm start or npm run server:prod

Runs the app in development / production mode using Webpack dev server. Open http://localhost:3000 πŸŽ‰ to view it in the browser.

npm test

Runs the unit tests using Karma as test runner and Jasmine as testing framework.

npm run build or npm run build:prod

Creates a bundle into the dist folder:

dist
β”œβ”€β”€ MyLibrary.d.ts # - Example of a 'd.ts' declaration file
β”œβ”€β”€ app.bundle.js # - Main bundle of the application. name from webpack.config
β”œβ”€β”€ app.bundle.js.map # - Sourcemap
β”œβ”€β”€ index.d.ts
└── index.html # - html page referencing app.bundle.js

Development

We'd love to have your helping hand on create-ts-lib! See CONTRIBUTING.md for more information on what we're looking for and how to get started.

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! πŸ™ [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].