title: Docker container running vue-cli Welcome Page on localhost: This site can’t be reached
body: <h2>Question</h2>
  
  <p>I would like to see the vue-cli welcome page in chrome, running from a Docker Container on my Mac. I am struggling to set up the proper configuration for this to work. What am I missing? Here is what I have tried.</p>
  
  <h2>Steps</h2>
  
  <p><em>Installed</em></p>
  
  <ol>
  <li>Docker for Mac - 17.12.0-ce</li>
  <li>npm 5.6.0</li>
  <li>vue-cli 2.9.3</li>
  </ol>
  
  <p><em>Command Line</em></p>
  
  <ol>
  <li><code>$ vue init webpack docvue</code></li>
  <li><code>$ cd docvue</code></li>
  <li><code>$ npm install</code></li>
  </ol>
  
  <p><em>Files</em></p>
  
  <p>After running the commands above, I now have the vue example project ready to build with webpack.</p>
  
  <pre><code>$ ls
  README.md       config          node_modules        package.json        static
  build           index.html      package-lock.json   src
  </code></pre>
  
  <p>Within <code>/docvue/</code> I can <code>npm run dev</code>, and I see:</p>
  
  <pre><code>&gt; docvue@1.0.0 dev /Users/dchaddportwine/Startup/docvue
  &gt; webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
  
   95% emitting                                                                        
  
   DONE  Compiled successfully in 4695ms                                                                              12:17:04 PM
  
   Your application is running here: http://localhost:8080
  </code></pre>
  
  <p>And in Chrome at <code>http://localhost:8080/#/</code> I see the Vue Welcome page.</p>
  
  <p><strong>Build the Docker Image</strong></p>
  
  <p>Now it's time to build the Docker Image using this Dockerfile:</p>
  
  <pre><code># base image
  FROM node:8.10.0-alpine
  
  # Create app directory
  WORKDIR /usr/src/app
  
  # Install app dependencies
  COPY package*.json ./
  
  RUN npm install
  
  # Bundle app source
  COPY . .
  
  EXPOSE 8080
  
  CMD [ "npm", "start" ]
  </code></pre>
  
  <p><em>Command Line</em></p>
  
  <pre><code>$ docker build -t cportwine/docvue .
  Successfully built 61bc30c3695b
  Successfully tagged cportwine/docvue:latest
  </code></pre>
  
  <p>And now it's time to run the Docker image in a container:</p>
  
  <pre><code>$ docker run --rm -d cportwine/docvue
  34ba43323723c046869775f6f00e11b895c4124680784ebcaff7f711c99fc82d
  </code></pre>
  
  <p>And check the logs:</p>
  
  <pre><code>$ docker logs 34ba43323723c046869775f6f00e11b895c4124680784ebcaff7f711c99fc82d
  
  &gt; docvue@1.0.0 start /usr/src/app
  &gt; npm run dev
  
  
  &gt; docvue@1.0.0 dev /usr/src/app
  &gt; webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
  
   78% advanced chunk op DONE  Compiled successfully in 4383ms16:56:56                 
  
   Your application is running here: http://localhost:8080
  </code></pre>
  
  <h2>Problem</h2>
  
  <p>In chrome, at <code>http://localhost:8080/#/</code> I get "This site can't be reached".</p>
  
  <p>The running container looks like this:</p>
  
  <pre><code>$docker container ls
  CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
  34ba43323723        cportwine/docvue    "npm start"         7 minutes ago       Up 7 minutes        8080/tcp            agitated_payne
  </code></pre>
  
  <h2>What if</h2>
  
  <p>What if I run the Docker container using the publish option:</p>
  
  <pre><code>$ docker run --rm -p3000:8080 -d cportwine/docvue
  2f9dd0bf1caa11d96352012913eb58c7883e1db95a7ceb72e2e264184c368261
  </code></pre>
  
  <p>And check the logs:</p>
  
  <pre><code>$ docker logs 2f9dd0bf1caa11d96352012913eb58c7883e1db95a7ceb72e2e264184c368261
  
  &gt; docvue@1.0.0 start /usr/src/app
  &gt; npm run dev
  
  
  &gt; docvue@1.0.0 dev /usr/src/app
  &gt; webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
  
   78% advanced chunk op DONE  Compiled successfully in 4438ms17:08:09                 
  
   Your application is running here: http://localhost:8080
  </code></pre>
  
  <h2>Problem 2</h2>
  
  <p>Wait, is this better?</p>
  
  <pre><code>CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                    NAMES
  2f9dd0bf1caa        cportwine/docvue    "npm start"         8 minutes ago       Up 8 minutes        0.0.0.0:3000-&gt;8080/tcp   zen_liskov
  </code></pre>
  
  <p>In chrome, at <code>http://localhost:3000/#/</code> <strong>Now</strong> I get "This page isn’t working - localhost didn’t send any data."</p>
  
  <p>But I do not see the Vue Welcome page.</p>