├── .dockerignore
├── public
├── favicon.ico
├── robots.txt
└── index.html
├── src
├── index.js
├── index.css
├── App.css
├── App.js
└── Confetti.js
├── README.md
├── Dockerfile
├── .github
└── workflows
│ └── merge-main-into-small-image.yml
├── package.json
├── MAINTAINERS.md
└── .gitignore
/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/docker/welcome-to-docker/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 |
6 | const root = ReactDOM.createRoot(document.getElementById('root'));
7 | root.render(
8 |
9 |
10 |
11 | );
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Roboto',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Docker
2 |
3 | This is a repo for new users getting started with Docker.
4 |
5 | You can try it out using the following command.
6 | ```
7 | docker run -d -p 8088:80 --name welcome-to-docker docker/welcome-to-docker
8 | ```
9 | And open `http://localhost:8088` in your browser.
10 |
11 | # Building
12 |
13 | Maintainers should see [MAINTAINERS.md](MAINTAINERS.md).
14 |
15 | Build and run:
16 | ```
17 | docker build -t welcome-to-docker .
18 | docker run -d -p 8088:3000 --name welcome-to-docker welcome-to-docker
19 | ```
20 | Open `http://localhost:8088` in your browser.
21 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | # Start your image with a node base image
2 | FROM node:22-alpine
3 |
4 | # The /app directory should act as the main application directory
5 | WORKDIR /app
6 |
7 | # Copy the app package and package-lock.json file
8 | COPY package*.json ./
9 |
10 | # Copy local directories to the current local directory of our docker image (/app)
11 | COPY ./src ./src
12 | COPY ./public ./public
13 |
14 | # Install node packages, install serve, build the app, and remove dependencies at the end
15 | RUN npm install \
16 | && npm install -g serve@latest \
17 | && npm run build \
18 | && rm -fr node_modules
19 |
20 | EXPOSE 3000
21 |
22 | # Start the app using serve command
23 | CMD [ "serve", "-s", "build" ]
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
13 | Welcome to Docker
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/.github/workflows/merge-main-into-small-image.yml:
--------------------------------------------------------------------------------
1 | name: merge-main-into-small-image.yml
2 | on:
3 | pull_request:
4 | branches:
5 | - main
6 | types:
7 | - closed
8 | jobs:
9 | merge-main-into-small-image:
10 | runs-on: ubuntu-latest
11 | if: github.event.pull_request.merged == true
12 | timeout-minutes: 3
13 |
14 | steps:
15 | - uses: actions/checkout@v4
16 | with:
17 | fetch-depth: 0
18 | - name: Merge with main
19 | run: |
20 | git config user.name github-actions
21 | git config user.email github-actions@github.com
22 | git fetch
23 | git checkout small-image
24 | git merge main --no-ff --no-edit
25 | git push origin small-image
26 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "welcome-to-docker",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "^18.2.0",
7 | "react-dom": "^18.2.0",
8 | "react-particles": "^2.9.3",
9 | "react-scripts": "5.0.1",
10 | "tsparticles": "^2.9.3"
11 | },
12 | "scripts": {
13 | "start": "react-scripts start",
14 | "build": "react-scripts build",
15 | "test": "react-scripts test",
16 | "eject": "react-scripts eject"
17 | },
18 | "eslintConfig": {
19 | "extends": [
20 | "react-app",
21 | "react-app/jest"
22 | ]
23 | },
24 | "browserslist": {
25 | "production": [
26 | ">0.2%",
27 | "not dead",
28 | "not op_mini all"
29 | ],
30 | "development": [
31 | "last 1 chrome version",
32 | "last 1 firefox version",
33 | "last 1 safari version"
34 | ]
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | .App-header {
11 | background-color: #003f8c;
12 | min-height: 100vh;
13 | display: flex;
14 | flex-direction: column;
15 | align-items: center;
16 | justify-content: center;
17 | font-size: calc(10px + 2vmin);
18 | color: white;
19 | }
20 |
21 | .App-link {
22 | color: #61dafb;
23 | }
24 |
25 | .fa-brands {
26 | padding: 20px;
27 | font-size: 30px;
28 | width: 50px;
29 | margin: 10px;
30 | text-align: center;
31 | text-decoration: none;
32 | }
33 |
34 | .fa-brands:hover {
35 | opacity: 0.7;
36 | }
37 |
38 | /* Twitter */
39 | .fa-x-twitter {
40 | background: #55acee;
41 | color: white;
42 | }
43 |
44 | /* Linkedin */
45 | .fa-linkedin {
46 | background: #55acee;
47 | color: white;
48 | }
49 |
50 | /* Reddit */
51 | .fa-reddit {
52 | background: #55acee;
53 | color: white;
54 | }
55 |
--------------------------------------------------------------------------------
/MAINTAINERS.md:
--------------------------------------------------------------------------------
1 | # Maintaining the docker/welcome-to-docker Image
2 |
3 | This document is for maintainers of this repository.
4 |
5 | ## Docker Hub Image
6 |
7 | The image is stored on Docker Hub in the [`docker/welcome-to-docker`](https://hub.docker.com/r/docker/welcome-to-docker) repository.
8 |
9 | For the `latest` tag, we are using the `small-image` branch to make the first walkthrough user experience optimal. Every commit to `main` will be automatically merged to `small-image` via GitHub Actions.
10 |
11 | ## Deploying Changes
12 |
13 | We do not currently have automation for pushing the changes to the image repository, so this is a manual step. First, wait for `small-image` to have the changes merged in and then run the following to build and push:
14 | ```bash
15 | git checkout small-image
16 | docker buildx create --name mybuilder --use --bootstrap # only if not created before
17 | docker buildx build --push --platform linux/amd64,linux/arm64 --tag docker/welcome-to-docker .
18 | ```
19 |
20 | Be sure to verify the changes. Run the following command and visit http://localhost:8088 to verify the changes were successfully deployed.
21 |
22 | ```bash
23 | docker run --pull always -p 8088:80 docker/welcome-to-docker:latest
24 | ```
25 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import "./App.css";
2 | import Confetti from "./Confetti";
3 |
4 | const shareMessage = "I just ran my first container using Docker";
5 | const shareLink = "https://docker.com/";
6 |
7 | const App = () => {
8 | return (
9 |
56 | );
57 | };
58 |
59 | export default App;
60 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 |
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 |
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 |
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | *.lcov
24 |
25 | # nyc test coverage
26 | .nyc_output
27 |
28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29 | .grunt
30 |
31 | # Bower dependency directory (https://bower.io/)
32 | bower_components
33 |
34 | # node-waf configuration
35 | .lock-wscript
36 |
37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
38 | build/Release
39 |
40 | # Dependency directories
41 | node_modules/
42 | jspm_packages/
43 |
44 | # TypeScript v1 declaration files
45 | typings/
46 |
47 | # TypeScript cache
48 | *.tsbuildinfo
49 |
50 | # Optional npm cache directory
51 | .npm
52 |
53 | # Optional eslint cache
54 | .eslintcache
55 |
56 | # Microbundle cache
57 | .rpt2_cache/
58 | .rts2_cache_cjs/
59 | .rts2_cache_es/
60 | .rts2_cache_umd/
61 |
62 | # Optional REPL history
63 | .node_repl_history
64 |
65 | # Output of 'npm pack'
66 | *.tgz
67 |
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
71 | # dotenv environment variables file
72 | .env
73 | .env.test
74 |
75 | # parcel-bundler cache (https://parceljs.org/)
76 | .cache
77 |
78 | # Next.js build output
79 | .next
80 |
81 | # Nuxt.js build / generate output
82 | .nuxt
83 | dist
84 |
85 | # Gatsby files
86 | .cache/
87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
88 | # https://nextjs.org/blog/next-9-1#public-directory-support
89 | # public
90 |
91 | # vuepress build output
92 | .vuepress/dist
93 |
94 | # Serverless directories
95 | .serverless/
96 |
97 | # FuseBox cache
98 | .fusebox/
99 |
100 | # DynamoDB Local files
101 | .dynamodb/
102 |
103 | # TernJS port file
104 | .tern-port
105 |
--------------------------------------------------------------------------------
/src/Confetti.js:
--------------------------------------------------------------------------------
1 | import Particles from "react-particles";
2 | import { useCallback } from "react";
3 | import { loadFull } from "tsparticles";
4 |
5 | const Confetti = () => {
6 |
7 | const particlesInit = useCallback(async engine => {
8 | console.log(engine);
9 | // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
10 | // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
11 | // starting from v2 you can add only the features you need reducing the bundle size
12 | await loadFull(engine);
13 | }, []);
14 |
15 | const particlesLoaded = useCallback(async container => {
16 | await console.log(container);
17 | }, []);
18 |
19 | return (
20 |
174 | );
175 | }
176 |
177 | export default Confetti;
178 |
--------------------------------------------------------------------------------