Bootstrap a TypeScript + React Project

[00:01] We will start by initializing out package.json with the default options. We will go ahead and install the usual React suspects, which are React, React DOM, Webpack, and the webpack-devserver. Additionally, we're going to install the types of compiler, ds-loader for Webpack, along with the type definitions for React and React DOM.

[00:20] We will go ahead and save these to our dev dependencies.

[00:24] Once the installation is complete, we will go ahead and start our IDE. [inaudible] and alm-tools support TypeScript out of the box.

[00:36] Now we will go ahead and open up the package of json to add a few script targets. The first one is a build target in which we will simply run Webpack against our webpack.config.js. We'll also add start target for live development.

[00:55] This target will start webpack-dev-server against the same webpack.config.js. We will pass additional options, no info, 30 degrees, the output nice, hot to enable live reload, inline to allow on-the-fly faster compilation, and content pace to set the folder that will be served over HTTP.

[01:20] Next we're going to go ahead and add this to Webpack configuration file which is webpack.config.js. This file is going to have a single export which is going to be the Webpack configuration object. I'm going to go ahead and set up source maps by specifying the dev tool.

[01:41] Next I'm going to specify the application entry points. We're only going to have one named application entry point called main and it's going to point to Source\App\main.tsx.

[01:55] I'm going to configure the Webpack output options. First, I will specify the folder where Webpack should output all its assets. In our case, it's going to be the public folder.

[02:06] Then we're going to configure the filename for the output bundle. It's actually simplest to let Webpack grab it from the entry point name.

[02:20] We are going to configure Webpack so that we can seamlessly require a ts or tsx file without having to explicitly add the extension to our import statement. We're going to add the extension ts, tsx along with the default of .js to the resolvable extensions of Webpack.

[02:44] Finally, we're going to configure Webpack to pass all the ts and tsx files to the ts-loader. If a filename matches .ts with an optional "x" at the end, we are going to tell Webpack that it should use the loader, ts-loader.

[03:07] That is it. We have successfully configured Webpack for TypeScript.

[03:11] To demo our code, we're going to go ahead and add an index.html file to the public folder. We'll start with an HTML tag, add a BODY tag, and within our BODY, we'll add a DIV for the ID route which we're going to later target for React.

[03:31] After the DIV is stored, we'll go ahead and ask the browser to load our main.js application entry point. We'll go ahead and close any of the remaining open tags. Before we start adding tags to files to a project, we'll go ahead and configure the types of compiler. The best way to do that is to add a ts-config.json file.

[03:54] We will start by specifying the compiler options, the big ones being the target which you want to be ES5 and JSX which we want to be React. Next, we'll go ahead and include all the files from the source folder.

[04:12] Finally, we'll disable IDE compile on save, because that will be done by Webpack. For ALM, I will also go ahead and set this as my current active project.

[04:26] We're going to go ahead and add our main application entry point inside Source\App\main.tsx. Within our main application entry point, we're going to bring in React, React DOM, and then we are going to use React DOM to render a simple DIV with the contents, "Hello World."

[04:49] To the root DIV [inaudible] edit the document body inside our index.html. If you go ahead and open the terminal and run npm start, it starts webpack-dev-server. If you visit the URL localhost 8080, we can see it running.

[05:10] Thanks to our webpack-dev-server setup, if we jump back to our IDE and modify the source code, webpack-dev-server automatically reloads the web page as well. You set up the dev-server for maximum speed, so that it doesn't have write the assets to the script now.

[05:29] Whenever you're ready to deploy the application, you can run the build target which we set up in our package.json. After running the build target, you will notice that we have [inaudible] build, main.js, and main.js.map written to disk. Now we can even open up the raw index.html file in the browser and it still works.

[05:50] If you wanted, we could push this public folder to a hosting service.