···11+# Nuxt Docker
22+This is a test repository for debugging issues running Nuxt in a Docker container.
33+44+## Dependencies
55+The only dependency of this project is Docker. The scripts provided will run Node and NPM commands inside standalone Docker containers.
66+77+## Usage
88+To run Nuxt dev mode in a standalone container, clone this repository and run:
99+```
1010+script/prepare
1111+script/dev
1212+```
1313+1414+This will install dependencies then start a Nuxt dev server on port 80 in a Docker container. The `script/dev` script attaches to the started container, showing the log output. If you `ctrl + c` out of this, the container will be stopped and removed to avoid clogging up your system with old containers.
1515+1616+1717+## HMR Issue
1818+Currently, the hot module reloading (HMR) feature is not working correctly. To reproduce the issues, follow the steps below:
1919+2020+1. Install dependencies by running `script/prepare`.
2121+2. Start the server with `script/dev` and wait for initial build to complete. The container log shows:
2222+```
2323+OPEN http://localhost:80
2424+```
2525+2626+3. Go to `localhost` in a web browser. The page loads, showing the heading "Hello World!".
2727+4. Edit `app/pages/index.vue`, removing the "!" to leave the heading as "Hello World". The container logs show compiling progress, then:
2828+```
2929+DONE Compiled successfully in -10560ms
3030+```
3131+3232+The browser automatically shows the updates page, as expected. However, *this is where weird things start to happen:*
3333+3434+5. Once the browser has updated, the container logs show an error below the previous "Compiled successfully" message:
3535+```
3636+ nuxt:render Rendering url / +32s
3737+{ Error: Module build failed: Error: ENOENT: no such file or directory, open '/srv/app/pages/index.vue'
3838+ at Object.44 (pages/index.js:8:7)
3939+ at __webpack_require__ (webpack:/webpack/bootstrap 55191ef2777bf995a655:25:0)
4040+ at process._tickCallback (internal/process/next_tick.js:68:7) statusCode: 500, name: 'NuxtServerError' }
4141+ nuxt:render Rendering url /HNAP1/ +1s
4242+{ statusCode: 404,
4343+ path: '/HNAP1/',
4444+ message: 'This page could not be found' }
4545+```
4646+6. Refresh the browser. The page is replaced with an error message:
4747+```
4848+render function or template not defined in component: anonymous
4949+```
5050+The container logs show:
5151+```
5252+ nuxt:render Rendering url / +6m
5353+ nuxt:render Data fetching /: 0ms +0ms
5454+{ Error: render function or template not defined in component: anonymous
5555+ at normalizeRender (/srv/app/node_modules/vue-server-renderer/build.js:7407:13)
5656+ at renderComponentInner (/srv/app/node_modules/vue-server-renderer/build.js:7531:3)
5757+ at renderComponent (/srv/app/node_modules/vue-server-renderer/build.js:7502:5)
5858+ at renderNode (/srv/app/node_modules/vue-server-renderer/build.js:7418:5)
5959+ at renderComponentInner (/srv/app/node_modules/vue-server-renderer/build.js:7538:3)
6060+ at renderComponent (/srv/app/node_modules/vue-server-renderer/build.js:7502:5)
6161+ at renderNode (/srv/app/node_modules/vue-server-renderer/build.js:7418:5)
6262+ at renderComponentInner (/srv/app/node_modules/vue-server-renderer/build.js:7538:3)
6363+ at renderComponent (/srv/app/node_modules/vue-server-renderer/build.js:7502:5)
6464+ at renderNode (/srv/app/node_modules/vue-server-renderer/build.js:7418:5)
6565+ at renderComponentInner (/srv/app/node_modules/vue-server-renderer/build.js:7538:3)
6666+ at renderComponent (/srv/app/node_modules/vue-server-renderer/build.js:7502:5)
6767+ at RenderContext.renderNode (/srv/app/node_modules/vue-server-renderer/build.js:7418:5)
6868+ at RenderContext.next (/srv/app/node_modules/vue-server-renderer/build.js:2436:14)
6969+ at cachedWrite (/srv/app/node_modules/vue-server-renderer/build.js:2295:9)
7070+ at renderElement (/srv/app/node_modules/vue-server-renderer/build.js:7656:5) statusCode: 500, name: 'NuxtServerError' }
7171+```
7272+7373+7. Edit `app/pages/index.vue`, adding an "s" to make the heading "Hello worlds". The container logs show an error:
7474+```
7575+ ERROR Failed to compile with 1 errors 12:09:39 PM
7676+7777+ error in ./pages/index.vue
7878+7979+Module build failed: Error: ENOENT: no such file or directory, open '/srv/app/pages/index.vue'
8080+8181+ @ ./.nuxt/router.js 8:9-75
8282+ @ ./.nuxt/index.js
8383+ @ ./.nuxt/client.js
8484+ @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js
8585+```
8686+8787+8. Refresh the browser. The updated page is displayed with an overlay showing the build error:
8888+```
8989+ERROR in ./pages/index.vue
9090+Module build failed: Error: ENOENT: no such file or directory, open '/srv/app/pages/index.vue'
9191+```
···11+#!/bin/sh
22+33+# Work out project root directory, allowing for this script being run via sym links, etc.
44+projectRootDir=$(a="/$0"; a=${a%/*}; a=${a:-.}; a=${a#/}/; cd "${a}/.." || return; pwd)
55+66+# Set app directory in host and container
77+projectAppDir="${projectRootDir}/app"
88+containerAppDir="/srv/app"
99+1010+# Run Nuxt dev mode within a Node container
1111+docker run \
1212+ --rm \
1313+ -it \
1414+ -p "80:80" \
1515+ --env "PORT=80" \
1616+ --env "HOST=0.0.0.0" \
1717+ --volume "${projectRootDir}/app:${containerAppDir}" \
1818+ --workdir ${containerAppDir} \
1919+ node:10-alpine \
2020+ npm run dev
2121+2222+exit $?
+19
script/prepare
···11+#!/bin/sh
22+33+# Work out project root directory, allowing for this script being run via sym links, etc.
44+projectRootDir=$(a="/$0"; a=${a%/*}; a=${a:-.}; a=${a#/}/; cd "${a}/.." || return; pwd)
55+66+# Set app directory in host and container
77+projectAppDir="${projectRootDir}/app"
88+containerAppDir="/srv/app"
99+1010+# Run Nuxt dev mode within a Node container
1111+docker run \
1212+ --rm \
1313+ -it \
1414+ --volume "${projectRootDir}/app:${containerAppDir}" \
1515+ --workdir ${containerAppDir} \
1616+ node:10-alpine \
1717+ npm install
1818+1919+exit $?