Getting Started with React + Webpack + Typescript in Visual Studio Community 2015

I have been looking at react for sometime and never had a chance to set it up and create a simple application. This weekend I decided to plunge in and get it rolling. Through out my reading on reading and trying to set it up I found a lot of article setting up react in Mac or Linux but I could not find a more concise steps to set it up using Visual Studio (not visual studio code) Typescript and webpack. I am totally new to webpack and I am not an expert. What we will see here in this story is how I configured my environment and challenges I faced through this process.

React is the most popular framework in the Front End Framework currently. I am a SharePoint guy during day and as SharePoint community know that Microsoft has stacked his bet on react for the new SharePoint framework. So I decided to start my reactive journey. In the journey first step is to configure my development environment for working with react. I am not going to use react for creating a sharepoint application. I am creating a simple ASP.Net core web API that will expose some rest endpoints serving data from Azure Storage (Blob) and react will be used for the View. Redux will be the store provider for the application.

Enough with all the introduction and preface. Lets get right into the process.

Firstly I am using Visual Studio Community 2015 which you can download from (here). Once you have visual studio you need to install ASP.NET Core 1.0. You could also use regular .NET but I am using .NET Core which can be downloaded from here. After installing Asp.Net Core you should be seeing the following project templates in the visual studio

once you click ok you will be presented with ASP.Net Core project templates. I chose Empty template. you can choose Web API which will wire up lot of default code including controller and model etc.

After clicking OK we will be presented with Empty project like below.

Asp.Net core isa bare metal framework and we have do all our plumbing ourselves. As you can see above the WWWroot is where all the static files go. That is the root from where the webapplication is served. So our purpose that is the focus. All our JS and react components gets built there.So I am going to create my JS folder structure.

All our basic steps are complete and we can now continue with our React Webpack steps. Ignore the build folder and build.js for a moment and we will come to it later

Before we get to that step we need to install Node. You can download and install it which also installs npm (which is a package manager) and also adds to the global path.

Since I am using Visual studio the idea is not to switch between command prompt and IDE. I want to do almost all of the tasks from visual studio.In order to achieve this I am going to install 2 extensions from visual studio gallery.

Package Installer

npm Task Runner

Alright, now lets get to the core of the story. Once you have package installer you can easily install all the required packages we need for our application with out leaving visual studio. No need to remember all the npm, typings, etc commands.

Right Click on your project and choose quick install package. you will get the following prompt.Here you could choose the source and choose to install the package.It will create a package.json file if there is none that exists.

I am installing react below from npm.

The packages we need are

React,

React-Dom

Typescript

typings

Webpack

ts-loader

once these packages are installed the final package.json should like this.

We are going to use Typescript and to do that we need the ts-loader and in addition to this we also need typings file. Typings provide type information for the modules. Yes, we can use Package Installer’s quick install package tool to do that too.

Choose typings as source and install typings for react and react-dom. After installing typing you should see the following folders and an index.d.ts. The index.d.ts contains all the reference for typings that are added.

There are 2 more steps before we can write actual react component and test out achievement. next we have to add a typescript configuration file. You can read more about it here This basically provides information for typescript compiler about what to do with different files. As you can see all I am saying in this file is what my output directory is, what module to use and how to parse jsx information which we will write in tsx.

{
“compilerOptions”: {
“outDir”: “./build/”,
“sourceMap”: true,
“noImplicitAny”: true,
“module”: “commonjs”,
“target”: “es5”,
“jsx”: “react”
},
“files”: [
“./typings/index.d.ts”,
“./wwwroot/app/Hellocomponent/Hello.tsx”,
“./wwwroot/app/app.tsx”
],
“exclude”: [
“node_modules”,
“wwwroot”,
“typings/browser.d.ts”,
“typings/browser”
]
}

