Web frontend stack (yarn + webpack + typescript)

fontEndStack_Typescript.md

This file shows how to set up a minimal web font-end stack with Yarn, webpack and Typescript

Install newest NodeJS

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

[1]

Install yarn

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

Initialize project and install Webpack

mkdir projName
cd projName
yarn add webpack --dev
mkdir dist
mkdir src

Add typescript and configure Webpack

yarn add typescript --dev
yarn add ts-loader --dev

• Create tsconfig.json:

{
  "compilerOptions": {
      "module": "commonjs",
      "lib": ["ES2015", "dom"],
      "target": "es5"
  }
}

• Add some webpack plugins

yarn add webpack-dev-server --dev
yarn add html-webpack-plugin --dev
yarn add clean-webpack-plugin --dev
yarn add webpack-merge --dev
yarn add uglifyjs-webpack-plugin@beta --dev

• Create project file src/app.ts:

document.body.innerHTML += "Welcome to JSHELL"

• Create webpack.common.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './src/app.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  module: {
    loaders: [
            // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
            { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
            title: 'New App! PogChamp'
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    host: "0.0.0.0",
    disableHostCheck: true,
    port: 7777
  }
};

• Create webpack.dev.js:

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
        devtool: 'inline-source-map'
});

• Create webpack.prod.js:

const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  plugins: [
    new UglifyJSPlugin()
  ]
});

• add the following to package.json:

"scripts": {
  "build": "webpack --config webpack.prod.js",
  "watch": "webpack-dev-server --progress --colors --config webpack.dev.js",
  "watch-prod": "webpack-dev-server --progress --colors --config webpack.prod.js"
}

Usage

• run yarn bulid to compile minified version
• run yarn watch to compile full version and see result in host:7777
• run yarn watch-prod to compile minified version and see result in host:7777

[1] You may need to specify the official repo for node js installtion: https://superuser.com/questions/124174/how-can-i-specify-the-repository-from-which-a-package-will-be-installed-emacs

Useful Links

• https://yarnpkg.com/en/docs/install
• https://yarnpkg.com/en/docs/usage
• https://yarnpkg.com/en/docs/cli/run
• https://webpack.github.io/docs/usage.html
• https://www.typescriptlang.org/docs/handbook/integrating-with-build-tools.html
• https://webpack.js.org/guides/output-management/
• https://webpack.js.org/configuration/dev-server/
• https://webpack.js.org/guides/production/