TypeScript React Template

To follow up Microsoft's recent release of TypeScript 1.8 and related extensions for Visual Studio (2013 & 2015), ServiceStackVS now includes the simplest way to get your new TypeScript React project going with a new template that includes everything you'll need to start, iterate and deploy.

This new template is only supported by VS 2013 and 2015, VS 2012 can't install the required Microsoft extension to work productively in VS with TypeScript. Also although tsconfig.json is included, VS2013 ignores this file and only uses settings found in the projects Properties menu.

This template has a lot of similarities to the other ServiceStackVS templates but with all the configuration to help kick start your Typescript React application. NPM's package.json is setup to include all the parts you'll need including:

• Typings - For ambient TypeScript definitions
• JSPM - To manage your application dependencies and give you a smooth workflow
• Gulp - Grunt has been removed in favor of a Gulp only approach to simplify build setup.

We've removed the use of Grunt and Bower in this new template to help reduce the number of concepts and points of configuration, however the tasks to help you build, stage and deploy your application are very similar using just Gulp.

• default - This is the default task that builds and stages your application.
• 00-update-deps-js - This task is to regenerate deps.lib.js from deps.tsx which is used to reduce how much HTTP requests are done each time you make a change.
• 01-package-server - build and stage the server components of your application.
• 02-package-client - build and stage the client side resources of your application.
• 03-deploy-app - This deploys your application using msdeploy and config.json found in wwwroot_build/publish.
• package-and-deploy - This task is the whole process of building, staging and deploying your application.

Template App and working with JSPM

The template provides your client side application entry point in src/app.tsx and a single hello.tsx component as an example. Though JSPM will dynamically import required modules, it can cause long load times even locally waiting for the all the dependencies to resolve. The deps.tsx file is to improve the developer workflow by using a pre-bundled deps.lib.js file. This can greatly reduce the number of requests when iterating improving the speed of iterations. This can regenerated by using the 00-update-deps-js Gulp task.

import * as React from 'react';
import { render } from 'react-dom';

class Deps extends React.Component<any, any> {
    render() {
        return <div>Hello, World!</div>;
    }
}

const ignore = () => render(<Deps/>, document.body);

If you find loading your application locally starts to take longer, try including uses of your components in the deps.tsx file and running the 00-update-deps-js Gulp task. The use of your components in deps.tsx aren't there for function but just to get JSPM to include the them in the bundling step. In the deps.tsx provided, calling render on a React component forces the bundle the required dependencies even though the code below is not used.

Staging for release

The template provides all the Gulp tasks required for building, staging and deploying your application using msdeploy. Since this uses JSPM, we only need to include system.js, config.js and our JSPM bundled application when staged for release. The below scripts and gulp-useref build comments ensure those pieces are in place for working locally and when staged.

<!-- build:js system.js -->
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2FServiceStack%2FServiceStackVS%2Fblob%2Fmaster%2Fdocs%2Fjspm_packages%2Fsystem.js"></script>
<!-- endbuild -->

<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2FServiceStack%2FServiceStackVS%2Fblob%2Fmaster%2Fdocs%2Fconfig.js"></script>

<!-- build:remove -->
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2FServiceStack%2FServiceStackVS%2Fblob%2Fmaster%2Fdocs%2Fdeps.lib.js"></script>
<!-- endbuild -->

<!-- htmlbuild:appbundle -->
<!-- endbuild -->

<script>
    System.import("./src/app");
</script>

Workflow

Everytime you save a .tsx file, TypeScript is regnerating client side JS files, this is configured in the tsconfig.json. When you refresh, these updates are loaded via JSPM. tsconfig.json also has been configured to produce source maps for debugging and to work correctly with React.

When you create a new tsx file, be sure to include the browser.d.ts reference generated by Typings. This is so you'll get intellisense and type information from the various modules installed via Typings.

/// <reference path='typings/browser.d.ts'/>

Happy TypeScripting!