Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

DZone's Guide to

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

In the first article in a series, see how to set up an Aurelia app using ASP.NET Core 1.0.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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

 1515 Retweets

 1717 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 toaurelia-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:

    Simple Aurelia Application


    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.

    Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

    Topics:
    asp.net mvc ,visual studio ,aurelia ,single page application ,framework ,application ,javascript

    Published at DZone with permission of Jonathan Danylko, DZone MVB. See the original article here.

    Opinions expressed by DZone contributors are their own.

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}