How to quickstart Angular web application framework in the cloud

In short

In this article we'll be looking at how you can quíckly start a new or deploy an existing Angular web application project to the cloud (Microsoft Azure).

Getting started

If you already have a mogenius account, proceed to the next step. Sign up for mogenius - it's free and you can get started right away. Once you're signed up, create a new cloudspace that contains all your services for a project, like Angular. The services all reside in your secure cloudspace and can communicate with each other (Kubernetes namespace isolation). This is a convenient way to build a cloud-native software project that consists of one or more interconnected microservices. Once you have confirmed your email and phone number, you can create a new cloudspace:

Choose a name for your cloudspace and select the free tier to get cloud resources at no charge, or you can also choose a subscription to upgrade your resources when you create the cloudspace or upgrade at a later stage.

Setting up and deploying Angular framework

Now are ready you to deploy Angular! On the next overview page, you will see all your cloudspaces. Click on the name of the cloudspace where you want to deploy your Angular application. On the next page, click "Service Library" in the left menu:

Now there are two options to get Angular deployed:

1 - Creating a new boilerplate template

Create a new project and mogenius will automatically create and setup a boilerplate Angular template in your Git repository. You can then start coding in the newly created repo or re-use existing code. Click on “Add Service” underneath the Angular logo on the next page.

If this is the first time you are deploying a service, we need to connect your cloudspace to your repository. Click on “Connect Github” which will ask you to grant permission to access your Github repositories.

You will only need to do this once, your mogenius cloudspace is now connected to your GitHub account, and can access your repositories. Next, you can either use an existing empty repo or create a new one by clicking the “+” symbol. Select a name for the new repo and create it.

Select the branch in your repo and stage in your cloudspace you want to use. You can optionally add environment variables and change the resources like CPU cores, memory and persistent storage. By default we have pre-configured these for optimum and efficient usage of your resources.

Now, simply click "Save". Your Angular boilerplate template will be built, added to the specified Git repository, and deployed to your cloudspace at the same time so you can start using it almost immediately. Once the setup routines, build and deployment process are complete (usually a few minutes at most), you can start coding and access your Angular app at the specified URL. You can find all the details on your service's overview page, where you can also customize the resources and scale by adding additional instances for your service.

That’s it! You have created your Angular service and it will be available to access by other services via the URL that has been assigned to your service, in this instance https://angular-prod-yourcloudspace-qx6r52.mogenius.io

2 – Deploying an existing Angular app as Dockerfile

If you have already built your Angular application, use an existing docker file or simply add a docker file to your repo. Select “Dockerfile” from the Service Library.

If this is the first time you are deploying a service, we need to connect your cloudspace to your repository. Click on “Connect Github” which will ask you to grant permission to access your Github repositories. You will only need to do this once, your mogenius cloudspace is now connected to your GitHub account, and can access your repositories.

Now choose the repository with the Dockerfile in it from the dropdown menu.

Select the branch in your repository and the stage in your cloudspace that you want to use. Determine the port as specified in the Dockerfile. You can optionally add environment variables and change resources such as CPU cores, memory, and persistent storage. By default, we have pre-configured these for optimal and efficient use of your resources. Make sure to change the port according to your Dockerfile specifications.

Now just click "Save" and your Docker file will be deployed to your cloudspace and ready to use almost immediately. Once the setup routines, build and deployment processes are complete (usually a few minutes at most), you can start using your Angular app at the URL provided. You can find all the details on your service overview page, where you can also customize and scale resources by adding additional instances for your service.

That’s it! You have created your Angular service and it will be available to access by other services via the URL that has been assigned to your service, so you will have something like this: angular-prod-cloudspacename-qx6r52.mogenius.io