Browser QuickStart
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.
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:
Create
tsconfig.json
:
Create
package.json
.
Create a
webpack.config.js
to bundle your modules into a singleapp.js
file that contains all your resources:
src/templates/index.html
file. It will be used as the template for theindex.html
generated by webpack. The generated file will be in thepublic
folder and and then served from your webserver:
src/app/app.tsx
that is your frontend application entry point:
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 bysrc/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.
Last updated