You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -26,37 +26,33 @@ Now that you have Docker Desktop installed, you are ready to do some application
26
26
27
27
In this hands-on guide, you'll learn how to develop with containers.
28
28
29
-
30
29
## Start the project
31
30
32
31
1. To get started, either clone or [download the project as a ZIP file](https://github.com/docker/getting-started-todo-app/archive/refs/heads/main.zip) to your local machine.
And after the project is cloned, navigate into the new directory created by the clone:
37
+
And after the project is cloned, navigate into the new directory created by the clone:
39
38
40
-
```console
41
-
$ cd getting-started-todo-app
42
-
```
39
+
```console
40
+
$ cd getting-started-todo-app
41
+
```
43
42
44
43
2. Once you have the project, start the development environment using Docker Compose.
45
44
46
-
47
-
To start the project using the CLI, run the following command:
45
+
To start the project using the CLI, run the following command:
48
46
49
47
```console
50
48
$ docker compose watch
51
49
```
52
50
53
51
You will see an output that shows container images being pulled down, containers starting, and more. Don't worry if you don't understand it all at this point. But, within a moment or two, things should stabilize and finish.
54
52
55
-
56
53
3. Open your browser to [http://localhost](http://localhost) to see the application up and running. It may take a few minutes for the app to run. The app is a simple to-do application, so feel free to add an item or two, mark some as done, or even delete an item.
57
54
58
-
59
-
55
+
60
56
61
57
### What's in the environment?
62
58
@@ -70,7 +66,6 @@ Now that the environment is up and running, what's actually in it? At a high-lev
70
66
71
67
With this environment, you as the developer don’t need to install or configure any services, populate a database schema, configure database credentials, or anything. You only need Docker Desktop. The rest just works.
72
68
73
-
74
69
## Make changes to the app
75
70
76
71
With this environment up and running, you’re ready to make a few changes to the application and see how Docker helps provide a fast feedback loop.
@@ -79,85 +74,90 @@ With this environment up and running, you’re ready to make a few changes to th
79
74
80
75
The greeting at the top of the page is populated by an API call at `/api/greeting`. Currently, it always returns "Hello world!". You’ll now modify it to return one of three randomized messages (that you'll get to choose).
81
76
82
-
1. Open the `backend/src/routes/getGreeting.js` file in a text editor. This file provides the handler for the API endpoint.
77
+
1. Open the `backend/src/routes/getGreeting.js` file in a text editor on
78
+
your local machine (in the cloned project directory). This file provides
79
+
the handler for the API endpoint. Your changes will automatically sync to
80
+
the running container.
83
81
84
82
2. Modify the variable at the top to an array of greetings. Feel free to use the following modifications or customize it to your own liking. Also, update the endpoint to send a random greeting from this list.
3. If you haven't done so yet, save the file. If you refresh your browser, you should see a new greeting. If you keep refreshing, you should see all of the messages appear.
101
99
102
-
103
-
100
+
104
101
105
102
### Change the placeholder text
106
103
107
104
When you look at the app, you'll see the placeholder text is simply "New Item". You’ll now make that a little more descriptive and fun. You’ll also make a few changes to the styling of the app too.
108
105
109
-
1. Open the `client/src/components/AddNewItemForm.jsx`file. This provides the component to add a newitem to the to-do list.
106
+
1. Open the `client/src/components/AddNewItemForm.jsx` file in your local
107
+
project directory. This provides the component to add a new item to the
108
+
to-do list.
110
109
111
110
2. Modify the `placeholder` attribute of the `Form.Control` element to whatever you'd like to display.
112
111
113
-
```js {linenos=table,hl_lines=[5],linenostart=33}
114
-
<Form.Control
115
-
value={newItem}
116
-
onChange={(e) => setNewItem(e.target.value)}
117
-
type="text"
118
-
placeholder="What do you need to do?"
119
-
aria-label="New item"
120
-
/>
121
-
```
112
+
```js {linenos=table,hl_lines=[5],linenostart=33}
113
+
<Form.Control
114
+
value={newItem}
115
+
onChange={(e) =>setNewItem(e.target.value)}
116
+
type="text"
117
+
placeholder="What do you need to do?"
118
+
aria-label="New item"
119
+
/>
120
+
```
122
121
123
122
3. Save the file and go back to your browser. You should see the change already hot-reloaded into your browser. If you don't like it, feel free to tweak it until it looks just right.
124
123
125
124
126
125
127
-
128
126
### Change the background color
129
127
130
128
Before you consider the application finalized, you need to make the colors better.
131
129
132
-
1. Open the `client/src/index.scss` file.
130
+
1. Open the `client/src/index.scss` file in your local project directory.
133
131
134
132
2. Adjust the `background-color` attribute to any color you'd like. The provided snippet is a soft blue to go along with Docker's nautical theme.
135
133
136
-
If you're using an IDE, you can pick a color using the integrated color pickers. Otherwise, feel free to use an online [Color Picker](https://www.w3schools.com/colors/colors_picker.asp).
137
-
138
-
```css {linenos=table,hl_lines=2,linenostart=3}
139
-
body {
140
-
background-color: #99bbff;
141
-
margin-top: 50px;
142
-
font-family: 'Lato';
143
-
}
144
-
```
145
-
146
-
Each save should let you see the change immediately in the browser. Keep adjusting it until it's the perfect setup for you.
134
+
If you're using an IDE, you can pick a color using the integrated color pickers. Otherwise, feel free to use an online [Color Picker](https://www.w3schools.com/colors/colors_picker.asp).
147
135
136
+
```css {linenos=table,hl_lines=2,linenostart=3}
137
+
body {
138
+
background-color: #99bbff;
139
+
margin-top: 50px;
140
+
font-family: "Lato";
141
+
}
142
+
```
148
143
149
-
144
+
Each save should let you see the change immediately in the browser. Keep adjusting it until it's the perfect setup for you.
150
145
151
-
And with that, you're done. Congrats on updating your website.
146
+
152
147
148
+
And with that, you're done. Congrats on updating your website.
153
149
154
150
## Recap
155
151
156
152
Before you move on, take a moment and reflect on what happened here. Within a few moments, you were able to:
157
153
158
154
- Start a complete development project with zero installation effort. The containerized environment provided the development environment, ensuring you have everything you need. You didn't have to install Node, MySQL, or any of the other dependencies directly on your machine. All you needed was Docker Desktop and a code editor.
159
155
160
-
- Make changes and see them immediately. This was made possible because 1) the processes running in each container are watching and responding to file changes and 2) the files are shared with the containerized environment.
156
+
- Make changes and see them immediately. This was made possible because
157
+
1. the processes running in each container are watching and responding to
158
+
file changes and 2) the files in your local project directory are shared
159
+
with the containerized environment, so edits you make locally are
160
+
automatically synced to the containers.
161
161
162
162
Docker Desktop enables all of this and so much more. Once you start thinking with containers, you can create almost any environment and easily share it with your team.
163
163
@@ -166,4 +166,3 @@ Docker Desktop enables all of this and so much more. Once you start thinking wit
166
166
Now that the application has been updated, you’re ready to learn about packaging it as a container image and pushing it to a registry, specifically Docker Hub.
167
167
168
168
{{< button text="Build and push your first image" url="build-and-push-first-image" >}}
0 commit comments