Dev Deployments for a Full-Stack App in Minutes
Tags: tooling, saas, devops, productivity
Published: 2021-02-03 17:44:59

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

[Live demo deployment](https://ahoy-voyag-shipf-featupdate-t-gddpy.qa.voyageapp.io)

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](https://github.com/voyage-playground/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](https://voyageapp.io/docs/voyage-configuration/#MultiRepoConfiguration).

## 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.

{% gist https://gist.github.com/jadenlemmon/8a96fdbaf3d2779fd54b5594f0a4a6fc file=Dockerfile %}

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](https://voyageapp.io/docs/voyage-configuration/#UsingDefinedPresets) 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](https://voyageapp.io/docs/voyage-configuration/#EnvironmentVariables) for more information.

## Full Config File

{% gist https://gist.github.com/jadenlemmon/8a96fdbaf3d2779fd54b5594f0a4a6fc file=config.yml %}

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”.

![Repo Connect](https://cdn.voyageapp.io/videos/repo_connect.gif)

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](https://voyageapp.io/docs/voyage-configuration) for additional help configuring your projects.