LogoLogo
  • Welcome to Release
  • Getting started
    • Quickstart
    • Create an account
    • Prepare to use Release
    • Create an application
      • Create custom application
      • Create from template
      • Servers vs runnables
    • Create an environment
  • Guides and examples
    • Domains and DNS
      • Manage domains
      • DNS and nameservers
        • Configure GoDaddy
        • Configure Cloudflare
        • Configure Namecheap
        • Other DNS hosts
      • Routing traffic
    • Example applications
      • Full stack voting app
      • Flask and RDS counter app
      • Static site with Gatsby
      • Golang with Postgres and Nginx
      • WordPress with MySQL
      • Spring and PostgreSQL
      • Terraform and Flask
      • OpenTelemetry demo
      • Load balancer with hostname
      • Static JavaScript service
      • SSH bastion access to services
      • ngrok and OAuth for private tunnels
      • Using OAuth Proxy
      • Hybrid Docker and static site
      • App Imports: Connecting two applications
      • Example library
    • Running instances
      • Cron jobs
      • Jobs
      • Using Helm charts
      • Using terminal
      • Viewing logs
      • Troubleshooting
        • ImagePullBackoff error
        • CrashLoopBackoff error
        • Exit codes
        • OOM: out of memory
    • Advanced guides
      • Containers guide
      • Application guide
      • Kubernetes guide
      • Create a cluster
      • Upgrade a cluster
      • Managing node groups
      • Patch node groups
      • Hostnames and rules
      • Serve traffic on multiple ports
      • Configure access to your K8s cluster
      • Designing for multiple environments
      • Microservices architecture
      • Monitoring your clusters
      • Performance tuning
      • Visibility and monitoring
      • Working with data
        • Container-based data
        • Seeding and migration
        • Cloud-provided data
        • Golden images
        • Third party
      • Pausing Instant Datasets
        • Application pausing schedules
        • Pause/resume environments
      • Infrastructure as code
        • Terraform
  • Reference documentation
    • Account settings
      • Account info
      • Managing users
      • Build settings
        • Build arguments
        • Build SSH keys
      • Add integrations
      • View clusters and cloud integrations
      • Add datasets
      • Environment handles
    • Workflows in Release
      • Stages of workflows
      • Serial deployments
      • Parallel deployments
      • Rolling deployments
      • Rainbow deployments
    • Networking
      • Network architecture (AWS)
      • Network architecture (GCP)
      • Ingresses
      • IP addresses
      • Cloud-provided services
      • Third-party services
    • Release environment versioning
    • Application settings
      • Application Template
        • Schema definition
      • Default environment variables
      • GitHub
      • Pull requests
      • GitOps
      • Just-in-time file mounts
      • Primary App Link
      • Create application FAQ
      • App-level build arguments
      • Parameters
      • Workspaces
    • End-to-end testing
    • Environment settings
      • Environment configuration
      • Environment variables
        • Environment variable mappings
        • Secrets vaults
        • Using Secrets with GitOps
        • Kubernetes Secrets as environment variables
        • Managing legacy Release Secrets
    • Environment expiration
    • Environment presets
    • Instant datasets on AWS
    • Instant datasets on GCP
    • Instant dataset tasks
      • Tonic Cloud
      • Tonic On-Premise
    • Cloud resources
    • Static service deployment
    • Helm
      • Getting started
      • Version-controlled Helm charts
      • Open-source charts
      • Building Docker images
      • Ingress and networking
      • Configuration
    • GitOps
    • The .release.yaml file
    • Docker Compose conversion support
    • Reference examples
      • Adding and removing services
      • Managing service resources
      • Adding database containers to the Application Template
      • Stock Off-The-Shelf Examples
    • Release API
      • Account Authentication
      • Environments API
        • Create
        • Get
        • Setup
        • Patch
      • User Authentication
      • Environment Presets API
        • Get Environment Preset List
        • Get Environment Preset
        • Put Environment Preset
  • Background concepts
    • How Release works
  • Frequently asked questions
    • Release FAQ
    • AWS FAQ
    • Docker FAQ
    • JavaScript FAQ
  • Integrations
    • Integrations overview
      • Artifactory integration
      • Cloud integrations (AWS)
        • AWS guides
        • Grant access to AWS resources
        • AWS how to increase EIP quota
        • Control your EKS fleet with systems manager
        • Managing STS access
        • AWS Permissions Boundaries
        • Private ECR Repositories
        • Using an Existing AWS VPC
        • Using an Existing EKS Cluster
      • Docker Hub integration
      • LaunchDarkly integration
      • Private registries
      • Slack integration
      • Cloud integrations (GCP)
        • GCP Permissions Boundary
      • Datadog Agent
      • Doppler Secrets Manager
      • AWS Secrets Management
    • Source control integrations
      • GitHub
        • Pull request comments
        • Pull request labels
        • GitHub deployments
        • GitHub statuses
        • Remove GitHub integration
      • Bitbucket
      • GitLab
    • Monitoring and logging add-ons
      • Datadog
      • New Relic
      • ELK (Elasticsearch, Logstash, and Kibana)
  • Release Delivery
    • Create new customer integration
    • Delivery guide
    • Release to customer account access controls
    • Delivery FAQs
  • Release Instant Datasets
    • Introduction
    • Quickstart
    • Security
      • AWS Instant Dataset security
    • FAQ
    • API
  • CLI
    • Getting started
    • Installation
    • Configuration
    • CLI usage example
    • Remote development environments
    • Command reference
      • release accounts
        • release accounts list
        • release accounts select
      • release ai
        • release ai chat
        • release ai config-delete
        • release ai config-init
        • release ai config-select
        • release ai config-upsert
      • release apps
        • release apps list
        • release apps select
      • release auth
        • release auth login
        • release auth logout
      • release builds
        • release builds create
      • release clusters
        • release clusters exec
        • release clusters kubeconfig
        • release clusters shell
      • release datasets
        • release datasets list
        • release datasets refresh
      • release deploys
        • release deploys create
        • release deploys list
      • release development
        • release development logs
        • release development start
      • release environments
        • release environments config-get
        • release environments config-set
        • release environments create
        • release environments delete
        • release environments get
        • release environments list
        • release environments vars-get
      • release gitops
        • release gitops init
        • release gitops validate
      • release instances
        • release instances exec
        • release instances logs
        • release instances terminal
  • Release.ai
    • Release.ai Introduction
    • Getting Started
    • Release.ai Templates
    • Template Configuration Basics
    • Using GPU Resources
    • Custom Workflows
    • Fine Tuning LlamaX
    • Serving Inference
