[SOLVED] Serving up a node project from within a docker file

Serving up a node project from within a docker file

I'm pretty new to the node.js/frontend world and am getting bamboozled by the various frameworks.

I have a node project that I can run locally. I've got a simple proof of concept up and running using the uppy front end framework, supported by tus.io to handle backend uploads. I use vite to serve everything up locally using yarn start.

I'm looking to run it from within a docker file so I can host it and show some colleagues. Can anyone help to get this running, it doesn't have to be pretty.

Things I've tried:

using a standard HTTP server implementation here, got errors about .js files not cjs then getting Uncaught TypeError: The specifier “@uppy/core” was a bare specifier, but was not remapped to anything in the browser
trying to use vite from a docker file but that bombed out with FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
Using webpack, but that was an all round fail with mostly cjs errors.

my index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Node.js + Uppy Example</title>
</head>
<body>
    <noscript>The app requires JavaScript to be enabled.</noscript>
    <button id="modalVisit">Upload To Visit</button>
    <script src="./upload_to_visit.js" type="module"></script>
    <noscript>The app requires JavaScript to be enabled.</noscript>
    <button id="modalDataset">Upload To Dataset</button>
    <script src="./upload_to_dataset.js" type="module"></script>
</body>
</html>

my upload_to_visit.js:

import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard';
import Tus from '@uppy/tus'
import GoldenRetriever from '@uppy/golden-retriever';

import '@uppy/core/dist/style.css'
import '@uppy/drag-drop/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';

const uppy = new Uppy({
    debug: true,
    autoProceed: false,
})

uppy.use(Dashboard, {
    inline: false,
    trigger:"#modalDataset",
    target: 'body',
    note:"to upload to a dataset",
    proudlyDisplayPoweredByUppy: false,
    showProgressDetails: true,
    fileManagerSelectionType:"files",
})

uppy.use(Tus, { endpoint: 'http://127.0.0.1:3000/files/datasets/' });
uppy.use(GoldenRetriever);

(I'm aware the the URL will need to change to accommodate the docker network)

my package.json:

{
  "name": "node_uppy",
  "version": "0.0.0",
  "type": "module",
  "dependencies": {
    "@uppy/core": "^3.3.1",
    "@uppy/drag-drop": "^3.0.2",
    "@uppy/dashboard": "",
    "@uppy/tus": "^3.1.2",
    "@uppy/golden-retriever": "^3.1.0",
    "formidable": "^3.5.0"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.3",
    "vite": "^4.0.0"
  },
  "private": true,
  "scripts": {
    "build": "npm-run-all --parallel",
    "start": "npm-run-all --parallel start:client",
    "start:client": "vite"
  }
}

Solution

Put the following in a Dockerfile:

FROM node:lts-alpine AS build
WORKDIR /app
COPY . .
RUN yarn install
RUN vite build
FROM nginx:stable-alpine
COPY --from=build /app/dist /usr/share/nginx/html

Then run docker build -t app .. That should be enough to give you a head-start.