One last step is to add a webpack configuration file. Right click on the project and add webpack.config.js. Webpack is a build management tool similar to Gulp. I am definitely not an expert in this but with my limited knowledge this tool is powerful with once you get an handle of it then it is a breeze. In the react world webpack is what everyone use. You can read more about it here

Once you add the webpack.config.js which basically tells webpack what to do. In our case we have an entry which is pointing to app.tsx and outpur dir which is build where the final bundle.js will be generated.

var path = require(“path”);
var config = {
/*
* app.ts represents the entry point to your web application. Webpack will
* recursively go through every “require” statement in app.ts and
* efficiently build out the application’s dependency tree.
*/
entry: [“./wwwroot/app/app.tsx”],
/*
* The combination of path and filename tells Webpack what name to give to
* the final bundled JavaScript file and where to store this file.
*/
output: {
path: path.resolve(__dirname + “/wwwroot/”, “build”),
filename: “bundle.js”
},
/*
* resolve lets Webpack now in advance what file extensions you plan on
* “require”ing into the web application, and allows you to drop them
* in your code.
*/
resolve: {
extensions: [“”, “.ts”, “.tsx”, “.js”]
},
module: {
/*
* Each loader needs an associated Regex test that goes through each
* of the files you’ve included (or in this case, all files but the
* ones in the excluded directories) and finds all files that pass
* the test. Then it will apply the loader to that file. I haven’t
* installed ts-loader yet, but will do that shortly.
*
* 23..3*+
*/
loaders: [
{
test: /\.tsx?$/,
loader: “ts-loader”,
exclude: /node_modules/
}
]
}
};
module.exports = config;

If you have come this long then you should have all the necessary infrastructure to create our first react component. As you have seen from above this is going to be a hello world component.

Now in our index.html which is in wwwroot we need to add the following code. What we are going to do is define a root div where react can do its magic.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Typescript + React + Webpack in Visual Studio</title>
</head>
<body>
<!-- Render Hello Component here -->
<div id="root"></div>
<script src="build/bundle.js"></script>
</body>
</html>

From the folder structure we defined for static files in wwwroot you would have noticed all our component will be defined under the app folder and the app.tsx will perform the role of bootstrapping and injecting our component into our root div.

Add a new folder under app folder called hellocomponent. Inside the folder add a file called “hello.tsx” note the extension it is not .ts which is what a typescript file use but .tsx indicates that it contains jsx format and the compiler will read tsconfig file and process this accordingly.

This is my Hello component. Few things to note here, I had to add the reference path to my index.d.ts file because I was getting error. The compiler was complaining about not able to find react module. The class has the default export option. Export makes the class public and the default is needed for webpack.

/// <reference path="./../../../typings/index.d.ts" />
import * as React from "react";
interface IHelloProps {
name: string;
}
export default class Hello extends React.Component<IHelloProps, {}> {
render() {
return <div>Hello, {this.props.name}</div>;
}
}

The last step is to create the app.tsx which actually renders the dom. The app.tsx imports all the modules like react, react-dom and hellocomponent/hello and finds the root element and let react render it.

/// <reference path="./../../typings/index.d.ts" />
import * as React from "react";
import * as ReactDOM from "react-dom";
import Hello from "./HelloComponent/Hello";
ReactDOM.render(
<Hello name="Athraya" />,
document.getElementById("root")
);

The entire code is ready now we need to build and see the result. We are using Webpack to build the js file we need. For this we need to open the task runner window in Visual studio. Once you open the task runner you will see all the different tasks available for us.

we will select the webpack.config.js tasks and under which we have run. Right click on it and run to generate the build.js file. Once you have the file just open the html file in the browser and you should see the result.

That is all. We should now have a working react environment with Typescript and Webpack.

In the react world there is only one package manager which is npm like nuget which is nice and useful.

Next in the process is to setup redux store so that a real working application that I described in the introduction could be written. I will post the redux story once I am able to configure it until then keep reacting.

Some blogs that provided me starting point to set up my development environment.