What is DDEV Preview?

DDEV Preview Feature Demo video title slide

When you are in the groove of working on a new feature for your web project the last thing you probably want to do is spend time setting up extra tools just to see how your work looks live. Many of us have staging environments, alpha environments, dev environments, several local servers on our machines and of course various continuous integration tools. All of those require at least a couple steps to get your work in progress “live” and may also be locations that you can’t just share with collaborators. 

With this in mind, and based on the feedback of real live DDEV users, we’ve just added the first features of what we’re calling “DDEV Preview” to the platform on all tiers and as part of the personal free trial. Preview allows you to create a temporary staging site with one command directly on a pull or merge request. Let’s look at how this can be helpful!

When you need to stage and demonstrate work in progress

As a developer who does not want to break production, you likely do a lot of testing and staging before tagging and releasing new work. You may have found that despite best efforts with continuous integration, staging environments go stale and require extra attention when you go to use them. Along the way you’re losing hours on each project in getting all environments up to speed, not to mention finding clever ways (that aren’t piles of screenshots) to show clients work in progress, get approval and feedback on user experience, and more.

That’s not all, either – you’ve got a wide variety of projects, various CMSs, configurations, dependencies, and services connected to each of them. There’s not much of a one size fits all approach so each needs a series of environments for dev, test, stage, production, especially when clients each have their favorite hosting providers.

In summary, it’s complicated, and it’s a lot to manage. That’s why, at the request of DDEV users, we added the capability to create a quick, temporary preview site with the latest changes from your Git repository.

Integrated preview sites with GitHub and GitLab

With the first set of features for DDEV Preview, the author of a pull or merge request (we’ll just say PR here) can now build a site directly from that PR with a comment. The DDEV Preview Bot on GitHub or GitLab watches for PRs against branches that are deployed (but not necessarily published) on DDEV-Live and automatically comments on a PR when it is created.

The Preview site is deleted when the PR is closed, so you don’t wind up with stray sites counting against your overall account quota on DDEV-Live (assuming you keep your PRs tidy!). That means you’re automatically conserving resources in terms of platform costs, too. Preview can be used independently of DDEV hosting services. You can use Preview if you are a DDEV-Local user, or anyone with a GitHub/GitLab repo, and just want to have a Preview site but not a published production site hosted on DDEV-Live.

Using Preview in conjunction with other DDEV platform features can further smooth the process of taking a feature, bug fix, or new site from local development to live deployment. The time savings an end-to-end integrated system offers adds up and gives time back to everyone involved. Developers can focus on getting the feature right, project managers can spin up preview sites to hand over to business for client check-ins, and return on hiring and infrastructure investment is maximized across the organization.

Here’s an example of how you in the real world might use this feature. 

You have an account with DDEV-Live (in this example, we’ll use GitHub, which requires the DDEV-Live GitHub app installed on your GitHub account and the ddev-live CLI installed on your machine) and deploy a site from a branch via a command such as: 

$ ddev-live create site drupal my-drupal-site \
--github-repo my-github-org/clientsite \
--branch workingbranch \
--drupal-version 9 \
--run-composer-install

Now you have a copy of the code in your branch workingbranch available on DDEV-Live, but not published with DNS etc. You also push your database and file assets. 

This is where DDEV Preview comes in. For this example, let’s say your client wants to see the current work on their new website theme right now (watch Randy’s example with a theme change here). Commit and push your local work to your GitHub repository clientsite on the workingbranch branch, and create a PR from that commit. 

Because you have that branch deployed on DDEV-Live already, our preview bot will automatically recognize the PR against the deployed branch and will comment on the PR to ask what you would like to do next. 

Run the suggested command /ddev-live-preview-site and the bot will build a preview site using the code in your PR and the assets from the previously deployed branch to show your work in progress as it would appear “live.” The bot returns a URL you can share with your client, displaying how their site will look with the new theme and their existing blog posts and images. They can validate that you’re on the right track and you can close the PR (automatically deleting the preview site) and continue working.

Launch and learn!

What are you missing in your development workflow today? How could it be easier for you (and your team) to move small pieces of work from start to finish? 

The next set of Preview features for DDEV-Live will include updates to the dashboard user experience, support for forked PRs, and shared workspaces on the platform. Further down the road will be more fine-tuned configuration management and launching Preview sites from a wider variety of environments to truly fulfill our mission of being either one flexible component or home to your entire development workflow.

Preview is available in every plan on DDEV-Live to facilitate collaboration, testing, and client approvals without creating and syncing a separate environment. Our aim is to empower open source developers who seek the freedom that flexible and configurable tools can grant a development workflow. We hope DDEV can fill that role for you.

Contact us for a personal walkthrough or to put together a custom DDEV plan to to save you time and energy.

Share this post: