Overview

This tutorial will guide you through how to deploy a React frontend + C# backend that connects to a Postgres database. You can follow along by cloning the sample app repo on GitHub.

Configure your app

You may be used to running your application in development mode on your local workstation. In this tutorial, we'll make some changes to an application that will get it ready for a production deployment in the cloud.

In this section we'll use environment variables to configure how our app will listen for connections and connect to our Postgres database. Environment variables are name-value pairs that are loaded into our application at runtime, and they are often used to pass configuration details to an application. Environment variables are a good way to provide authentication credentials to an application without hard-coding them into the application itself. Keeping configuration details out of your source code also means you can safely check your code into a Git repository without publicly exposing sensitive data.

1.  Call UseNpgsql 

We will tell our application to connect to a Postgres database by calling UseNpgsql() and pass this method a connection string that we will build in the next step.

services.AddDbContext<ApplicationDbContext>(options => options.UseNpgsql(BuildConnectionString()));

2.  Build a connection string

Next we will define a new method that we'll call BuildConnectionString() which will build a connection string from a collection of environment variables and pass the result back to UseNpgsql(). The reason we build a connection string in this way is that the values of these variables won't be known until we deploy a Postgres database on Uffizzi. So, by using variables, we can inject them in at deployment time.

In our case, the environment variables we will expect as input are DB_HOST, DB_PORT, DB_NAME, USER_ID, and PASSWORD. These will tell us where the database is and how to connect to it. Since we're deploying this app on Uffizzi, these environment variable will come from our Uffizzi app environment. In the next section we will add these variables to our app environment in Uffizzi so that our application can find them when we deploy.

Let's define our method as follows:

private string BuildConnectionString() {
    var server = Environment.GetEnvironmentVariable("DB_HOST");
    var port = Environment.GetEnvironmentVariable("DB_PORT");
    var database = Environment.GetEnvironmentVariable("DB_NAME");
    var userId = Environment.GetEnvironmentVariable("USER_ID");
    var password = Environment.GetEnvironmentVariable("PASSSWORD");

    return $"Server={server};Port={port};Database={database};User Id={userId};Password={password}";
}

Deploy your app to Uffizzi

1.  Create a new app environment

If this is your first time logging in to Uffizzi, you'll see welcome page. Select Get started now. If you've used Uffizzi before, navigate to the Home screen, then select the Create a new environment button from the My App Environments section.

On the next page, you're asked to choose your app environment. Select the Free option, and then give your app environment a name, e.g. C-Sharp-Example. When you're done, click Go to next step.

2.  Import your app from GitHub

Connect your GitHub account by selecting the GitHub option in the next step. Uffizzi will open GitHub in a new window and prompt you to login. You will be asked to allow Uffizzi read access to you repositories on GitHub. Select All Repositories, then confirm. (Note: You can revoke Uffizzi's access or limit access to a specific repository at any time. In GitHub, go to Settings  >  Applications then select Configure next to Uffizzi.com.)

Once you've granted Uffizzi access to your repositories, navigate back to Uffizzi and select your app repository from the dropdown list:

You'll be asked to confirm the branch and whether you want continuous deployments turned on. This option tells Uffizzi to automatically redeploy your application when new commits are pushed to your branch. You can leave this option turned On.

3.  Define environment variables

In the next step, you're asked to configure the HTTP port and environment variables for your app. Here HTTP Port refers to the port number your application is listening on. The default HTTP port is 80, but you may need to change this value depending on your application. For this tutorial, we'll keep the default of 80.

Next take a look at the Environment variables section. Remember our environment variablesDB_HOST, DB_PORT, DB_NAME, USER_ID, and PASSWORD? This is where we enter those. Where it says Environment variables, click Edit. This will bring up a modal to enter your variable.

In the NAME field, type DB_HOSTand in the VALUE field select the text box. You will see a dropdown appear with several suggested values in angle brackets. These are placeholder values that Uffizzi will generate after it creates your database. By using the placeholders, Uffizzi will fill in these values when they are available, so you don't have to go back into your configuration and edit them later.

For the first value select <database host>. Then click the blue Add environment variable button below to add a new name-value pair. Repeat this process for the remaining variables:

DB_PORT = <database port>

DB_NAME = <database name>

USER_ID = <database user>

PASSWORD = <database password>

When you're done, click Save and then Go to next step.

4.  Select a database

Click Select under the Postgres option. On the next page, select a database tier. For this tutorial the Standard Dev Series is fine.

You can leave the default configuration for both the database version and database name. Select Go to next step when you're done.

5.  Review and deploy

Review your selection, and then click Deploy Now.

Next, you'll be taken to your app environment dashboard. It may take several minutes for Uffizzi to autodetect your app type, build and then deploy your app. You can view your build status in the Activity Log. 

Once your app is finished deploying, the OPEN APP button will be enabled. Select this button, and Uffizzi will open your app in a new tab. You should see your application running.

5.  Create database tables

For the purposes of this tutorial, we'll manually create a table in our database and add some data to it. From your environment dashboard, select OPEN DASHBOARD under the Uffizzi Postgres section. This will open an administrative interface for your Postgres instance that allows you to click to create database tables, export data, and run SQL queries. 

From the Adminer database dashboard, select SQL command on the left to manually input SQL commands, then copy and paste your SQL statement in the the text box. Once you're done, select Execute to submit the query. For example:

Once the table is created and data added, you can review the database schema:

Now that our database table is created, our application should now be able to read from and write to the database. 

Updating your app

Adding new features to your app is a simple as git push <branch>. Remember the Continuous Deployments feature that we left turned On? As mentioned before, this features tells Uffizzi to watch your GitHub branch for any changes, and triggers a redeployment if a new commit is detected. This means you don't need to go back into Uffizzi to manually deploy updates; you can do them right from your console. Just make sure that the branch you are pushing to is the same one deployed to your environment.

Selecting a different branch will cause Uffizzi to deploy the newly selected branch. A good practice, however, is to create a new environment and deploy test branches there. This way, you're not disrupting any users of your production app (i.e. master branch).

That's it. You now know how to deploy an C# + React + Postgres application on Uffizzi!