# Browser QuickStart ## TypeScript in the browser [![DesignTSX](https://raw.githubusercontent.com/basarat/typescript-book/master/images/designtsx-banner.png)](https://designtsx.com) 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 * Install [Node.js](https://nodejs.org/en/download/) * Install [Git](https://git-scm.com/downloads) ### Project Setup Quick Use as a base. ``` git clone https://github.com/basarat/react-typescript.git cd react-typescript npm install ``` Now use it as a base and jump to [develop your amazing application](#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`: ```javascript { "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`. ```javascript { "name": "react-typescript", "version": "0.0.0", "license": "MIT", "repository": { "type": "git", "url": "https://github.com/basarat/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: ```javascript 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: ```markup

``` * `src/app/app.tsx` that is your frontend application entry point: ```javascript import * as React from 'react'; import * as ReactDOM from 'react-dom'; const Hello: React.FunctionComponent<{ compiler: string, framework: string }> = (props) => { return (

{props.compiler}

{props.framework}

); } ReactDOM.render( , 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 * 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.