build(backend): transpile and bundle using esbuild

Dockerfile

@@ -0,0 +1,17 @@
+FROM node:20.17.0 as build
+WORKDIR /usr/src/app
+
+COPY . .
+RUN yarn install --immutable
+
+RUN yarn build
+
+FROM node:20.17.0 as production
+
+WORKDIR /usr/src/app
+
+COPY --from=build /usr/src/app/dist dist
+
+EXPOSE 3000
+
+ENTRYPOINT ["node", "dist/backend/index.cjs"]

Dockerfile.dev

@@ -12,4 +12,4 @@ RUN yarn build
 
 EXPOSE 3000
 
-ENTRYPOINT ["yarn", "start:dev"]
+ENTRYPOINT ["yarn", "start"]

package.json

@@ -6,7 +6,9 @@
   "author": "Serlo Education e.V.",
   "type": "module",
   "scripts": {
-    "build": "tsc && vite build",
+    "build": "npm-run-all --parallel \"build:*\"",
+    "build:backend": "esbuild ./src/backend/index.ts --bundle --platform=node --outfile=dist/backend/index.cjs",
+    "build:frontend": "vite build",
     "dev": "docker compose up --watch --build",
     "format": "npm-run-all --sequential --continue-on-error \"format:*\"",
     "format:eslint": "eslint --fix",
@@ -20,7 +22,8 @@
     "push-image": "yarn tsx push-image.ts",
     "push-image:dev": "yarn push-image dev",
     "push-image:latest": "yarn push-image latest",
-    "start:dev": "tsx --watch src/backend/index.ts"
+    "start:dev": "tsx --watch src/backend/index.ts",
+    "start": "node dist/backend/index.cjs"
   },
   "dependencies": {
     "@serlo/editor": "0.14.0",
@@ -48,6 +51,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
+    "esbuild": "^0.24.0",
     "eslint": "^9.10.0",
     "eslint-plugin-react": "^7.35.2",
     "eslint-plugin-react-hooks": "^4.6.2",

scripts/setup_uberspace.sh

@@ -54,9 +54,9 @@ echo 'Updated environment variables'
 yarn
 echo 'Installed dependencies using Yarn'
 
-# Build frontend
+# Build frontend and backend
 yarn build
-echo 'Built the frontend app using Yarn'
+echo 'Built the frontend and the backend apps using Yarn'
 
 # Run the backend as an Uberspace service
 cp ./uberspace/app.ini ~/etc/services.d/

src/backend/index.ts

@@ -6,9 +6,6 @@
 import { Database } from './database'
 import { v4 as uuidv4 } from 'uuid'
 
-// Requires Node.js 20.11 or higher
-const __dirname = import.meta.dirname
-
 const ltijsKey = readEnvVariable('LTIJS_KEY')
 const mongodbConnectionUri = readEnvVariable('MONGODB_CONNECTION_URI')
 const ltiPlatform = {
@@ -71,7 +68,7 @@
     loginUrl: '/lti/login',
     keysetUrl: '/lti/keys',
     dynRegRoute: '/lti/register',
-    staticPath: path.join(__dirname, './../../dist'), // Path to static files
+    staticPath: path.join(__dirname, './../../dist/frontend'), // Path to static files
     cookies: {
       secure: process.env['ENVIRONMENT'] === 'local' ? false : true, // Set secure to true if the testing platform is in a different domain and https is being used
       sameSite: process.env['ENVIRONMENT'] === 'local' ? '' : 'None', // Set sameSite to 'None' if the testing platform is in a different domain and https is being used
@@ -87,7 +84,7 @@
 
 // Opens Serlo editor
 ltijs.app.get('/app', async (_, res) => {
-  return res.sendFile(path.join(__dirname, '../../dist/index.html'))
+  return res.sendFile(path.join(__dirname, '../../dist/frontend/index.html'))
 })
 
 // Endpoint to get content
@@ -117,7 +114,7 @@
     [String(decodedAccessToken.entityId)]
   )
 
   console.log('entity: ', entity)
 
   res.json(entity)
 })
@@ -142,7 +139,7 @@
     req.body.editorState,
     decodedAccessToken.entityId,
   ])
   console.log(
     `Entity ${
       decodedAccessToken.entityId
     } modified in database. New state:\n${req.body.editorState}`
@@ -163,7 +160,7 @@
   // @ts-expect-error @types/ltijs
   const resourceLinkId: string = idToken.platformContext.resource.id
 
   console.log('ltijs.onConnect -> idToken: ', idToken)
 
   const database = getDatabase()
 
@@ -260,7 +257,7 @@
     [ltiCustomClaimId, JSON.stringify(defaultContent), JSON.stringify(idToken)]
   )
 
   console.log('entityId: ', entityId)
 
   const url = new URL(
     isLocalEnvironment
@@ -329,7 +326,7 @@
     },
   })
 
   console.log(`Registered platform: ${ltiPlatform.name}`)
 
   if (process.env['ENVIRONMENT'] === 'local') {
     // Make sure there is an entity with a fixed ID in database to simplify local development

uberspace/app.ini

@@ -1,6 +1,6 @@
 [program:serlo-app]
 directory=/home/%(ENV_USER)s/serlo-editor-as-lti-tool
-command=yarn start:dev
+command=yarn start
 autostart=true
 autorestart=true
 environment=NODE_ENV=production

vite.config.ts

@@ -3,5 +3,8 @@ import react from '@vitejs/plugin-react-swc'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  build: {
+    outDir: './dist/frontend',
+  },
   plugins: [react()],
 })