Aurelia + Asp.net Web Api + Typescript + JSPM

Question

I have created an ASP.net MVC WebApi 2 project using Visual Studio Asp.Net SPA project template and installed Aurelia into the root folder by running the following jspm commands. I have selected TypeScript as a transpiler.

• jspm init

• jspm install aurelia-framework

• jspm install aurelia-bootstrapper

Now I need to install/configure TypeScript for the project.

Could anyone post steps to follow?

UPDATE How can I add Typescript support for the existing project? I renamed the app.js file to app.ts. I have added the tsconfig.json file as well.

Project folder structure:

tsconfig file:
{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es6",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "module": "system"
  }
}

App.Ts File

import { inject } from 'aurelia-framework';
import { HttpClient } from 'aurelia-http-client';


@inject(HttpClient)

export class App {

    message: string;
    http: any;

    constructor(httpClient: HttpClient) {
        this.http = httpClient;
    }
}

When I build the project, the build fails due to the following error.

Answer 1

The gulp task you are looking for is 'build' , which can be found here, it is part of the skeleton project.

Open build task on github

Answer 2

2021 Update

TL; DR: If you don't want to read the full answer, just clone the Sandbox repo and follow the instructions in the Getting Started section.

Here are all the steps if you need to set up an Aurelia SPA with TypeScript on an ASP.NET (Core).

1. Install Dotnet

First, download the dotnet framework. You can check if it's installed properly by typing dotnet in your terminal window. It should give you the following output.

2. Create an ASP.NET Project

Next, create an MVC application using the generator provided by dotnet. Generators are tools that let you quickly set up a complete application using a single command. For an MVC application, run the following command.

➜  dotnet dotnet new mvc --name Sandbox

If you don't provide the --name flag, the dotnet command creates the MVC project in the same directory you are running the command from.

Now that dotnet has created an ASP.NET MVC project, switch to the directory and open the project in VS Code.

➜  cd Sandbox
➜  Sandbox code .

To run, type the dotnet run command from the Sandbox directory.

➜  Sandbox dotnet run

3. Create an Aurelia App

First, install node from the node.js website. Then, from the Sandbox directory, run the npx makes aurelia command which will guide you through setting up a new Aurelia application.

➜  Sandbox npx makes aurelia

...

✔ Please name this new project: › app
✔ Would you like to use the default setup or customize your choices? › Default TypeScript Aurelia 2 App
✔ Do you want to install npm dependencies now? › No

...

Update the output.path property in the app/webpack.config.js file with the following code.

output: {
    // put the generated output in the `wwwrooot\lib` directory
    path: path.resolve(__dirname, '..', 'wwwroot', 'lib'),
    // ...
},

Add the following script tag to the Views/Shared/_Layout.cshtml file.

<script src="~/lib/entry.bundle.js"></script>

Replace the entire content of the Views/Home/index.cshtml file with:

<my-app></my-app>

4. Run the App

First, install the required npm packages by switching to the app directory and running the npm install command.

➜  Sandbox cd app
➜  app npm install

Once npm installs the packages, you can launch your app using npx webpack -w command from the app directory. This command tells Webpack to compile the Aurelia source code that includes the HTML, TypeScript (compiled to JavaScript), and CSS files and put it under the lib directory. The -w flag tells Webpack to watch for changes in the source.

➜  app npx webpack -w
...
...
webpack 5.31.0 compiled successfully in 5677 ms

Finally, start your ASP.NET server with the dotnet run command from the Sandbox directory. You should run this command in a different terminal window.

➜  Sandbox dotnet run
Building...

To verify if Webpack is watching for code changes, make a simple modification in the app/src/my-app.ts file and reload the browser.

For a detailed, step-by-step guide with screenshots and code snippets, check out my article on the same topic.

Of course, both the ASP.NET and Aurelia apps contain a lot of boilerplate code. If you are like me and like to start each new project from a clean slate, simply download/clone the Sandbox project from GitHub. Then follow the instructions in the README to set up a clean sandbox. It has a better project layout and a production-ready setup.

Answer 3

Using WebApi 2? I think I got this. It drove me insane for long enough.

Okay, from the top. Create a new ASP.NET WebApi project.

Open the project folder (the one where the .csproj file is) in a command prompt.

Run jspm init. Accept all the defaults except for picking Typescript as your transpiler.

Run

jspm install aurelia-framework aurelia-bootstrapper aurelia-pal-browser

Make the first section of your config.js file look like this:

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "typescript",
  paths: {
    "*": "client/*",
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  }

You can use src instead of client but I like client because there's a lot of source code elsewhere, if you understand me.

Okay, now we're getting somewhere. Pop open your Views folder, open up index.cshtml and make it look like this -

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Aurelia</title>
  </head>
  <body aurelia-app>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

Next, add a file called typings.json at the root of your project and chuck the following into it.

{
  "name": "WhatEverYouCalledThisThing",
  "dependencies": {
    "aurelia-binding": "github:aurelia/binding",
    "aurelia-bootstrapper": "github:aurelia/bootstrapper",
    "aurelia-dependency-injection": "github:aurelia/dependency-injection",
    "aurelia-event-aggregator": "github:aurelia/event-aggregator",
    "aurelia-fetch-client": "github:aurelia/fetch-client",
    "aurelia-framework": "github:aurelia/framework",
    "aurelia-history": "github:aurelia/history",
    "aurelia-history-browser": "github:aurelia/history-browser",
    "aurelia-loader": "github:aurelia/loader",
    "aurelia-logging": "github:aurelia/logging",
    "aurelia-logging-console": "github:aurelia/logging-console",
    "aurelia-metadata": "github:aurelia/metadata",
    "aurelia-pal": "github:aurelia/pal",
    "aurelia-pal-browser": "github:aurelia/pal-browser",
    "aurelia-path": "github:aurelia/path",
    "aurelia-polyfills": "github:aurelia/polyfills",
    "aurelia-route-recognizer": "github:aurelia/route-recognizer",
    "aurelia-router": "github:aurelia/router",
    "aurelia-task-queue": "github:aurelia/task-queue",
    "aurelia-templating": "github:aurelia/templating",
    "aurelia-templating-binding": "github:aurelia/templating-binding",
    "aurelia-templating-resources": "github:aurelia/templating-resources",
    "aurelia-templating-router": "github:aurelia/templating-router"
  },
  "globalDevDependencies": {
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "aurelia-protractor": "github:aurelia/typings/dist/aurelia-protractor.d.ts",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
  },
  "globalDependencies": {
    "url": 
    "github:aurelia/fetch-client/doc/url.d.ts#bbe0777ef710d889a05759a65fa2c9c3865fc618",
    "whatwg-fetch": "registry:dt/whatwg-fetch#0.0.0+20160524142046"
  }
}

then quickly run

npm install typings –g

or, if you hate waiting,

yarn global add typings

and then

typings install

Almost there, just two more steps.

First, create a file called typings.d.ts in the root of your src or client folder and add this line to it -

/// <reference path="../typings/index.d.ts" />

And finally, open up the nuget package manager console and hit it with

Install-Package es6-promise.TypeScript.DefinitelyTyped

and then

Install-Package es6-collections.TypeScript.DefinitelyTyped

And you should be all set.

This doesn't bundle things nicely for you and you're going to find that CSS is probably best added in the HEAD of your HTML - sorry! - but it's enough to get things working.

And for production, you don't really want WebApi hosting your SPA anyway.