DEV Community

Cover image for Create a full stack web app in 5 minutes
Thomas Hansen
Thomas Hansen

Posted on • Originally published at aista.com

Create a full stack web app in 5 minutes

Today we released version 1.0 of Aista Magic Cloud. This is the first publicly available release of our services. With Aista you can create a full stack web application in 5 minutes. Try an app here if you wish, or create your own app below.

Below is a screenshot of an app that was created in 5 minutes.

A full stack Angular app created in 5 minutes

How it works

First you have to create a "cloudlet". A cloudlet is kind of like your own private backend VPS, except it comes with Magic Cloud pre installed. Magic is a software development automation tool that literally does your job by automatically creating your code, resulting in a CRUD web API, and a complete Angular frontend.

When you have created your Magic cloudlet, you have to use Magic to wrap your database. This process reads meta data from your database, and then automatically generates a Hyperlambda web API wrapping your database with all CRUD operations. The web API supports the following;

  • Paging
  • Filtering
  • Sorting
  • Foreign keys (lookup fields)
  • Types
  • Etc, etc, etc

Basically everything you need from a web API to create a frontend. Below is a screenshot of the process.

Automagically create a CRUD API

You can configure the CRUD generator any ways you see fit, but the default settings should be good enough to get you started. You can also modify the resulting Hyperlambda afterwards.

SQL Studio

If you don't have your own database, you can design a new database using SQL Studio. SQL Studio allows you to visually design your database with zero SQL knowledge. You can also connect to an existing database using the "Configuration" menu, or download a plugin database. Below is a screenshot of SQL Studio.

Visually designing your database using SQL Studio

When you have created your web API, you need to generate your frontend. This is also done from the CRUD Generator menu, except you'll need to choose the "frontend" tab. Below is a screenshot.

Generate a CRUD datagrid frontend

As you are generating your frontend, you can choose colours, which components to include, etc. However, the resulting code is perfectly valid Angular code, and can also be modified by Angular developers to meet your personal requirements.

Deploy your Angular frontend

When you have generated your frontend, you'll need to deploy it. This is done from Aista hub by creating an Angular cloudlet. Below is a screenshot.

Deploy your Angular cloudlet

The entire process takes about 5 minutes, at which point you end up with a full stack web app. You can watch me go through the whole process in the video below.

To get started go to the below link.

Oldest comments (1)

Collapse
 
polterguy profile image
Thomas Hansen

Thx Luke, I created a listing, but it only allows for 400 characters, right ...?