How To Create Aurelia Js User Manager App

0
92
Aurelia Js User Manager App

AureliaJS is a JavaScript client framework for web, mobile and desktop development. It is a frontend framework like Angular, ReactJS, and VueJS framework. Aurelia is an open-source, flexible and powerful JavaScript framework. In this article, we are going to learn how to build a Aurelia Js User Manager App. For this application, we are using a ToDo List application project that is already present in the aurelia documentation.

If you want to become familiar with AureliaJS and its basic syntax, including benefits, you can check out our Introduction to AureliaJS article. The article covers basic JavaScript syntax, Advantages & Disadvantages of Aurelia and also becoming familiar with Aurelia’s CLI.

Before starting the project, you will need to download a few things. You can check out the prerequisites given below:

1) You will need the sublime text editor and visual studio code for writing and editing the code. This editor offers a number of different benefits for working with JavaScript.

Download and install the visual studio code from “https://code.visualstudio.com/download”
Download and install the sublime text editor from “https://www.sublimetext.com/download”

2) We will also need NodeJS, which you can download and install from – “https://nodejs.org/en/ ”

Visit the Aurelia ToDo App link above and click on the “Download the Basic Aurelia Project Setup ” setup and download the zip file.

Download the Basic Aurelia Project Setup

Create another folder in your project folder with the name “UserManager” and copy all files from the downloaded zip file and paste in the “UserManager” folder.

Open the command prompt as an administrator and go to your “UserManager” folder. Then Run a command to open the project in Visual Studio Code “code”.

Open an index.html file and replace your typescript.js file with the esnext.js file. Check the index.html file as per given below:-

In the SRC folder, create a file with the name “customer.js ” and add the code below:-

Create an app.js file in the SRC folder and add the following code –

Create a file in the SRC folder under the name “main.js” and add the following code –

Again dive into the SRC folder, and create a file under the name “app.html” and add the following code. This file displays the heading from the app.js file

Save all files and in your visual studio code, open an integrated terminal using the view option which is on the upper side of the visual studio code editor and run a command below to install the HTTP server globally using NPM

"npm install -g http-server"
To run the project, run the command given below. You will see the project will automatically open on localhost:8000

“http-server -o -c-1”

localhost8000

Please check the screenshot of the project after starting the server

screenshot of the project

In this article, we don’t want bootstrap, but we are using the skeleton CSS from “https://cdnjs.com/libraries/skeleton” link.

For this go to “https://cdnjs.com/libraries/skeleton” and copy the following code “” by clicking on the copy link tag and paste it in the index.html file between the head tag as shown below:-

After you’ve added the CSS, you will see the CSS will be applied to project. Rerun the project and check the screenshot –

rerun the CSS project

Open the app.html file from “C:\project\UserManager\src\app.html” and create a field for name, email and phone number as shown below:-

Restart the server and check your field that will be added as shown in the image:-

check the feild

In the index.html file, add the following code:-

Open the app.js file and make a change to add local storage as given below:-

After using the local storage in the app.js file, restart the server and add the name, email address, and phone number. You will see that the information will be added to the database and you can also remove it. See the screenshot below;

restart the server

We hope that this article has been helpful and informative in understanding the basic building blocks of AureliaJS. We have listed one of the easiest way to start building apps using the Aurelia Framework. If you liked this blog or have any questions, let us know in the comments section down below.

LEAVE A REPLY

Please enter your comment!
Please enter your name here