TypeScript + Rollup + Myth CSS simple client-side dev environment

A simple development environment that will allow you to get underway with whatever it is you're trying to build for the client-side.

TypeScript is a superset of es2015+, you are writing modern JavaScript code but will a couple of bonus features. It compiles down to any JavaScript standard you would like. With TypeScript we can compile all the way down to mostly valid es5, but with es2015 imports.

Rollup is a small, minimal bundler solution for es2015. With it we are able to package the result of our TypeScript, resolving those es2015 imports, into a single file to use on our website.

Myth is a CSS compiler. It is based on the CSS specification meaning we can write modern CSS today, compiled for wide browser support.

We aren't going to focus on any of the server side aspect of the project. Just these three tools so that you can use them in conjunction with whatever technologies you like. It's easy so lets get started.

Directory structure

my-project;
-> build;
-> css;
-> public;
-> -> javascripts;
-> -> stylesheets;
-> -> index.html
-> src;
-> -> tsconfig.json
-> rollup.config.js
-> package.json

The purpose of these directories and files will hopefully become clear as we read further.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>My Project</title>
        <link rel="stylesheet" href="stylesheets/main.css">
        <script src="javascripts/main.js"></script>
    </head>
    <body>
    </body>
</html>

This is a basic HTML structure targeted at compatibility for the largest number of devices we can. It specifies a charset, viewport, defines a title, and loads soon to come css and javascript. This is all you need but it's quite empty. It will be up to you to decide what to add to it.

Installation

Lets start loading some of the tools we need and turn our base directory into a project with a package.json file. Generate one as follows using the terminal.

npm init
npm install --save-dev typescript rollup myth concurrently

Installation should complete fairly quickly and you will now have access some useful commands in your environment. We'll add "scripts" to our generated package.json.

"build": "tsc -p ./src",
"rollup": "rollup -c ./rollup.config.js",
"css": "myth ./css/main.css ./public/stylesheets/main.css",

"build:watch": "tsc -w -p ./src",
"rollup:watch": "rollup -w -c ./rollup.config.js",
"css:watch": "myth -w ./css/main.css ./public/stylesheets/main.css",

"dev": "concurrently --kill-others \"npm run build:watch\" \"npm run rollup:watch\" \"npm run css:watch\"",

With these in place we have each of the main concerns of our environment handled. As well an all encompassing one which simultaneously starts all three of our desired watchers. At this stage we are only missing configuration files.

tsconfig.json

The src directory is where we will store our TypeScript files, and its configuration file, located here, is called tsconfig.json.

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "outDir": "../build"
    }
}

This will output all of our files to the build directory of our project. So that every time we make a change to a .ts file, an es5 compatible .js file will be generated. These files will retain their es2015 imports, which is why we need rollup.config.js.

rollup.config.js

export default {
  entry: './build/main.js',
  format: 'iife',
  dest: './public/javascripts/main.js'
};

This will traverse all of our es5 JavaScript, and package them into a single file which will reside in our public/javascripts directory. Just make sure that the entry point to your JavaScript code resides in a file called main.ts.

So now whenever we want to hack on our project just run npm run dev in the terminal. This is a very bare bones development environment but it uses some very powerful and simple to use tooling. Hopefully it serves as a good place to start.