> For the complete documentation index, see [llms.txt](https://docs.release.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.release.com/guides-and-examples/common-setup-examples/hybrid-docker-+-static-site-example.md).

# Hybrid Docker and static site

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 [awesome-release/react-express-mysql](https://github.com/awesome-release/react-express-mysql) example repository.
2. Click **Fork** in the top-right corner to create your fork.

![A screenshot of GitHub with the fork button highlighted](https://585411240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1neGLLQ0sDXeK6ooSo%2Fuploads%2Fgit-blob-1dce9407db54b1d0eb676147a33c5eca90360530%2Fhybrid-app-github-fork.png?alt=media\&token=31ed123c-8053-4203-b280-7b4189b3d264)

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

![A screenshot of the Release Getting Started page, with the create new app button highlighted](https://585411240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1neGLLQ0sDXeK6ooSo%2Fuploads%2Fgit-blob-12fe8cd7c2301e17e951e4e27f60bdcfa5d8eb69%2Fhybrid-app-create-application.png?alt=media\&token=66e1ac7b-47a7-45a0-832f-3ca3ea6b64f7)

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

![A screenshot of the first page of the Release new application workflow](https://585411240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1neGLLQ0sDXeK6ooSo%2Fuploads%2Fgit-blob-f39f284cc9dfdf6785aa9bb9880280d2941bc05b%2Fhybrid-app-create-name.png?alt=media\&token=ec72c9d8-5420-4fab-84aa-520ef3f1bbaa)

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

![A screenshot of the repository analysis step in the Release new application workflow](https://585411240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1neGLLQ0sDXeK6ooSo%2Fuploads%2Fgit-blob-927f8af155d785d88dc37924f8ef4c834804a27c%2Fhybrid-app-analyze.png?alt=media\&token=4eb8a916-d77b-4bac-b564-33f4dd00fe83)

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

![A screenshot of the Release new application workflow, showing how to select a static service type](https://585411240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1neGLLQ0sDXeK6ooSo%2Fuploads%2Fgit-blob-c664a41fba33aa7a6f1781877ac2d7d189909893%2Fhybrid-app-services.png?alt=media\&token=7fa94e03-ba34-43b8-90d5-b68743347164)

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

```yaml
  ports:
  - type: container_port
    port: 3306
```

![A screenshot of the Release application template editor](https://585411240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1neGLLQ0sDXeK6ooSo%2Fuploads%2Fgit-blob-6dc3a2541f3e8a70abe08442a9295a5b18a9b023%2Fhybrid-app-port.png?alt=media\&token=6b14d8de-9458-48c6-b240-14a96f77f5ef)

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:

```yaml
mapping:
  REACT_APP_BACKEND_URL: BACKEND_INGRESS_URL
```

![A screenshot of the Release environment variables editor](https://585411240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1neGLLQ0sDXeK6ooSo%2Fuploads%2Fgit-blob-ccb303a55d9ce8b7d1ef33c2fd2f0280dae68336%2Fhybrid-app-environment-variables.png?alt=media\&token=2bb3b36e-536b-4ea2-a68b-58e0d0771b01)

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.

![A screenshot of the Release deploy button](https://585411240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1neGLLQ0sDXeK6ooSo%2Fuploads%2Fgit-blob-04e01d9a9376ffa8c2774216c41b5e0326a696b1%2Fhybrid-app-deploy.png?alt=media\&token=8f864f32-8f74-4b94-baf7-2b7204362413)

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.

![A screenshot of Release's JIT file mount settings](https://585411240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1neGLLQ0sDXeK6ooSo%2Fuploads%2Fgit-blob-215b144dc48eff87c3f0bae7651aa52467b976ed%2Fhybrid-app-jit-file-mount.png?alt=media\&token=53905225-f4db-450b-a5df-31d92791f32a)

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.

![A screenshot showing how to delete an environment on Release](https://585411240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1neGLLQ0sDXeK6ooSo%2Fuploads%2Fgit-blob-f127a02d25aa3f9947edddca786a1c362889be0a%2Fhybrid-app-delete-environment.png?alt=media\&token=9fb7ee6a-3d06-4050-a4d2-bd597f9e4b05)

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.

![A screenshot of the new environment settings popup on Release](https://585411240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1neGLLQ0sDXeK6ooSo%2Fuploads%2Fgit-blob-8ce55e33ded6b08aa901c2909465178f849c76ae%2Fhybrid-app-create-environment.png?alt=media\&token=6a998b36-d047-44cf-a122-bd9d4806cc4e)

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.

![A screenshot of the popup that shows a new deployment was successful](https://585411240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1neGLLQ0sDXeK6ooSo%2Fuploads%2Fgit-blob-e6d0efffdff08d98bcdeced926179a401eebb8ce%2Fhybrid-app-deployed.png?alt=media\&token=e359846e-9269-40c9-bb75-cb6e948d7d38)

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

![A screenshot of the environment details page, with the frontend URL highlighted](https://585411240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1neGLLQ0sDXeK6ooSo%2Fuploads%2Fgit-blob-aa12b13ec4fbd809f97f3f47786657ad8a508622%2Fhybrid-app-environment-details.png?alt=media\&token=53779f05-8b26-4a8d-9d55-51f32c5941a9)

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

![A screenshot of the resulting application](https://585411240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1neGLLQ0sDXeK6ooSo%2Fuploads%2Fgit-blob-3345a933e12c40dce4a27a6f4250f0c9e520e5c2%2Fhybrid-app-result.png?alt=media\&token=4aae74e6-369f-4d56-a7c5-d3442ca85f24)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.release.com/guides-and-examples/common-setup-examples/hybrid-docker-+-static-site-example.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.