To get going I highly recommend going through Aurelia’s get started guide. In the end I decided to try out Aurelia mostly based on the fact that Rob Eisenberg is behind it. The number of choices for a spa framework is almost over whelming. I decided this would also be a good time to try out one of the single-page application frameworks instead of using razor. Now that I have a web API for my contacts I wanted to go back and add a front end to view them. The first post in the series can be found here. The contact in the post response will contain the ID assigned by the API.Update: A series of posts has been made covering this same topic with the RTM versions of both ASP.NET Core and Aurelia. Then a save function is added that makes a post request to the ASP.NET API and return a new contact based on the response from the post request. The lines specific to the usage of the NSwag generated client are highlighted. Next, add a contact-list.ts file which is what the template from above will be bound to. We aren’t really going into the Aurelia specific bits, but even if you are new to Aurelia this should be readable. This is a mix of HTML and Aurelia’s syntax. All of the following will be taking place in the src directory of the Aurelia project.įirst, add a file named contact-list.html which will hold the template for the UI of the contact list with the following contents. After all the options are set click Generate Files.Īgain the UI bit mostly comes from the docs, but I’m going to show the bits for the contact list here and the rest of the UI you can look at the sample code. I output to the Aurelia project directory under /src/contactApi.ts. The final option that needs to be set is the Output file path and this is the location you want the generated file to be. For Template, we just need an Aurelia based client. There are a lot of options to play with, the highlighted options are the ones that are important for this sample. In the Outputs section check the TypeScript Client checkbox and then select the TypeScript Client tab. First, select the OpenAPI/Swagger Specification tab and enter your API’s specification URL in the Specification URL box. There are a few options we will need to set. The application will open with a new document ready to go. Now that we have the OpenAPI/Swager specification URL for the API switch over to NSwagStudio. For example, using a local instance of the sample solution’s Contacts API the URL is If you are using the Swagger UI you can find a link to your swagger.json under the API title. Next, make sure your API is running and get the URL of its OpenAPI/Swagger specification URL. NSwagStudio can be downloaded and installed from here. This post is going to use the Windows application which is called NSwagStudio. NSwag provides multiple options for client generation including a CLI, code, or a Windows application. ![]() Use NSwagStudio to Generate an API Client I will be coving the contact related bits of the UI, but the application stops short of implementing the save functionality at this point. The application that the Aurelia CLI outputs is very basics so the Aurelia docs for creating a to-do application and creating a contact manager were used to build the basics of the sample application. We are going to install a couple of UI related items, Bootstrap and Font Awesome, as well as the Aurelia Fetch Client which we will need to hit our API. Now the project needs a few more dependencies installed. ![]() ![]() If you do go with Yarn some of the following steps will need the npm commands translated to Yarn commands.Īfter the project creation process is complete use the following command to change to the new directory created for the project. The sample project is using npm, but Yarn is also an option. Next is the setup of the project and here we will be using the Default TypeScript App.įinally, select how you would like to manage dependencies. First is the name of the project, contacts-aurelia in this case. The above will result in a walkthrough of the project creation process. Keep in mind that the CLI creates a directory with the project name. Next, use the following command to start the project creation process using the Aurelia CLI. Install the Aurelia CLI using the following command from a command prompt. Before getting started ensure you have npm installed. NET CLI template from Microsoft that has Aurelia support so to crate the Aurelia project we will be using the Aurelia CLI.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |