TypeScript 2, React 15, Bootstrap and WebPack 2 Boilerplate.

I was recently working on a TypeScript project with React that uses WebPack 2 and Gulp for it’s build process.

I thought it would be worth creating a GitHub repository that stores this boilerplate code so that anyone can download the code and get started creating web apps with this particular technology stack.

The source comes with TypeScript, Less, Bootstrap all wired up with React and some base example components to get your started. It also sets up webpack-dev-server so you can easily spin up a local dev server to host your web app while in development.

To get started just run the following to get the code from the repository.


git clone https://github.com/leedale1981/typescript2-react15-webpack2-boilerplate.git

You should then run an NPM install to download all dependencies.


npm install

Finally you can compile the TypeScript code and run the dev server like so:


gulp webpack

gulp webpack-dev-server

And thats it you should be up and running with your web app.

Azure AD JavaScript authentication tutorial series (Part 1)

I have put together a video tutorial series that goes through step by step a full end to end solution that shows how to authenticate an Azure AD Web API application from JavaScript code using the adal.js library.

Now days I am finding myself designing my applications to use a web service layer to serve up data from data stores.  Providing REST API endpoints on top of your data gives alot of benefits when it comes to integrating your data across different client applications. JavaScript runs pretty much everywhere now and it’s the to go to language to build client side apps so accessing your REST endpoints from JavaScript is a really appealing solution and this is why pretty much everyone is doing JavaScript and REST now.

The JavaScript ecosystem today is massive with libraries to help you build pretty comprehensive applications. When I am building SharePoint Add-Ins I tend to expose the data using Web API and stick to using JavaScript in the application to render the data and build out the UI. Most if the time there is no need for server side code inside my client application.

Inevitably you will want to secure your web service layer at some point and if your are building on the Azure platform, then Azure AD is a great OAuth solution.

It is especially a good solution if you are building SharePoint Add-Ins in Office 365. When you are logged into your Office 365 SharePoint site you have already authenticated against your Azure AD and as long as you deploy your applications to the same Azure AD instance then you get automatically authenticated when accessing your Web API layer.

When building these apps I found that there was plenty of examples on authenticating from C# code but I found the examples lacking if I just wanted to use JavaScript to authenticate against my Web API.

The adal.js library comes in very handy here but I found all the examples were based around using it with Angular. Although Angular is a great framework for building client side apps I found most of the time it was overkill for what I wanted to do.  So these set of videos show how you might want to design and build a client side application and in this case a SharePoint Add-In that uses Azure AD authentication, Web API, JavaScript and TypeScript.

The general architecture looks like this.

Thumbnail

 

The first video is up and it shows how to create a SQL Azure database, create a Web API layer and how to model and scaffold the data using Entity Framework.