Simple Aurelia Application with Web API

Hi. I’m very excited because this post will be the second post I wrote about aurelia. In this post I’ll show Simple Aurelia Application with Web API. If you don’t know what’s it Web API you can click this link.

Requirements

As you might guess you need to install Aurelia and Dotnet Core. If you use Windows don’t worry about it. Because you have everything to create sample application with dotnet core when you install VS 2017. If you use Mac or Linux be relax. Because there is a Visual Studio for Mac.

Linux Users? I’m so sorry but there is no Visual Studio. So, which means you need to install dotnet core with terminal. You can check this link to see how to install dotnet core for different Linux distros.

Installing Aurelia

Let’s assume you install dotnet core. We’ll use npm to install aurelia-cli. All aurelia project will create with aurelia’s cli. Don’t worry you can use without cli. But, this post will show aurelia’s cli.

If you’re not sure cli is installed you need to check it with au command.

Create First Web API Project

Firstly, I’ll show how to create web api project. For example, I created a new folder called auapi.

It will be better to work with Visual Studio Code if you’re using Linux. Because it will automatically download all dependencies. For example:

After that we’ll use this command to run our first dotnet core web api application:

It should be a url like this: http://localhost:5000/api/values

If everything is ok congrats we completed first part.

Create First Aurelia Application

We created web api project. It still running. We need to create new au application. Use this command to create an application with au cli.

If you’re new in aurelia you should choose default settings. I assume you choose the default settings. After choosing, aurelia cli will install dependencies. If everything is ok you’ll see this message:

Please go to the personlist folder with cd command. After that use this command to run aurelia project:

You’ll see this terminal output:

Now, our project running on port 9000. Also you can use BrowserSync with port 3001.

Simple Aurelia Application with Web API

Yes, we did what we need require as basically. We know api endpoint and front end url right now. Maybe we can use default endpoint and its values. We’ll use default endpoint and its values for first example. So, I won’t show how to create controller and Api endpoints in this post.

Let’s open our aurelia project’s src directory and after that open app.js file with open.html. These sample files came when you create new project.

app.html

app.js

We’ll modify app.js file and app.html file. Firstly we need to create a sample method to fetch sample data in app.js file. We’ll change app.js file like this:

app.js

app.html

Page will refresh automatically when you save one of these files. If you’re getting errors about CORS don’t worry it’s about security reasons.

Enable CORS in Asp.NET Core

This is a simple trouble and we hate this simple trouble. Now, we’ll solve this problem.

First Step: Open Startup.cs File

Open Startup.cs file. You’ll see two methods named ConfigureServices and Configure

Second Step: Modify ConfigureServices Method

We must modify this method if we want to escape cors problems. Our code should be like this:

We added new cors policy called OurPolicy with any allow any method, any origin and any header settings.

Third Step: Modify Configure Method

We changed ConfigureServices method. We cretated new policy called OurPlicy. We declare this policy in Configure method. Our new Configure method should be like this:

After that we need to refresh aurelia project’s page. Yeeah that’s exactly what we want to see.

This post completed. In this post we have seen how to create Simple Aurelia Application with Web API.

If you have a question about this post you can send a comment.

Thank you for reading.

admin

Hi. I’m Ali. I’m 23. I graduated Mehmet Akif Ersoy University from CS Related Department.

I can code with all programming languages. But today I’m writing .NET and JavaScript.

You may also like...

  • TAYFUN ÇELİK

    Bu Aurelia nedir tam anlamadım dotnet ile alakası var .Ben javacıyım.C# dependency indirme falan yapılmış .Java ile nasıl kullanılır.Yada C# olmadan web app olarak kullanılmıyor sanırım

    • Ali

      Hocam merhaba. İstediğiniz herhangi bir dille kullanabilirsiniz. Ben bunu dotnet tarafında yaptım. İkisi farklı aslında teknoloji olarak. Backendi dotnet core ile yazdım aslında onu belirtmek içindi.

  • Pingback: Simple Aurelia Application with Web API - 2 - Ali GÖREN()