Skip to main content
Log inGet free account

Multidev Workflow and Configuration

Use Multidev with Front-End Sites.

Discuss in Slack
Edit this page on GitHub Report an issue with this doc

This section provides information on the Front-End Sites Multidev workflow, configuration steps to connect your Front-End Site to a Multidev environment, and information on Multidev branch builds.

Front-End Sites Multidev Development Workflow

The Front-End Sites Multidev workflow is outlined below:

  • Code Push: The external Git provider controls code posts and deployments. Code pushed to the main branch is built and deployed in your Live environment. Code pushed to any other branch generates a new Multidev environment. Updates to existing branches result in the corresponding environment being updated.

  • Pull Request: The Multidev environment is stood up and the preview and backend URL are displayed in the GitHub PR, the GitHub deployment, and in the Front-End Sites Overview section of the dashboard. The build details for a PR are also linked to GitHub.

Connect to a Multidev Environment

You can use the PANTHEON_ENVIRONMENT variable inside your next.config.js file to connect to a Drupal Multidev environment. Refer to the Drupal + Next.js Frontend Starter for Front-End Sites guide for more information about this starter.

  1. Open your next.config.js file and set either the PANTHEON_CMS_ENDPOINT or BACKEND_URL.

    BACKEND_URL Example:

    Note that PANTHEON_ENVIRONMENT includes a PR number or integration branch name in the example below.

    let backendUrl, imageDomain;
if (process.env.BACKEND_URL === undefined) {
backendUrl = `https://${process.env.PANTHEON_CMS_ENDPOINT}`;
imageDomain = process.env.IMAGE_DOMAIN || process.env.PANTHEON_CMS_ENDPOINT;

// populate BACKEND_URL as a fallback and for build scripts
process.env.BACKEND_URL = `https://${process.env.PANTHEON_CMS_ENDPOINT}`;}
else {
backendUrl = process.env.BACKEND_URL;
imageDomain =
process.env.IMAGE_DOMAIN ||
process.env.BACKEND_URL.replace(/^https?:\/\//, '');
		}
    • The code below can be added under the above logic to connect to a Multidev that is prefixed with the branch name of my site.
    * PANTHEON_ENVIRONMENT is equal to `multi-demo` since that is the name of my branch. I will use this variable to create a `backendUrl` which points
* to my Multidev backend.
**/
if (process.env.PANTHEON_ENVIRONMENT !== 'live') {
	backendUrl = `https://${
		process.env.PANTHEON_ENVIRONMENT
	}-${backendUrl.replace(/^https?:\/\/[^-]*-/, '')}`;
}

  2. Optional. Mock the PANTHEON_CMS_ENDPOINT for local development by defining it in the .env.development.local. For example:

    PANTHEON_CMS_ENDPOINT=dev-my-drupal-site.pantheonsite.io

Multidev Branch Builds

You can build specific branches by naming the branch to begin with the prefix multi-.

Follow the steps below to observe the build and deployment process for a Multidev branch in real time. Note that the steps below assume that you have already cloned your Front-End Site repository from GitHub to your local.

  1. Check out the main branch of your repository.

    git checkout main

  2. Create a new branch using the multi- prefix, for example:

    git checkout -b multi-example-update

  3. Make a change to a file in your repository.

  4. Add and commit the change to the main branch.

    git add .
git commit -m <message>

  5. Push the branch:

     git push origin your-branch-name

  6. Open your Site Dashboard, navigate to the Overview page and scroll down to the Multidev Branches section. You should see your Multidev branch begin to build after approximately a minute.

  7. Use the Actions drop-down menu to visit the Multidev version of the site, view the logs, or get more information about the build.

Any commits pushed on this branch will now be built and deployed to the Multidev. This allows you and your team to review the branch as work progresses. Pull requests opened against this branch will also trigger a build.

Delete a Multidev Environment

  1. Open your Site Dashboard, navigate to the Overview page and scroll down to the Multidev Branches section.
  2. Use the Actions drop-down menu to delete the given Multidev.
  3. Type the Multidev name into the text field to complete the confirmation prompt and delete the environment.

More Resources