Merge pull request #68 from serlo/build/transpile-bundle-backend-esbuild

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.1",
+    "esbuild": "^0.24.0",
     "eslint": "^9.10.0",
     "eslint-plugin-react": "^7.36.1",
     "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 { Pool, createPool } from 'mysql2/promise'
 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 @@ ltijs.setup(
     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 @@ ltijs.app.use((_, res, next) => {
 
 // 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

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()],
 })