0

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"
  }
}
WhatTheWhat
  • 197
  • 3
  • 13

1 Answers1

1

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.

msrumon
  • 1,250
  • 1
  • 10
  • 27
  • thanks alot for getting back. I'm getting `ERROR: failed to solve: process "/bin/sh -c vite build" did not complete successfully: exit code: 127`. i don't think it cab find `vite`. I've tried running `yarn install`, `yarn build` locally before running the docker build command just incase but it didn't solve the issue – WhatTheWhat Aug 08 '23 at 18:32
  • ahh ok, i added `"buildvite": "vite build",` to the `package.json` and then run `RUN yarn buildvite` from the dockerfile. However, I still can't figure out which IP (presumably 127.0.0.1) or port to hit the front end on? – WhatTheWhat Aug 08 '23 at 19:09
  • If you're able to build the image successfully (with the status code 0), then you can run a container from that image by running `docker run -p 8080:80 app` command. If the container is at *running* state, you should be able to visit to access the frontend app. – msrumon Aug 09 '23 at 03:10
  • Yes it was a port mapping issue. I was doing `8080:8080` instead of `8080:80`. Many thanks for all your help, you're a legend!. – WhatTheWhat Aug 09 '23 at 08:32
  • Glad I was of your help and your problem is resolved now. Take care. – msrumon Aug 09 '23 at 16:09