TypeScript in the browser

DesignTSX

If you are using TypeScript to create a web application here are my recommendations to get a quick TypeScript + React (my UI framework of choice) project setup.

General Machine Setup

Project Setup Quick

Use https://github.com/armanriazi/react-typescript as a base. 

git clone https://github.com/armanriazi/react-typescript.git
cd react-typescript
npm install

Now use it as a base and jump to develop your amazing application

Project Setup Detailed

If you want to learn more about the details of how that project is created (instead of using it as a base), here are the steps on how its setup from scratch:

  • Create a project dir:
mkdir your-project
cd your-project
  • Create tsconfig.json:
{
  "compilerOptions": {
    "sourceMap": true,
    "module": "commonjs",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "target": "es5",
    "jsx": "react",
    "lib": [
      "dom",
      "es6"
    ]
  },
  "include": [
    "src"
  ],
  "compileOnSave": false
}
  • Create package.json.
{
  "name": "react-typescript",
  "version": "0.0.0",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/armanriazi/react-typescript.git"
  },
  "scripts": {
    "build": "webpack -p",
    "start": "webpack-dev-server -d --content-base ./public"
  },
  "dependencies": {
    "@types/react": "16.4.10",
    "@types/react-dom": "16.0.7",
    "clean-webpack-plugin": "0.1.19",
    "html-webpack-plugin": "3.2.0",
    "react": "16.4.2",
    "react-dom": "16.4.2",
    "ts-loader": "4.4.2",
    "typescript": "3.0.1",
    "webpack": "4.16.5",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "3.1.5"
  }
}
  • Create a webpack.config.js to bundle your modules into a single app.js file that contains all your resources:
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app/app.tsx',
  plugins: [
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: ['public/build']
    }),
    new HtmlWebpackPlugin({
      template: 'src/templates/index.html'
    }),
  ],
  output: {
    path: __dirname + '/public',
    filename: 'build/[name].[contenthash].js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ]
  }
}
  • src/templates/index.html file. It will be used as the template for the index.html generated by webpack. The generated file will be in the public folder and and then served from your webserver: 
<html>
  <body>
      <div id="root"></div>
  </body>
</html>
  • src/app/app.tsx that is your frontend application entry point: 
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const Hello: React.FunctionComponent<{ compiler: string, framework: string }> = (props) => {
  return (
    <div>
      <div>{props.compiler}</div>
      <div>{props.framework}</div>
    </div>
  );
}

ReactDOM.render(
  <Hello compiler="TypeScript" framework="React" />,
  document.getElementById("root")
);

Develop your amazing application

You can get the latest packages using npm install typescript@latest react@latest react-dom@latest @types/react@latest @types/react-dom@latest webpack@latest webpack-dev-server@latest webpack-cli@latest ts-loader@latest clean-webpack-plugin@latest html-webpack-plugin@latest --save-exact

  • Do live development by running npm start.
    • Visit http://localhost:8080
    • Edit the src/app/app.tsx (or any ts/tsx file used in some way by src/app/app.tsx) and application live reloads.
    • Edit the src/templates/index.html and the server live reloads.
  • Build production assets by running npm run build.
    • Serve the public folder (which contains the built assets) from your server.