Create an Aurelia Application with ASP.NET Core 1.0, Part 1 - Setup

July 27th, 2016

Let's demonstrate the simplicity and capabilities of Aurelia by converting a legacy JavaScript application to an Aurelia SPA. Today, I setup Visual Studio to work with Aurelia.

Last year, I said I would be focusing on Angular, but after I heard about the incompatibilities between 1.0 and 2.0 (I know, I know...everything's fine now), I decided to "sit on the sidelines" and watch things unfold.

Then, I heard about a new JavaScript framework called Aurelia and I decided to move forward with it for building SPAs.

Four months later, I'm "moving foward' with Aurelia.

It's about time, right?

As I mentioned before, I never had a need to create a SPA (Single Page Application). I couldn't justify it.

But then I thought, "I do have a SPA application...my Codemash pure web app that I built."

So why not convert it now? Everyone else is excited about Aurelia.

Working with Aurelia is so awesome, it's almost unfair. If you haven't checked it out, you should. Thanks @AureliaEffect #javascript

— Brandon Taylor (@alsoicode) April 10, 2016

Alright then, let's get started!

Setting up Aurelia in VS 2015

Since the release of ASP.NET Core 1.0, I feel comfortable moving forward with an ASP.NET Core 1.0 version of this application.

I want to make a clean ASP.NET MVC project with Aurelia added to it so we need to create an ASP.NET MVC Core 1.0 application.

Two reasons for this:

  1. I need to become more familiar with some of the client-side tools including jspm.
  2. At one point, I will need WebAPI. If I have 90% of the plumbing from an MVC project, I can always add the Web API bits later.

Based on when I started digging into Aurelia, the project was simple to set up.

  1. Create a New "ASP.NET Core Web Application (.NET Core)" Project.
  2. Instead of a Empty/Blank Project, select the "Web Application" and click OK.
  3. Since we are using a web server instead of the ASP.NET MVC application, we can just ignore the Controller and Views for now.
  4. In the Startup.cs, make sure your Configure method looks like this:
    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    loggerFactory.AddConsole(Configuration.GetSection("Logging"));
    loggerFactory.AddDebug();
 
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseBrowserLink();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
    }
 
    app.UseStaticFiles();
    app.UseFileServer(new FileServerOptions
    {
        EnableDefaultFiles = true,
        EnableDirectoryBrowsing = false
    });
 
    //app.UseMvc(routes =>
    //{
    //    routes.MapRoute(
    //        name: "default",
    //        template: "{controller=Home}/{action=Index}/{id?}");
    //});
}

    The only thing I changed is in bold.

    I commented out the MVC because we won't be using ASP.NET MVC...for now. I also added a .UseFileServer since we have a JavaScript application now.

    When we use a simple File Server, it uses the wwwroot to locate the files. The default.html is how we start our application.

  5. Follow step 3-5 in the "Initial Setup" section of this post to finish the setup.

  6. Your default.html should look like this:
    <!DOCTYPE html>
<html>
<head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
        SystemJS.import('aurelia-bootstrapper');
    </script>
</body>
</html>

    This will be the standard template for all of your Aurelia applications. Consider this as the host.

    As I mentioned before, the attribute in the body tag called aurelia-app will automatically point to an app.js and an app.html. If you change the attribute to aurelia-app="main", your Aurelia app will look for the main.js and main.html file instead.

  7. Here's our app.js and app.html files:

    wwwroot/app.js

    export class App {
    constructor() {
        this.message = "Welcome to Aurelia!";
    }
}

    wwwroot/app.html

    <template>
    <h1>${message}</h1>
</template>

When we run our application, we see the following:

Now that we have our Aurelia template started, we need to examine our existing application and move forward with the main screen.

Conclusion

For today, I demonstrated how easy it is to setup an Aurelia application in Visual Studio 2015.

In the next post, we will create our screens including the main screen and navigation.

Are you excited for Aurelia or are you hooked on Angular? Post your comments below.