Getting Started With Low-Code in 5 Minutes
Low-Code is amazing for a lot of reasons; One reason is that it allows mere mortals to create complex applications. Another reason is that it boosts your productivity by sometimes 5 to 10 orders of magnitudes
Join the DZone community and get the full member experience.Join For Free
Low code is a fascinating tool. I once measured the productivity difference between a low-code scaffolding system such as Magic and a human software developer, and Magic is arguably several billion times faster than a human software developer. Simply because it creates rich and complex web apps in seconds, instead of months required for a human to do the same. In addition, low code also allows for mere mortals to create rich web apps, resulting in that a human being with some basic IT knowledge can create complex web apps in seconds.
The recipe found below could probably be executed in 5 minutes after a couple of dry runs getting used to the process, so let's get started and create a rich and complex web app, and let's try to do it in 5 minutes. However, before we start, let's look at what we are going to create.
If you want to try out the app, you can find our Sakila example app here. Log in with "admin/admin" and play around with it as much as you please. Then realize the above app was created in literally 2 seconds. Adding the requirements to deploy the app and we are up to some roughly 5 minutes in total before you have the above app created and installed into production on a URL of your choosing. So let's get started. Before we start, realize the rest of this recipe was first published here, and it might change over time, since we are constantly trying to improve and simplify the process. Hence if you are reading this article some amount of time after it was published, please visit this link to make sure you are using the latest version of the tutorial.
This guide helps you deploy Magic unto a VPS or a private server. The guide has been tested with Ubuntu 20.04 (LTS) x64, but might work with other Debian-based distributions. You will need a VPS instance somewhere, which you can buy at for instance DigitalOcean. You will also need a domain and point two DNS A records to your server's IP address. Typically these would resemble the following.
- api.yourdomain.com - The Magic backend
- magic.yourdomain.com - The Magic frontend/dashboard
Notice - We suggest you don't buy the cheapest VPS droplet from DigitalOcean, but rather choose the basic droplet that costs you $24 per month. This is because the cheapest droplet is simply not powerful enough to run two web apps, MySQL, and docker. You might be able to manage with a $12 droplet, but definitely not the cheapest droplet. Only after you have created two DNS A records using your domain provider continue with this guide.
First, use SSH to log in to your VPS instance. This is typically achieved using something such as the following on *Nix based systems.
The IP address above needs to be the IP address of your VPS. After you've executed the above, you'll be asked for your root password on your VPS instance. Notice, if you are using Windows you can use Putty, and/or if you're using DigitalOcean you can use their web-based terminal interface as an alternative. When you have successfully logged into your VPS instance you can clone the entire magic deploy project into your VPS server using the following command.
git clone https://github.com/polterguy/magic.deploy.git
Notice - If the above gives you an error, you might need to install git using the following command and then run the above command again afterwards.
apt install git
When you have successfully cloned this repository, change into the magic.deploy folder using the following command.
Notice - The "docker-compose.yml" file needs to be manually edited to provide it with your email address, frontend domain, and backend domain before you execute the docker-compose command. You can do this with the following command.
And then look through the file for the following YAML nodes.
In addition to these YAML nodes.
In total there are 6 entries you need to change, and the email address needs to be a valid email address you own. The domain needs to be a sub-domain you own where you want to run your Magic installation. When you are done editing the docker-compose.yml file, hold down the CTRL key and click X, then type "Y" when Nano asks you if you want to save the file after you have edited the file, and save it with its existing filename. When you are done editing the "docker-compose.yml" file, you must execute the following commands in your terminal. This installs Docker for you, in addition to Docker Compose.
apt install docker docker-compose
After you have installed Docker and Docker Compose, you will have to create a virtual Docker network. This is necessary to make sure your containers have a virtual network to communicate with each other.
docker network create nginx-proxy
This command will create your Docker proxy network Magic will need to be able to connect all the docker images within your docker-compose file with each other. When you have created the above network, you can start your docker containers using the following command.
docker-compose up -d
Notice - The LetsEncrypt container in your "docker-compose.yml" file might need some 5 minutes to configure your SSL certificate due to the internals of how LetsEncrypt works. If you access your frontend, and/or your backend, and you get an error, and/or an SSL error - Just wait a few minutes and try to refresh your page. Only when you no longer get an error, you can proceed to configure Magic from its dashboard. To start this process, however, you will need to access both your frontend and your backend to initiate the process of retrieving an SSL certificate for both your web apps. If your domain is "yourdomain.com" and you chose the DNS A records illustrated at the beginning of this article, you can initiate this process by opening the following URLs in your browser.
Only when both of the above URLs returns success, and/or your Magic dashboard frontend, proceed with the rest of this guide. The above "docker-compose up -d" command will start 5 docker containers.
- nginx-proxy — The nGinx proxy that internally routes requests to either your backend or your frontend
- letsencrypt — The container responsible for retrieving and renewing LetsEncrypt SSL certificates for you
- db — Your MySQL database, used to create the "magic" database that Magic internally depends upon
- backend — The main Magic backend container
- frontend — The main Magic dashboard frontend container
You can now visit your frontend domain and set up Magic, assuming you've pointed your DNS A records to the IP address of your virtual server. Notice, to configure Magic login with "root/root" and do not change the database connection string, but choose mysql as your database type, and provide Magic with a root password, and just follow the wizard to the end. This process is similar to the process you followed as you configured Magic locally on your development machine.
Notice - As you click the login button, you have to provide Magic with your backend API URL. This is achieved by simply pasting in your backend API URL into the top textbox and click the tab key on your keyboard, at which point Magic will allow you to provide your username and password to log in to your Magic dashboard. Your initial username and password combination before you have configured Magic is "root/root". You will have to change this password after you have logged in to start the configuration process of Magic.
Notice - The "appsettings.json" file will be mounted as an external file reference by Docker, and this file will contain your Magic settings. Do not delete this file since it's crucial for Magic to work. However, be careful with the file, since it contains your database connection strings, JWT secret, and other highly sensitive information. Do not send this file on email or share it with anybody unless you absolutely trust the other party.
Notice - Due to the way Docker mounts files your "appsettings.json" file in your current working folder might not be changed as you save your configuration, resulting in an error during the configuration process, and/or as you save your configuration settings later. If you experience such errors, where your configuration doesn't seem to update when saving it, you have to manually restart your Docker images from your VPS using the following to reload the new configuration settings.
docker-compose down docker-compose up -d
This is unfortunately a problem with the way Docker mounts files, and there is really nothing we can do to prevent this at the time being.
Installing a Generated Angular Frontend
Once you have installed Magic you probably want to check out its capabilities in regards to Low-Code and No-Code, which is easily achieved by going to the SQL menu item in your dashboard, click the Load button, choose "Sakila", and then click execute. This creates a database for you called Sakila. For the record, you can of course also choose any existing and alternative create database MySQL script you've got instead.
After you've done the above you can go back to your dashboard in Magic and choose the "CRUD" menu item. Then click the little spiral arrow to refresh your server side cache, and once the page reloads choose the database you just created and click "Crudify all tables". Then choose the "Frontend" tab at the top of your page, give your app a name, choose the "angular" template, and click "Generate". After a couple of seconds you should be given a ZIP file as a download. Make sure you disable popup blockers for your domain if you don't get the ZIP file and click "Generate" once more.
Once you have generated an Angular frontend, you can just as easily install this on the same VPS. This is possible since the generated frontend also contains a "docker-compose.yml" file. The simplest way to do this is to upload your generated ZIP file to your VPS container using for instance from your local development machine. Yet again, use your VPS' IP address here.
scp foo.zip firstname.lastname@example.org:~
Then, log in to your VPS through your terminal, unzip the file and change into the unzipped folder with something such as the following.
unzip foo.zip cd foo
If you get an error when executing the above unzip command, you can install unzip on your VPS using the following command and rerun the above commands afterwards.
apt install unzip
When you have unzipped your Angular frontend you can start your Docker container using the following command in your VPS from within your unzipped Angular frontend folder.
docker-compose up -d
Notice - This assumes you have configured a DNS A record pointing to your virtual machine with the URL of where you want your frontend to be found, and that you used this URL as you generated your frontend - In addition to that you generated your app on your Magic VPS instance. The last part is important since by default a generated Angular frontend will use the same API URL as the URL you are using to generate your frontend.
At this point you should have your frontend up running on the sub-domain you chose as you generated your frontend. Now simply visit this URL in your browser, and after some 5 minutes of negotiating a new SSL certificate from LetsEncrypt your Angular app should work.
Notice - To login to your generated Angular frontend, use the same username and password combination that you used when configuring Magic itself.
Securing Your VPS
You might want to install a firewall on your Linux server to further secure your installation. This can be done by executing the following commands in order of appearance.
apt install ufw ufw allow 80 ufw allow 443 ufw allow 22 ufw enable
The above will install "Uncomplicated FireWall" on your server, for then to shut off all ports except port 80, 443, and 22. 22 is needed to allow for SSH into your server. In addition, you would probably benefit from making sure your operating system is updated with the latest patches as released by whoever is distributing your particular Linux installation.
If you'd rather install Magic in Azure's DevOps pipelines, you can read an article about this at DZone that illustrates one approach to getting Magic up running in an Azure DevOps environment.
And that was it. The first couple of times you do this, you'll probably need more than 5 minutes - However, I have been able to squeeze the entire process down to a handful of minutes myself after some practice. And in fact, ignoring setting up your DNS A records, and purchasing a Droplet or VPS, the entire process is simply copy and paste from the above recipe. Have fun :)
Published at DZone with permission of Thomas Hansen. See the original article here.
Opinions expressed by DZone contributors are their own.