Skip to content

Latest commit

 

History

History
69 lines (48 loc) · 5.32 KB

codespaces.md

File metadata and controls

69 lines (48 loc) · 5.32 KB
Raw

Environments: Codespaces

About

Github Codespaces is a cloud-based development environment that can be used in-browser or (preferably) with Visual Studio Code. Please join #codespaces for any comments or questions about using Codespaces at VA .

Web UI

  1. Visit github.com/codespaces
  2. Click the ... link next to a codespace
  3. Select "Open with Codespaces"
  4. See Getting Started in vets-website for more detail.

Local VS Code

  1. Download and install Visual Studio Code

  2. Arch Linux: yay --sync visual-studio-code-bin

  3. Open VS Code and install the Codespaces plugin codespaces plugin

  4. Go to the main Codespaces page and click the 'New codespace' button

  5. Type in the name of your fork of the CMS repo (create one if you haven't already) and choose the main branch. If it doesn't come up in the list you may have to type the full name, e.g. elijahlynn/va.gov-cms, not just va.gov-cms: codespaces creation

  6. Click "Sign into GitHub", a browser will open authorizing GitHub and VS Code.

    image

  7. Click 'Create codespace'

  8. You will see this dialog:

Screen Shot 2021-08-24 at 4 24 37 PM

  1. Choose a machine type with at least 64GB of disk space to ensure that you have enough space to run the project.
  2. Open VS Code, click the 'Remote Explorer' tab on the left, and click the 'Connect to codespace' button (it looks like an electric plug) to choose the codespace you just created: codespaces connection
  3. After a few seconds, you will be connected to codespaces, and the IDE will function like it is running locally for all intents and purposes.
  4. The development environment will automatically configure, install and start ddev on creation, which takes ~10-15 minutes because of DB and files importing. To monitor the process, choose 'New Terminal' from the 'Terminal' menu, and run this command: tail -f ~/post-create.log. The environment configuration also suggests plugins for linting and code style checking, and sets up the upstream git remote for the main CMS repo.
  5. When the setup process is complete, you will see a welcome message.
  6. You may want to change your git email address for commits with git config --global user.email [email protected]. You can see what is currently listed with git config --global --list.
  7. Your development environment is ready to use! Create a new terminal and run the command ddev describe. Mouse over the link to localhost, and VS Code will provide instructions to open the site in your browser with automatic port forwarding.

Customization

Shell environment

To set up your preferred shell environment, you may create a public 'dotfiles' repo under your own github account. More information is available in the official documentation. If you create and populate a .bash_aliases file in your dotfiles repository and enable your dotfiles repository for Codespaces, any aliases you add will be available in the codespaces environment.

Usage

Viewing the Drupal site

  1. In a terminal, run the command ddev describe
  2. In the web section of the output, hover over one of the localhost addresses, e.g. http://localhost:49161
  3. Command-click to automatically forward the port and open in your local browser

Debugging

To debug with Xdebug, follow these steps:

  1. In a terminal, run the command ddev xdebug on
  2. Click the debugging tab on the left, and then the green play button to the left of 'Listen for Xdebug': starting xdebug
  3. Set a breakpoint and load a page in your browser. Go to town! xdebug

Global Configuration

The codespaces configuration and setup script are located in the .devcontainer directory of this repo. The main configuration is stored in devcontainer.json - available properties are documented here.

Table of Contents