What Does the Dome Platform Do?

Tl;dr

Deploying a full-stack application can be a difficult process.  If you need a quick and easy way to deploy all of your website’s resources - all in one place- Dome Platform is a one-stop shop to quickly and easily deploy your front end, back end, and database.

Introduction

“It works on my machine!” You’ve just built a fabulous new website for your company.  But it is only running locally on your computer. It is a work of art, and you are ready to share it with the world. You need to push all of the resources for your site to servers on the internet.

Let’s assume you have a front end for the customers to interact with, a backend where business logic takes place, and a database to store any information gathered during the application session.  

Many services can deploy and host a front end… but then you need another service to host your backend, and probably a third for your database.  It gets to be a juggling act to keep everything up to date, and deploying to three locations is complicated and will invariably lead to errors. There are also important security concerns.  If your database is exposed to the open internet for your backend server, you have a security vulnerability.

Do you know what would make this a lot easier? Deploying all three servers into one service - all simultaneously wrapped in a secure environment to protect your site (and your customer’s data!)

Dome Platform can do all this for you - with just a few steps, all in one place.  In this post, we’ll walk through the steps of deploying and launching a simple “To Do” application with Dome.

What is deploying?

Deploying is the process of getting your code up onto the server.  You might have different folders for the front end and the backend. In the case of the “To Do” app, there is one codebase for the front and back ends - using NodeJS (You can see the code on Github)  

Github is a common place to store your code online - making it easy to collaborate with other developers.  We will also use the code on GitHub as the reference point for deployment.  This is a common approach for website development.  If the main developer is on vacation, another developer can push code into GitHub without interrupting the main developer’s beach time.

We can use the GitHub repository to deploy the full stack of our application to Dome.

The App

The app is a very simple NodeJS backend with a Postgres database:

When the user loads the page, they receive a list of to-dos and can add additional tasks to the page.  When a task is added, the webpage makes a connection to the backend (/api/todos), sending the new task’s name to the backend.  When the NodeJS server receives the task, it sends a request to the database to add the task to the “todo” table in the database. Once the database has been updated, the backend requests the full to-do list from the database and returns this list to the front end.

To keep the information in the database secure, the connection from the backend to the database requires a server host, username, and password. For my code to be easily installed in different environments (for example: my computer vs. Dome), I have placed all connection details for the database in environmental variables.  They can be set locally for my computer, and updated on deployment to Dome to use different parameters. In the code below, the server login details for localhost are shown:

‍

Database Settings

DB="todo_app"DB_USER="postgres"DB_PASS="postgres"DB_SERVER="localhost"

‍

Deploying our app

To deploy your application on Dome, you’ll need an account.  Sign up for free at https://trydome.io.  Once you create your account, you’ll arrive at the dashboard.  To deploy our application, we’ll need to complete 3 launches:Launch a projectLaunch a datastoreLaunch a web service

For the remainder of this post, we will deploy a version of the to-do app, following the three launch steps outlined above.Launch a project:

From the Dome Platform dashboard, we need to launch a project.  This will hold our todo app.  If you have multiple applications, you can launch multiple projects in your dashboard.

Launch a project and give it a name (I used “todo-app-project”). Clicking the box on the right-side name field will generate a random name for you.  

Your new project will launch and you will be placed into the project (there is a project dropdown, and your new project will be highlighted).

Launch our datastore

From your new project, click Launch -> Data Store.

1. Choose Postgres (version 15) (if you want to use a different database type, Dome offers many different options for your data store. In this case, the app was written with PostgreSql).

2. Pick a name: “todo-database” seems a nice descriptive term.

3. Pick your region in this case we’ll deploy our application in  “US Central”

4. The next choices are Database Access (username/password for access) and Network Access (port 5432).  We will stick to the default values here.

5. Database size. For a small TO-DO list, we can pick the smallest size (and that is still overkill.) If your site will need a bigger disk size, you can update the option here.

6. Resources - again leave to default - our DB does not require much in the way of resources.

7. Launch instance.  When you click this, a database will be deployed in US Central.You’ll be taken to the database status page, where you can find the connection details. Wait until you see that the database is deployed - it should just take a few seconds.  We’ll need the HOST value in the next section.  Leave this page open, or make a copy of the value for later.

It is also important to note that the HOST is a local variable.  Your Postgres database is not exposed to the internet, so only your application will be able to access the stored data.

Launch the webserver

The database is now deployed, so let’s deploy the Front & backend services.

‍
1. From the Launch Now - pick Web Service.

2. Give your service a name, and pick the deployment location. You can pick a domain (like trydome.io), but we’ll just use the name given to us from the tooling. We’ll launch in US-Central so that our web server is close to the database.

3. You can launch your web service from a pre-built Docker image or from a Git repository,  Since we have a Git repo, we’ll use that:

‍

4. We will use the HTTPS Git URL. You can find this under the green button on the GitHub repository page.

5. There is no Dockerfile in our repo, so we will use the default builder. Choose the main branch to build the site.  Dome Platform will create a docker build of our application using this builder.

6. Environmental Variables.  Remember we had variables that allowed the site to run locally? We need new values for the Site running on Dome. We will need to enter 4 variables:

‍

DB: postgres

DB_USER:

postgresDB_PASS:

postgresDB_SERVER: (the HOST value from the database page)

‍

7. Networking. The Node server is running on port 8080. This port is not exposed to the internet by default.  Since we want people to access our server, we need to specify an external port: 443. This is the HTTPS port and Dome will take care of all the certificates required to host the webpage securely.

8. Resources - no need for a bigger server for our sample app., so we can use the default values.

9. Launch service!

10. You’ll land on a page that shows that the service is building:

11. Dome is building a Docker container for the application. Once the build is completed, we can deploy our application:

12. Select the build and press “play” to deploy. Once your build is deployed, confetti will fly across the dashboard, and you’ll see a URL where you can access your application.

Click the URL and you will see that you are in business:

Conclusion

In this post, we walked through a full stack deployment of a simple web application. Using Dome Platform, we deployed a database, the front & back ends of our app with ONE tool with a few simple steps. In just minutes  we are now able to share our website with the world. When changes are made on our GitHub repository, we can just click the Build, wait for the build, and redeploy! Easy peasy, lemon squeezy.

In this example, we used NodeJS and PostgreSQL, but Dome Platform can be used with many backend server languages and database options. No matter what you have built, it can be deployed at Dome. Deploy one project. Deploy all your projects. The Dome team is here to help if you have any questions.

If you’d like to try Dome, sign up at https://trydome.io/signup!