New post on adding single-click dev environment links to your project
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Kaan Barmore-Genç 2024-05-27 05:54:44 +00:00
parent 45527fdeeb
commit 2b5da4ee2b
59 changed files with 140 additions and 1 deletions

View file

@ -0,0 +1,22 @@
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
{
"name": "Node.js & TypeScript",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "npm install",
// Configure tool-specific properties.
// "customizations": {},
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
"remoteUser": "root"
}

View file

@ -3,7 +3,7 @@
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev --host",
"build": "vite build && npm run build:pagefind", "build": "vite build && npm run build:pagefind",
"preview": "npm run preview:pagefind && vite preview", "preview": "npm run preview:pagefind && vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

Binary file not shown.

Binary file not shown.

View file

@ -0,0 +1,117 @@
---
title: 'Adding single click dev environment links to your open source project for easy contributions'
date: 2024-05-27T05:10:06Z
description: 'Blog post description here'
---
[I have been using DevContainers](/2023.02.10.why-use-devcontainer/) a lot. If
you haven't heard about them, it's a standard for defining development
environements using container technologies. The idea is pretty simple: you
define a base container for your development environment --which can be a
special DevContainer one, or any regular old container-- along with any service
containers you need. Whenever you or anyone else needs a new development
environment, their development environment grabs and runs these docker
containers, and runs any commands you defined in the configuration to set things
up.
This comes with many benefits:
- Assuming you deploy with containers, your development environment can more
closely match your production environment.
- There are no "works on my machine" issues, everyone has the same development
environment.
- If anything goes wrong with your development environment, instead of trying to
figure out what happened, you can delete it and start over in seconds.
- You were in the middle of something, and an urgent bug came up? Instead of
trying to stash your work and clean up your environment, leave it where it is
and launch another fresh development environment and get to work.
- New contributors to your open source project, or new hires can start
developing immediately without having to set up anything, beyond installing
Docker.
The last point here is the one I want to focus on in this blog post. Especially
with open source projects, one of the biggest barriers to contribution is that
it can be hard to install and set up everything you need to contribute to a
project. Especially if you were trying to fix or add something small, it can be
harder to set up the development environment than it is to actually develop
whatever you were actually trying to do. The same issue applies for companies.
Onboarding new employees is hard. Writing good onboarding documentation and
keeping it up to date takes a lot of work. But without good documentation, new
hires have to keep bugging experienced developers so they can start working.
This slows down how soon new hires can start doing productive work, takes up
time of experienced devs, and leaves everyone frustrated.
If I have sold you on DevContainers, check out [my previous blog post](/2023.02.10.why-use-devcontainer/)
on the topic on how to get started or
[VSCode docs](https://code.visualstudio.com/docs/devcontainers/containers)
(note: DevContainers are not exclusive to VSCode, support is being added to
JetBrains products, and a CLI implementation is available as well).
Once you have your DevContainers set up though, you get an amazing opportunity to make contributions or development even easier.
Enter cloud development environments.
DevContainer support is built into [Github Codespaces](https://github.com/features/codespaces) and [CodeSandbox](https://codesandbox.io/).
These projects allow you to spin up machines in the cloud for development, and work on it through a web interface.
Combined with DevContainers, you can click one button to get a fully-fledged development environment in your web browser within seconds.
Along with these, [DevPod](https://devpod.sh) is an open source solution that you can install on your own machine,
and use with a local Docker install, remote VMs, or one of their many supported providers like AWS or Azure or DigitalOcean.
You can take advantage of this yourself by just having these services/tools clone your repository,
but we can make it even better and help newcomers by adding links to these services.
![Screenshot of a page with the headline Contributing, and the text: Want to start hacking on this quickly? Click one of these links to get started right now!](/img/codespaces-devpod-codesandbox.avif)
To do so, simply add the following links to your Readme, replacing `<Owner>` and
`<Repo>` with your own username and repository. Note that besides Github
Codespaces, these are not restricted to Github and
can be used with other forge services like [Gitlab](https://about.gitlab.com) or [Codeberg](https://codeberg.org).
```md
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/<Owner>/<Repo>)
[![Open in DevPod](https://devpod.sh/assets/open-in-devpod.svg)](https://devpod.sh/open#https://github.com/<Owner>/<Repo>)
[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/github/<Owner>/<Repo>)
```
Having these links in your Readme is nice, but what if we went one step further?
We could use these tools to make PR reviews easier too. You can click one button
on Github or your favorite forge to see the changes in a PR, wouldn't it be
great if you can click one button to launch a fresh development environment with
that PR? It would be, and we can do this!
To make this happen, I wrote a Github Actions workflow to post a comment to PRs
with the appropriate links. Let's see what that workflow looks like:
```yml
on: pull_request
permissions:
pull-requests: write
jobs:
comment_click_dev:
runs-on: ubuntu-latest
name: Comment Cloud Dev Buttons
steps:
- name: Comment PR
uses: thollander/actions-comment-pull-request@v2
with:
message: |
Click links below to open this PR in a dev environment:
[![Open PR in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/<Owner>/<Repo>/tree/${{github.head_ref}})
[![Open PR in DevPod](https://devpod.sh/assets/open-in-devpod.svg)](https://devpod.sh/open#https://github.com/<Owner>/<Repo>@${{github.head_ref}})
[![Open PR in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/<Owner>/<Repo>/tree/${{github.head_ref}})
comment_tag: comment_click_dev
```
This workflow uses [this cool action by Térence Hollander](https://github.com/marketplace/actions/comment-pull-request)
to post a comment to the PR from a workflow.
Like the Readme example, replace the `<Owner>` and `<Repo>` with your username and repository.
![Screenshot of Github PR comment by github actions bot. The comment has 3 buttons for Codespaces, DevPod, and CodeSandbox. Text above the buttons reads: Click links below to open this PR in a dev environment](/img/codespaces-devpod-codesandbox.avif)
These work great. Whenever you're reviewing a PR, if you want to run the code or
use a more comfortable environment than Github's changes view, you can click
these buttons and get the PR in a new development environment, without having to
stash or discard anything you were already working on.
The only caveat with these links is that I couldn't figure out how to make it work for CodeSandbox without going through the `githubbox.com` URL.
This URL seems to be owned by CodeSandbox from what I gather so it's not dangerous or anything, but it limits it to repositories on Github only.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 128 B

After

Width:  |  Height:  |  Size: 694 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 129 B

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 129 B

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 248 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 129 B

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 138 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 129 B

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 495 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 132 B

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 339 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 216 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 201 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 131 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 162 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 44 KiB