Dev Deployments for a Full-Stack App in Minutes

Creating feature deployments in Voyage for our Node, React, Postgres app.

Live demo deployment

Voyage makes it super easy to deploy a full stack application to a demo environment quickly. The only time required is typically the initial integration of Voyage into your application.

I’m going to reference an example application called ShipFinder. This app consists of a Node.js API, Create React App Front-End and Postgres database. This application is contained in a single monorepo. Voyage does allow multi-repo deployments but it does streamline the development process with a single repo. See multi-repo deploy docs.

Using Docker

If you are already using Docker within your project, you're already a step ahead. Voyage runs docker images similar to how you may have seen in a docker-compose.yml file. Each service runs in it’s own image. For most applications you will have a “primary” image that is built that contains your application code.

We will start by creating a Dockerfile in the root of our project that contains code to build our app. Since this is a Node project I will use a Node image. You may use a different Node version then what I have chosen.

Voyage does provide some presets for building simple applications. When using a preset you don’t need to have a Docker container. Only if you are building a more custom application. See the documentation for more information on presets.

Voyage Configuration

Now that we have this file we will begin to craft our Voyage config file. We will add a service for our “primary” image containing our app. All config files should begin with the “services” key at the top. Similar to how a docker-compose file may look.

services:
 app:
   context: ./
   primary: true
   exposePort: 3000

I will then expand a little bit to add some environment variables to pass to the application. These environment variables are also passed as build arguments while building the primary Docker container as well.

services:
 app:
   context: ./
   primary: true
   exposePort: 3000
   environment:
     - name: APP_ENV
       value: 'voyage'
     - name: NODE_ENV
       value: 'production'
     - name: DB_HOST
       value: 127.0.0.1

Now we will need one more service for this particular deployment. A Postgres database. It’s simple to add this as I can just pull the standard postgres docker image in like so.

database:
   image: postgres:13
   environment:
     - name: POSTGRES_USER
       value: 'voyage'
     - name: POSTGRES_PASSWORD
       value: 'voyage'
     - name: POSTGRES_DB
       value: 'voyage'

You may want to store some of these environment variables as sensitive values through the Voyage UI. You may then reference them in the config file. See environment variables documentation for more information.

Full Config File

After creating this config, your project is set to build and teardown environments on every pull request on demand. There is nothing else you need to do besides ensure this repository is enabled in Voyage!

Connecting Project

To connect your repository for on demand deployments, navigate to the “Providers” tab in the Voyage UI and ensure your git provider organization is added and press “Configure Connected Repos”.

Then just press “Connect with Voyage” on the repo you would like to connect and select “Manual” for this project. Now your repo is connected.

Next Steps

Checkout our blog for more posts like these and our documentation for additional help configuring your projects.