Create an Aurelia Application With ASP.NET Core 1.0: Setup

Datetime:2016-08-22 22:09:38          Topic: ASP.NET           Share

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.

 Follow Brandon Taylor   @alsoicode

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

  15 15 Retweets

  17 17 likes

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.

  • Create a New " ASP.NET Core Web Application (.NET Core) " Project.
  • Instead of an Empty/Blank Project, select the " Web Application " and click OK.
  • Because we are using a web server instead of the ASP.NET MVC application, we can just ignore the Controller and Views for now.
  • 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?}");
        //});
    }

    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.

  • Follow step 3-5 in the "Initial Setup" section of  this post  to finish the setup.
  • 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.
  • 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 menus.

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





    About List