Powered by GitBook
On this page
  • Fork the repository on GitHub
  • Create and configure a new application in Release
  • Create your application
  • Analyze your repository
  • Update frontend service type
  • Add a port to the db service in the application template
  • Update the default environment variables
  • Deploy your application
  • Add a database password file called db-password
  • Add the db-password file as a just-in-time file mount on Release
  • Create a new environment
  • View your app

Was this helpful?

  1. Guides and examples
  2. Example applications

Hybrid Docker and static site

PreviousUsing OAuth ProxyNextApp Imports: Connecting two applications

Last updated 2 years ago

Was this helpful?

In this guide, we'll create a Release application that combines two Docker services with a JavaScript SPA (single-page application).

Fork the repository on GitHub

  1. On GitHub, navigate to our example repository.

  2. Click Fork in the top-right corner to create your fork.

Create and configure a new application in Release

  1. Log in to your Release account.

  2. Click Create New App on the Getting Started page.

Create your application

  1. In the Name your application field, enter a name for your new application.

  2. Under Pick your repository, select your forked repository.

  3. Click Next Step.

Analyze your repository

  1. Under Select branch, select your main branch.

  2. Click the Select files dropdown.

  3. Select the docker-compose.yaml file.

  4. Select the frontend/package.json file.

  5. Click Start Analysis.

Update frontend service type

Once the repository analysis completes, a list of services will appear.

  1. Click on the service type selector for the frontend service.

  2. Select Static from the list of service types.

  3. Click Next Step.

Add a port to the db service in the application template

Release creates an application template based on the services you selected by reading the docker-compose.yaml and package.json files.

The docker-compose.yaml file did not specify a port for the db service, so we'll need to add one to the Application Template.

Edit the Application Template and add the following to the db service.

  ports:
  - type: container_port
    port: 3306

This setting opens a port on the db service to the private network for your environment so that the backend service can reach the MySQL database running on db.

Click on Next Step.

Update the default environment variables

Release generates a default environment variables file for environments in your application.

The single-page application's frontend build process references an environment variable REACT_APP_BACKEND_URL. This is to let the frontend SPA know where to make backend API calls.

Using the mapping section in the default environment variables file, we can map existing environment variables to new names.

One of the default environment variables that Release creates for all environments is an ingress URL for each service with node ports.

In this application, we want to map the backend ingress URL to a new name: REACT_APP_BACKEND_URL.

Do this by updating the mapping stanza as follows:

mapping:
  REACT_APP_BACKEND_URL: BACKEND_INGRESS_URL

Click on Next Step.

Skip over the Build Arguments page by clicking Next Step again.

Deploy your application

Click on the Deploy your app button.

Release will redirect to a deployment progress screen, where it will build and deploy your application.

You may notice that the db service fails to deploy.

If you inspect the db service's logs, you'll find a line indicating that the database can't find a password file:

/usr/local/bin/docker-entrypoint.sh: line 36: /run/secrets/db-password: No such file or directory

Add a database password file called db-password

  1. On your local machine, create a plain text file called db-password with a short random string to act as the MySQL root password.

  2. Save the db-password file on your machine.

Add the db-password file as a just-in-time file mount on Release

Click on Settings in the application menu, then scroll down to the Just-in-time File Mounts section.

  1. Click on the Just-in-time File Mounts section heading to expand the settings.

  2. In the mount path field, enter /run/secrets/.

  3. Click the Select file button and select the db-password file from your computer.

  4. Tick the backend and db service checkboxes.

  5. Tick the Secret checkbox.

  6. Click the Upload button.

Create a new environment

A file mount can only be added to newly created environments, so we'll need to delete the existing environment that Release created and create a new one.

  1. Navigate to Environments.

  2. Click the delete icon.

  3. In the popup, click on the Yes, delete environment button.

Next, we'll create a new environment. Click on Environments and then click Create new environment.

In the popup:

  1. Select the main branch.

  2. In the Environment type select box, select Ephemeral.

  3. Click the create environment button.

Release will build and deploy a new environment.

View your app

When the deployment completes, click on the go to environment button in the popup.

On the environment details page, click on the frontend URL.

You should now see the single page app with a response from the backend that reads "Hello from MySQL 8.0.19".

awesome-release/react-express-mysql
A screenshot of GitHub with the fork button highlighted
A screenshot of the Release Getting Started page, with the create new app button highlighted
A screenshot of the first page of the Release new application workflow
A screenshot of the repository analysis step in the Release new application workflow
A screenshot of the Release new application workflow, showing how to select a static service type
A screenshot of the Release application template editor
A screenshot of the Release environment variables editor
A screenshot of the Release deploy button
A screenshot of Release's JIT file mount settings
A screenshot showing how to delete an environment on Release
A screenshot of the new environment settings popup on Release
A screenshot of the popup that shows a new deployment was successful
A screenshot of the environment details page, with the frontend URL highlighted
A screenshot of the resulting application