Skip to content

Commit 7c1ef69

Browse files
author
Katie Horne
authored
chore: fix getting started guides (coder#829)
1 parent e048010 commit 7c1ef69

File tree

5 files changed

+87
-33
lines changed

5 files changed

+87
-33
lines changed

‎assets/getting-started/gh-access-token.png

212 KB
Loading

‎assets/getting-started/view-files.png

-303 KB
Loading

‎getting-started/data-scientists.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ workspace capable of supporting data science projects. You'll learn how to:
1111
- Create a workspace with Jupyter Notebook and other data science packages
1212
present;
1313
- Add a sample project to your workspace, specifically
14-
[one as a Jupyter Notebook using IMDB movie data](https://github.com/khorne3/data-science-imdb-sample);
15-
- Create a dev URL and preview changes to your project.
14+
[one as a Jupyter Notebook using IMDB movie data](https://github.com/khorne3/data-science-imdb-sample).
1615

1716
## Prerequisites
1817

‎getting-started/developers.md

Lines changed: 46 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ learn how to:
99

1010
- Connect Coder to your Git provider;
1111
- Create a workspace;
12-
- Add a sample project to your workspace;
13-
- Create a dev URL and preview changes to your project.
12+
- Add [Create React App](https://create-react-app.dev/) to your workspace, which
13+
will allow you to create a sample single-page application that you can modify;
14+
- Create a dev URL and preview changes to your project;
15+
- Push your changes to a GitHub repo.
1416

1517
## Prerequisites
1618

@@ -75,30 +77,32 @@ next to the name of your workspace.
7577

7678
## Step 3: Add a sample project to your workspace
7779

78-
Once you've created your workspace, you can start using Coder after adding a
79-
sample project to your workspace.
80+
Once you've created your workspace, you can start working in Coder. For this
81+
tutorial, we'll be leveraging the
82+
[Create React App](https://create-react-app.dev/) to get you set up with a way
83+
to create single-page applications.
8084

8185
1. Under **Browser applications**, click **Code Web** to open VS Code in your
8286
browser.
8387

8488
1. When VS Code launches in your browser, click **Open folder...**. In the
85-
prompt, you'll see `/home/coder`. This directory is where you'll clone a
86-
sample React app project Git repository. Click **OK** to proceed.
89+
prompt, you'll see `/home/coder`. This directory is where you'll store your
90+
sample React app project. Click **OK** to proceed.
8791

8892
![Open folder](../assets/getting-started/open-folder.png)
8993

9094
1. Click the hamburger icon in the top right, and select **Terminal** > **New
9195
Terminal** to open a new terminal.
9296

93-
1. Clone the `create-react-app` repository:
97+
1. You're now ready to create a demo app that you can modify:
9498

9599
```console
96-
git clone git@github.com:facebook/create-react-app.git
100+
npx create-react-app my-app
101+
cd my-app
97102
```
98103

99-
Once you've cloned the repository, you can click the **Explorer** icon and
100-
expand the **create-react-app** folder in the left-have nav bar to see the
101-
contents of the repo.
104+
Once done, you can expand the `my-app` folder in the left-have nav bar to see
105+
its contents:
102106

103107
![View files](../assets/getting-started/view-files.png)
104108

@@ -126,9 +130,7 @@ specified and renders a browser link you can use to view your application.
126130
Web window and running the following in the terminal:
127131

128132
```console
129-
npx create-react-app my-app
130-
cd my-app
131-
npm start
133+
npm start
132134
```
133135

134136
1. From the workspace overview, launch your dev URL by clicking its name; Coder
@@ -140,3 +142,33 @@ specified and renders a browser link you can use to view your application.
140142
you save your changes to this file, your preview will reload.
141143

142144
![Preview changes](../assets/getting-started/hello-world.png)
145+
146+
## Step 5: Push your repo to GitHub
147+
148+
The follow steps show you how to push your app to a newly created GitHub repo.
149+
150+
1. Log in to GitHub and navigate to
151+
[Create a new repository](https://github.com/new).
152+
153+
1. Provide a **repository name** and click **Create repository**.
154+
155+
1. Return to your workspace, run the following in your terminal to add a remote
156+
to your GitHub repo, change the primary branch name to `main`, and push the
157+
contents to your newly created repo:
158+
159+
```console
160+
git remote add origin https://github.com/<username>/<repoName>.git
161+
git branch -M main
162+
git push origin main
163+
```
164+
165+
1. Within the IDE window (near the top), you'll be prompted to log in to GitHub
166+
by providing your username and password/personal access token.
167+
168+
1. Next, Code Web will display an alert that says the GitHub extension wants to
169+
sign in; click **Allow** to proceed.
170+
171+
1. In the subsequent window, click **Continue** to authorize Visual Studio Code
172+
to access GitHub.
173+
174+
At this point, the contents of your repo should be pushed to GitHub.

‎getting-started/docker.md

Lines changed: 40 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ You'll learn how to:
99

1010
- Connect Coder to your Git provider;
1111
- Create a workspace;
12-
- Add a sample project to your workspace;
13-
- Create a dev URL and preview changes to your project.
12+
- Add [Create React App](https://create-react-app.dev/) to your workspace, which
13+
will allow you to create a sample single-page application that you can modify;
14+
- Create a dev URL and preview changes to your project;
15+
- Push your changes to a GitHub repo.
1416

1517
## Prerequisites
1618

@@ -31,13 +33,7 @@ changes.
3133

3234
1. Provide Coder with your SSH key to connect and authenticate to GitHub.
3335

34-
If your site manager has configured OAuth, go to **Linked Accounts** and
35-
follow the on-screen instructions to link your GitHub account.
36-
37-
![Link GitHub account](../assets/getting-started/linked-accounts.png)
38-
39-
If your site manager has _not_ configured OAuth, go to **SSH keys**. Copy
40-
your public SSH key and
36+
Go to **SSH keys**. Copy your public SSH key and
4137
[provide it to GitHub](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account).
4238

4339
![Add SSH key](../assets/getting-started/ssh-keys.png)
@@ -53,7 +49,7 @@ You will now create the workspace where you'll work on your development project.
5349
1. Provide a **Workspace Name**.
5450

5551
1. In the **Image** section, click **Packaged** (this tab contains
56-
Coder-provided images hosted in a Docker registry). Select **Ubuntu**. This
52+
Coder-provided images hosted in a Docker registry). Select **NodeJS**. This
5753
will populate the form in the **Import** tab.
5854

5955
1. Under **Workspace providers**, leave the default option (which is **Docker**)
@@ -85,15 +81,15 @@ sample project to your workspace.
8581
1. Click the hamburger icon in the top right, and select **Terminal** > **New
8682
Terminal** to open a new terminal.
8783

88-
1. Clone the `create-react-app` repository:
84+
1. You're now ready to create a demo app that you can modify:
8985

9086
```console
91-
git clone git@github.com:facebook/create-react-app.git
87+
npx create-react-app my-app
88+
cd my-app
9289
```
9390

94-
Once you've cloned the repository, you can click the **Explorer** icon and
95-
expand the **create-react-app** folder in the left-have nav bar to see the
96-
contents of the repo.
91+
Once done, you can expand the `my-app` folder in the left-have nav bar to see
92+
its contents:
9793

9894
![View files](../assets/getting-started/view-files.png)
9995

@@ -118,8 +114,6 @@ specified and renders a browser link you can use to view your application.
118114
Web window and running the following in the terminal:
119115

120116
```console
121-
npx create-react-app my-app
122-
cd my-app
123117
npm start
124118
```
125119

@@ -133,3 +127,32 @@ specified and renders a browser link you can use to view your application.
133127
preview will update.
134128

135129
![Preview changes](../assets/getting-started/hello-world.png)
130+
131+
## Step 5: Push your repo to GitHub
132+
133+
The follow steps show you how to push your app to a newly created GitHub repo.
134+
135+
1. Log in to GitHub and navigate to
136+
[Create a new repository](https://github.com/new).
137+
138+
1. Provide a **repository name** and click **Create repository**.
139+
140+
1. Return to your workspace, run the following in your terminal to add a remote
141+
to your GitHub repo, change the primary branch name to `main`, and push the
142+
contents to your newly created repo:
143+
144+
```console
145+
git remote add origin https://github.com/<username>/<repoName>.git
146+
git branch -M main
147+
git push origin main
148+
```
149+
150+
1. Next, Code Web will display an alert that says the GitHub extension wants to
151+
sign in; click **Allow** to proceed.
152+
153+
1. Within the IDE window (near the top), you'll be prompted to provide your
154+
GitHub Personal Access token
155+
156+
![GitHub Personal Access Token](../assets/getting-started/gh-access-token.png)]
157+
158+
At this point, the contents of your repo should be pushed to GitHub.

0 commit comments

Comments
 (0)