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.

What we need

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

Rollup is a minimal bundler solution for es2015. With it we are able to resolve es2015 imports and compile them into a single file to use on our website.

Myth is based on the CSS specification. Meaning we can write CSS of the future today enjoying wide browser support.

We aren't going to focus on any of the server aspects. Use these tools as a client side build environment in conjunction with whatever technologies you like on the server.

Directory structure

code

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

html

<!-- 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 with a large number of devices. It specifies a charset, viewport, defines a title, and loads css and javascript onto the page.

Tool 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.

code

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

Add the following "scripts" to the generated package.json.

code

"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\"",

Now we have all of the main concerns of our environment handled. As well an all encompassing one which simultaneously starts all three of our desired scripts. At this stage we are only missing configuration files.

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

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.

javascript

// rollup.config.js

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

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

So now whenever you want to hack on your project 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 helps someone as being a good place to start.

Kequc