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.
npm install aurelia-cli -g
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.
mkdir auapi cd auapi dotnet new webapi
It will be better to work with Visual Studio Code if you’re using Linux. Because it will automatically download all dependencies. For example:
Updating C# dependencies... Platform: linux, x86_64, name=ubuntu, version=16.04 Downloading package 'OmniSharp for Linux (x64)' (24595 KB) .................... Done! Downloading package '.NET Core Debugger (linux / x64)' (54950 KB) ......
After that we’ll use this command to run our first dotnet core web api application:
dotnet run
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.
au new personlist
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:
Congratulations Congratulations! Your Project "personlist" Has Been Created!
Please go to the personlist folder with cd command. After that use this command to run aurelia project:
au run --watch
You’ll see this terminal output:
Application Available At: http://localhost:9000 BrowserSync Available At: http://localhost:3001
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
<template>
<h1>${message}</h1>
</template>
app.js
export class App {
constructor() {
this.message = 'Hello World!';
}
}
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
export class App {
constructor() {
this.message = 'Hello World!';
this.getValues();
}
getValues() {
fetch('http://localhost:5000/api/values', {
method: 'GET',
}).then(resp => resp.json())
.then(obj => {
this.list = obj;
});
}
}
app.html
<template>
<h1>Value 1: ${list[0]}</h1>
<h1>Value 2: ${list[1]}</h1>
</template>
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:
services.AddCors(o => o.AddPolicy("OurPolicy", builder =>
{
builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
}));
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:
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
loggerFactory.AddDebug();
app.UseCors("OurPolicy");
app.UseMvc();
}
After that we need to refresh aurelia project’s page. Yeeah that’s exactly what we want to see.
Value 1: value1 Value 2: value2
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.