Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

📝docs: add devcontainer section to README.md #82

Merged
merged 2 commits into from
Dec 30, 2023
Merged

📝docs: add devcontainer section to README.md #82

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
181b510
📝docs: add devcontainer section
Marukome0743 Dec 30, 2023
7f92ab5
📝docs: add devcontainer section
Marukome0743 Dec 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 43 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,16 @@
<img src="https://img.shields.io/badge/-react-61DAFB.svg?logo=react&style=for-the-badge&labelColor=000000" alt="react">
</a>
<a aria-label="tailwindcss" href="https://tailwindcss.com/">
<img src="https://img.shields.io/badge/-tailwind css-06B6D4.svg?logo=tailwindcss&style=for-the-badge&labelColor=000000" alt="tailwindcss">
<img src="https://img.shields.io/badge/-tailwind%20css-06B6D4.svg?logo=tailwindcss&style=for-the-badge&labelColor=000000" alt="tailwindcss">
</a>
<a aria-label="typescript" href="https://www.typescriptlang.org/">
<img src="https://img.shields.io/badge/-typescript-3178C6.svg?logo=typescript&style=for-the-badge&labelColor=000000" alt="typescript">
</a>
<a aria-label="vscode" href="https://code.visualstudio.com/">
<img src="https://img.shields.io/badge/-visual studio code-007ACC.svg?logo=visualstudiocode&style=for-the-badge&labelColor=000000" alt="vscode">
<img src="https://img.shields.io/badge/-visual%20studio%20code-007ACC.svg?logo=visualstudiocode&style=for-the-badge&labelColor=000000" alt="vscode">
</a>
<a aria-label="devcontainer" href="https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/OpenUp-LabTakizawa/caravan-kidstec">
<img src="https://img.shields.io/badge/-open-007ACC.svg?label=dev%20containers&logo=visualstudiocode&style=for-the-badge&labelColor=000000" alt="vscode">
</a>
<a aria-label="License" href="https://github.com/OpenUp-LabTakizawa/caravan-kidstec/blob/main/LICENSE">
<img src="https://img.shields.io/github/license/OpenUp-LabTakizawa/caravan-kidstec?style=for-the-badge&labelColor=000000" alt="License">
Expand All @@ -38,7 +41,7 @@
Multi-experience program to learn programming with nature🌄
</p>

## 📃 Usage
## 📃 Get Started

To clone and run this application, you'll need [Git](https://git-scm.com) and [Bun](https://bun.sh/) installed on your computer.
From your command line:
Expand Down Expand Up @@ -72,6 +75,43 @@ $ bunx @biomejs/biome check --apply-unsafe **

Once opening, you can run `Extensions: Show Recommended Extensions` to install the recommended extensions for good development is automatically configured.

## 🐳 Dev Containers

A **dev container** is a running container with a well-defined tool/runtime stack and its prerequisites.
You can try out development containers with **[GitHub Codespaces](https://github.com/features/codespaces)** or **[Visual Studio Code Dev Containers](https://aka.ms/vscode-remote/containers)**.

### Setting up the development container

<details>
<summary>GitHub Codespaces</summary>

Follow these steps to open this project in a Codespace:
1. Click the **Code** drop-down menu.
2. Click on the **Codespaces** tab.
3. Click **Create codespace on main**.

For more info, check out the [GitHub documentation](https://docs.github.com/en/free-pro-team@latest/github/developing-online-with-codespaces/creating-a-codespace#creating-a-codespace).

</details>

<details>
<summary>VSCode Dev Containers</summary>

If you already have VSCode and [Docker](https://www.docker.com/) installed, you can click the badge above or [here](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/OpenUp-LabTakizawa/caravan-kidstec) to get started.
Clicking these links will cause VSCode to automatically install the Dev Containers extension if needed, clone the source code into a container volume, and spin up a dev container for use.

Follow these steps to open this project in a container using the VSCode Dev Containers extension:

1. If this is your first time using a development container, please ensure your system meets the pre-reqs (i.e. have Docker installed) in the [getting started steps](https://aka.ms/vscode-remote/containers/getting-started).

2. To use this repository, open a locally cloned copy of the code:

- Clone this repository to your local filesystem.
- Press <kbd>F1</kbd> and select the **Dev Containers: Open Folder in Container...** command.
- Select the cloned copy of this folder, wait for the container to start, and try things out!

</details>

## 🫶 Contribute

Want to report a bug, contribute some code, or improve the documentation? Excellent!
Expand Down