- Architecture Diagram
- The starter project repo
If you are starting w/ TypeScript for your next project, and you want have a project that is already setup to deploy to browsers using Webpack 4, and also has testing infrastructure hooked up to it (via Jasmine and Karma), here’s a repo on GitHub that you can clone/fork to get started.
This tutorial will walk you thru the gory details of what is going on in this repo (so that you don’t have to go thru the pain of setting and configuring all of this up yourself) 😁.
This repo is a great starting point for someone who wants to start a new TypeScript project w/ TDD / BDD, and also use Webpack 4 to take care of packing the web app to browsers. And also take care of hosting the app during local development using Webpack Dev Server.
The following diagram describes all the different pieces of the starter
project that have already been configured for you to use. And a depiction of
what happens when various
npm scripts are run.
The starter project repo
Build, run, and test using npm scripts
Here are some of the major npm scripts that you will need to run once you clone
or fork the repo. Make sure to run
npm install after you’ve cloned or forked
the repo to your computer.
npm run build:dev- This will use Webpack to build your project and will continue watching the
srcdirectory for changes in any ‘.ts’ or
.jsfiles and will rebuild as they change. The Webpack configuration that this script loads is in the
npm run start:dev- This will build your project, and then use Webpack Dev Server to deploy the app to localhost. Any changes that you make in the
srcfolder will be picked up and hot-reloaded into any open browsers running the app as well, which is awesome 🎉.
npm run test- This will start Karma, which will launch a Chrome browser that it will use to run your tests. Karma will keep watch on any changes that occur in your source code and it will re-run these tests when that happens.
karma-spec-reporteris used so that you get a nice console output of the results of the tests (replete w/ the
itstrings from your tests).
Add source and test files, folder structure and configuration overview
Your TS source code goes in the
src folder, along w/ any JS files that you
might have. Webpack 4 is configured to pick these up and add them to the
bundle that it generates. Don’t worry, sourcemaps are generated as well, so
that when you debug the bundle, you will be able to browser and set
breakpoints in your TS source code.
All your tests (that use Jasmine) go into the
test folder. When you run
Karma, it will continuously test your code anytime
src changes. It will
also launch a Chrome browser to run these tests in.
In the root folder of the project there are some configuration files. Here’s a list of what they are and what they do.
This is the Webpack 4 configuration file. It is used by both
.karma conf.jsto run the tests, and the
npmscripts to build and run the project (using the Webpack Dev Server).
entryis configured to be
src/indexwhich can be a
index.tsfile (based on the
resolveconfiguration). In our case, it is
index.ts. It is critical to define an entry point for Webpack, so that it knows where to build its tree of source files that it will transpile, minify, tree-shake, and bundle.
ts-loadermodule is used to grab all the
.tsfiles and transpile them to ES6 (this is configured in
tsconfig.jsonwhich is used by
devServeris configured here to support hot-reloading.
devtoolis configured to support
inline-source-mapso that you can see your TS code when you’re debugging your test code or source code.
watchis enabled so that any changes will be detected during build and run (which are invoked using the
outputis configured such that the bundle is called
bundle.jsand it is written to the
dist/folder, which is the default for Webpack 4 (if you don’t use any
This is the config file for Karma and it actually pulls in the
webpack.dev.config.jsfile as well, so that your Webpack development configuration settings are also applied to the code served by Karma to the browsers that are running the tests.
A strange thing that happens in this file is how the entry for Webpack is set, so that Karma can run the tests. Normally, the Webpack entry is the main file in your application (
src/index.ts), however, in this case, the main entry point are the test files. Karma has to leverage Webpack, in order to generate the bundle that it needs, so that it can run the tests. In order to make this work, I copy the
webpackConfigvariable) and then only grab the following keys to give to the
webpackConfig resolve, and
webpackConfig.mode. Karma injects the
entryby itself. If you just pass the
webpackkey, then Karma will not start (and will error out).
This is the TypeScript compiler configuration file. It is used by the
ts-loader(in Webpack) to transpile your TS files to JS on their way to the bundle.
compilerOptions.targetis an important value to set (in this case
esnext) as this tells the TS compiler what version of JS to transpile the code into.
sourceMapis also set to
trueso that the transpiled code can be debugged in the browser (when served by the Webpack Dev Server) or the tests (when served by the Karma server).
TypeScript and Webpack 4 intro
Webpack 4 intro
Webpack dev server configuration
Karma, Jasmine intro
Karma, Jasmine, and Webpack setup
TypeScript migrate from typings to npm @types
TypeScript, Webpack, Jasmine, and Karma