├── .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 |
10 | 11 |
12 |

Congratulations!!!

13 |

14 | You ran your first container. 15 |

16 |
17 | 28 | {" "} 29 | 30 | 38 | {" "} 39 | 40 | 51 | {" "} 52 | 53 |
54 |
55 |
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 | --------------------------------------------------------------------------------