TypeScript in the browser
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/basarat/react-typescript as a base.
Copy 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
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:
Copy mkdir your-project
cd your-project
Copy {
"compilerOptions" : {
"sourceMap" : true ,
"module" : "commonjs" ,
"esModuleInterop" : true ,
"resolveJsonModule" : true ,
"experimentalDecorators" : true ,
"target" : "es5" ,
"jsx" : "react" ,
"lib" : [
"dom" ,
"es6"
]
} ,
"include" : [
"src"
] ,
"compileOnSave" : false
}
Copy {
"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:
Copy 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:
Copy <html>
<body>
<div id="root"></div>
</body>
</html> src/app/app.tsx that is your frontend application entry point:
Copy 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.
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.
