Magic

Create Web apps in 1 SECOND


Getting started with Magic

Prerequisites

  1. Visual Studio or VS Code + DotNet CLI
  2. NodeJS
  3. Angular
  4. MySQL or Microsoft SQL Server
  5. Download Magic from the link above

1. Start Magic

  1. Open the “magic.sln” file in Visual Studio and click F5. If you’re using Mac or Linux, open a terminal window in the backend folder and type dotnet run
  2. Open a command prompt/terminal in the frontend folder and execute npm link
  3. After npm link is done execute ng serve
  4. Go to localhost:4200 with your browser
  5. Login with root/root

2. Setup Magic

To setup Magic, you’ll have to create an authentication and authorization database. Magic will do this automatically for you, but you will have to give it a valid connection string, in addition to choosing a “root” password.

Notice - It’s important that you keep the {database} parts of your connection string as is. This is because Magic will substitute this with whatever database catalogue you want to query as you open a database connection later. You also need to choose the correct database type - Implying MySQL or Microsoft SQL Server, depending upon what database type you want to use Magic with.

Setup Magic

Click “Save”, and Magic will spend some few seconds configuring.

3. Crudify your auth database

Click the “Crudify” menu item, and choose the “magic” database. Select all tables, and click the “Crudify all” button. After a couple of seconds, Magic have created CRUD HTTP endpoints necessary to administrate your users and roles.

Crudify your Magic database

4. Crudify your own database

Select your own database, and then choose “All tables”. Click “Crudify all”. After a couple of seconds, you’ll have CRUD HTTP endpoints wrapping every single table in your database.

4.5 - No existing database?

Download one of these free database scripts for SQL Server or MySQL.

Run one of the above database scripts through “SQL Server Management Studio” (SSMS) or “MySQL Workbench”.

5. Generate your frontend

Go to “Endpoints”, give your application a name, and choose a template. Click the “Generate” button, and after a couple of seconds, you’ll get a zip file. Unzip the file Magic gave you, open a terminal/command prompt, go to the folder where the zip file was unzipped, and type npm link. When npm link is done, type the following into the same terminal window.

ng serve --port 4201

This time you’ll have to choose a different port, since port 4200 is already busy serving your Magic Dashboard. When ng serve is done transpiling your Angular project, open localhost:4201, and login with your root username and password.