What we want to achieve We all know it. The most common architecture for web applications is one of many combinations between a front-end framework, something based on Node, and a document-based or relational database. To demonstrate how quickly and easily we can create a connection between these three components, I decided to create a simple project for a comments section. The front end will consist of simple html, CSS and vanillaJS provided by an nginx container. The backend will be a straightforward NodeJS Express server connecting the frontend to a MariaDB relational database. The frontend will contain a form to enter a name and message that will be sent to the express server to be stored in the database. The saved data will then be sent back to the frontend to be displayed below the form.
Setting up a mogenius cloudspace for my project After we create an account and confirm our phone number for 2-factor authentication, we see the empty cloudspace overview.
We can now create our first cloudspace by clicking on the plus icon in the upper right corner or on the "Create Cloudspace" button in the middle of the screen. This will take us to the "Create Cloudspace" form. After entering the name, your free subscription, if not already in use, is already selected, so you can proceed by clicking the "create new" button. That will take you directly to the Cloudspace overview, where you can choose to deploy your own Dockerfile or start with one of our boilerplate templates.
Creating my front-end service setup
Since an nginx service is available in the service library and we are starting from scratch, we can select a template and search for nginx. Then click "Add Service" to get to the service settings.
After entering the name of the service, we can now select the stage, in this case production, since we have not yet created another stage, and select a deployment strategy that will be explained in another tutorial. For now, we can leave it at recreate. Below that, we'll be prompted to connect our GitHub account so we can push the code somewhere. After connecting our GitHub account, we are prompted to create a repository where the boilerplate code will be copied and where we will push our front-end code. Below we see more settings, which will also be described later in another article. For now, we can proceed by clicking on the "Create Service" button, which will take us to the service details page. On the service details page we can find the most important information about the service we just created. In this view we find the external hostname, i.e. the URL where your service is available on the Internet, and the internal hostname, i.e. the URL where your service is available to any other service in your cloudspace. Below that, we find the link to the GitHub repository we recently created. To check if everything worked as expected, we can click on the external hostname link, which should open a new tab with the nginx welcome page. If everything works, we can close the page and continue by clicking on the GitHub link.
Now we want to clone our repository to start building our frontend page. To do this, we'll click the "Code" button and switch to the "HTTPS" tab if it's not already open. We can copy the link and switch to our preferred terminal to clone the repository. Make sure you have git installed on your local machine.
After you have cloned the repository, you can go to your code editor and open the folder where you cloned your repository. The folder should contain a Docker file, an HTML folder, and the readme.md file.
First, start the Docker container locally or just launch the HTML file with the Live Server extension or another local server tool. Now we can design the frontend with hardcoded data and some Lorem ipsum text. It should contain a Textbox for the message, a text input for the author and you can also create some example posts to design the message that will be displayed after the user has submitted the form. Later we will write a dynamic name and a comment in the above form, which will appear below the form after submission. It's time to make the first submission to check if everything works as expected. So let's run > git add . , >git commit -m ‘mogenius rocks’ and then > git push. Now switch back to mogenius and you should see a list of tasks that need to be done by the system to deploy your frontend service. If the list in the top right corner does not open automatically, please click on the icon left to your user in the top navigation and make sure that the "Hide me next time" checkbox is not selected. After all tasks are completed and the app is successfully created and deployed, we can go to Stages & Services and select our front-end service from the list. Here you will see the external hostname of your service, which you can click to jump directly into the deployed app. The page should be the same one you saw locally. If it is not, make sure that none of the creation steps went wrong. To do this, switch to the ci/cd pipeline tab.
Adding a backend service
For now, we are done with the frontend service and can continue building our backend service. Let’s switch over to the Stages & Services page and click on the Add button. Select ‘Use a Template’ and search for Node. In the list, we can see the Express with Typescript template, which will be used. Click on add service and continue like we did with the fronted service. But don’t submit yet. As we are building our architecture without a Gateway, we need to expose the service. To do so, open the Ports section and make sure that the internal port that was already created has the exposed checkbox checked. Everything else should work by default, so continue by clicking the Create service button. After the service has successfully been created, and the label shows ‘RUNNING’, we can check the service by clicking on the hostname. The link should return ‘OK’. Let’s go back to the service details page and jump into GitHub again, to also clone this repository as we did with the frontend service. Open the folder in your code editor and create two routes. The first route shall be a get route, returning a JSON object with an array of messages. The messages should contain an author and a message string. Add some lorem ipsum text and start your local server. Open your routes and check if your get request returns everything as expected. Now, create a post route, which shall expect an author and a message in the request body. For now, just print the body to the console. The request will probably be blocked by the default cors policy, so make sure you set the cors options origin to your frontend service hostname.
Now let's start our local backend and switch back to our frontend to add the functions that retrieve the routes to get or publish the data. When you get the correct data from your localhost route, start attaching the messages to your HTML file. Then, create another retrieval request to your post message route and connect it to your HTML form so that you can insert the data and submit it to your backend. You should see the data appear in your backend logs.
If everything works fine, leave the services running and switch back to mogenius to create a database.
Setting up a database
To create MariaDB, we add a service as we did when creating the frontend and backend, but there are some differences now. After creating the containing repository, you need to go to the port settings and share the database port, since we want to test it from our local environment. The Environment tab should already be open showing some pre-filled and some empty input fields. Here we need to enter the MariaDB username, password and root password that we need to connect to our database. These environment fields are declared as KeyVault, which means that we need to create a new secret to define these variables. You can click on the plus icon to create a new secret. The name is just for recognition, while the key is the actual value that our environment variable will have later.
After we have set the environment variables, we can create the service.
Once the database service is successfully created and shows the "RUNNING" label, we can test the database by accessing it remotely. I will use Sequel Ace, a free DB management tool, to do this, but you can also use DataGrip or another DB management tool, just make sure that the tool supports MariaDB.
To create the table for your messages, please log in with the username 'root' and the root password you set in the environment settings when you created the service. If you can't remember this, just open the 'Secret' page in mogenius and copy the secret you recently created by clicking the copy icon.
After you log in to your database, create the table where the messages will be stored. I recommend adding an auto-incrementing column for the ID, an author column, and a message column. To sort the query afterwards, you can also create a "createdAt" column. Enter some test data into the table, which we will read in the next step.
Connecting backend and frontend It's time to switch to the backend and finish the setup by connecting the frontend to the database. If your local environment is down, please restart the frontend service and install the MariaDB package on your Express server. After that, restart the backend service as well. Enter the DB configuration like it is described on the MariaDB Website .
After you have done this, it is time to pass some real data to the frontend. Just pull your table data and pass it to your frontend. Since we have already connected the frontend and the backend, we can now simply check that the frontend is displaying the correct messages that we entered into the database. If everything works as expected, you can change the console log on the post request to a real query to pass the data to the database, which is also described on their website . After you do this, everything should already be working in your local environment. You can also add a createdAt column to your DB to sort the entries that were made. Once you have verified your application, shut down your local environment and change the routes of your frontend query to the hostname of your backend service, which you can find in the service details. After that, push everything to your repositories and watch mogenius run the deployment jobs. After the jobs have run, switch to the service details page of the frontend service, where the label "Running" should appear. You can now open the link for the external hostname and have fun with your new comment area.
As you could see, its extremly simple and fast to create or deploy your application on mogenius. Just create some services and try it yourself. Stay tuned for new tutorials.
