changed server setup to use ViteExpress to serve front and backend

backend/README.md

@@ -1,31 +0,0 @@
-# ethermap api
-
-Backend for ethermap
-
-## Install
-
-To install and run the backen you will need [NodeJS](https://nodejs.org/en) and `npm` installed, along with access to Postgresql server (possibility for this to be any database server). Then :
-
-```sh 
-$ npm i
-```
-
-Once all the packages are installed you should setup your `.env` file (follow the `.env.template`). Once this has all the appropriate entries you can then connect and migrate the database.
-
-```sh 
-$ npm run migrate:latest
-```
-
-then to run the development server you should run :
-
-```sh 
-$ npm run dev
-```
-
-## Tech
-
-The backend is made up of a REST api and websocket server. The REST api is built on [Express](https://expressjs.com/) and the websocket server is built on [socket.io](https://socket.io/).
-
-Database interface is the ODM [objection.js](https://vincit.github.io/objection.js/). This setup might not be the best as it was adopted mid-project after starting with just [Knex](https://knexjs.org/) alone.
-
-Tests are written in [Ava](https://github.com/avajs/ava).

backend/db/DB.js

@@ -1,4 +1,4 @@
-import knexConfig from '../knexfile.js'
+import knexConfig from '../../knexfile.js'
 import Knex from 'knex'
 import { Model } from 'objection'
 

backend/express.js

@@ -6,9 +6,6 @@ import cors from 'cors'
 import DB from './db/DB.js'
 import { Model } from 'objection'
 
-// middleware
-import ErrorMiddleware from './middleware/errors.js'
-
 // database setup
 Model.knex(DB)
 
@@ -17,14 +14,8 @@ const app = express()
 app.use(express.json())
 app.use(cors())
 
-// home route
- app.get('/', (_, res) => res.send('ethermap'))
-
 // routes
 import apiRouter from './routes/api.js'
 app.use('/api', apiRouter)
 
-// error middleware
-app.use(ErrorMiddleware)
-
 export default app

backend/package.json

@@ -1,39 +0,0 @@
-{
-  "name": "ethermap",
-  "version": "0.0.1",
-  "description": "collaborative map tool inspired by etherpad",
-  "main": "index.js",
-  "type": "module",
-  "scripts": {
-    "dev": "nodemon index.js",
-    "test": "ava",
-    "test:routes": "ava ./tests/routes.js",
-    "test:db": "ava ./tests/db.js",
-    "migrate:latest": "knex migrate:latest",
-    "migrate:drop": "knex migrate:down"
-  },
-  "keywords": [
-    "ethermap",
-    "map",
-    "collaborative"
-  ],
-  "author": "",
-  "license": "GPL-3.0-or-later",
-  "dependencies": {
-    "cors": "^2.8.5",
-    "dotenv": "^16.3.1",
-    "express": "^4.18.2",
-    "knex": "^2.5.1",
-    "objection": "^3.1.1",
-    "pg": "^8.11.3",
-    "socket.io": "^4.7.2",
-    "sqlite3": "^5.1.6",
-    "vite-express": "^0.10.0"
-  },
-  "devDependencies": {
-    "ava": "^5.3.1",
-    "eslint": "^8.48.0",
-    "nodemon": "^3.0.1",
-    "supertest": "^6.3.3"
-  }
-}

frontend/README.md

@@ -1,25 +0,0 @@
-# ethermap frontend
-
-Frontend for ethermap 
-
-## Install
-
-To install the frontend you will need [NodeJS](https://nodejs.org/en) and `npm` installed. Then :
-
-```sh 
-$ npm i
-```
-
-To run the development server run :
-
-```sh 
-$ npm run dev
-```
-
-## Tech
-
-The interface is built with [LitElement](https://lit.dev/) and setup with [Vite](https://vitejs.dev/) bundler and dev server.
-
-Maps are rendered with [Leaflet](https://leafletjs.com).
-
-For ethermap to work you will also need to be running the [ethermap.api]() server for REST API and Socket.io connectivity.

frontend/package.json

@@ -1,22 +0,0 @@
-{
-  "name": "ethermap.front",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "devDependencies": {
-    "eslint-plugin-lit": "^1.9.1",
-    "vite": "^4.4.5"
-  },
-  "dependencies": {
-    "leaflet": "^1.9.4",
-    "leaflet-contextmenu": "^1.4.0",
-    "lit": "^2.8.0",
-    "socket.io-client": "^4.7.2"
-  },
-  "license": "GPL-3.0-or-later"
-}

frontend/src/components/MapView.js

@@ -32,7 +32,7 @@ class MapView extends LitElement {
 
   firstUpdated() {
     // connect to socket
-    this.socket = io('http://localhost:3000')
+    this.socket = io()
 
     // create leaflet map
     const mapEl = this.shadowRoot.querySelector('main')

frontend/src/controllers/MapController.js

@@ -8,7 +8,7 @@ export default class MapController {
 
   async get(name) {
     try {
-      const req = await fetch(`http://localhost:3000/api/map/${name}`)
+      const req = await fetch(`/api/map/${name}`)
       const json = await req.json()
 
       this.map = json

backend/knexfile.js → knexfile.js

@@ -11,11 +11,12 @@ const __dirname = dirname(fileURLToPath(import.meta.url))
 export default {
   development: {
     client: 'sqlite3',
+    useNullAsDefault: true,
     connection: {
-      filename: './db/development.db'
+      filename: __dirname + '/backend/db/development.db'
     },
     migrations: {
-      directory: __dirname + '/db/migrations'
+      directory: __dirname + '/backend/db/migrations'
     },
     seeds: {
       directory: __dirname + '/db/seeds'
@@ -27,10 +28,10 @@ export default {
     connection: ':memory:',
     useNullAsDefault: true,
     migrations: {
-      directory: __dirname + '/db/migrations'
+      directory: __dirname + '/backend/db/migrations'
     },
     seeds: {
-      directory: __dirname + '/db/seeds'
+      directory: __dirname + '/backend/db/seeds'
     }
   },
 

package.json

@@ -2,21 +2,39 @@
   "name": "ethermap",
   "version": "1.0.0",
   "description": "> This is very much a janky _earlydays_ project. All help is welcome!",
-  "main": "index.js",
+  "main": "server.js",
+  "type": "module",
   "scripts": {
-    "install:front": "cd ./frontend && npm i",
-    "install:back": "cd ./backend && npm i",
-    "install:all": "npm-run-all --sequential install:front install:back",
-    "migrate:latest": "cd ./backend && npm run migrate:latest",
-    "migrate:drop": "cd ./backend && npm run migrate:drop",
-    "dev:front": "cd ./frontend && npm run dev",
-    "dev:back": "cd ./backend && npm run dev",
-    "dev:all": "npm-run-all --parallel dev:front dev:back"
+    "dev": "nodemon server.js -w backend/",
+    "test": "ava",
+    "test:routes": "ava ./backend/tests/routes.js",
+    "test:db": "ava ./backend/tests/db.js",
+    "migrate:latest": "knex migrate:latest",
+    "migrate:drop": "knex migrate:down"
   },
   "keywords": [],
   "author": "",
   "license": "GPL-3.0-or-later",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
+    "knex": "^2.5.1",
+    "leaflet": "^1.9.4",
+    "leaflet-contextmenu": "^1.4.0",
+    "lit": "^2.8.0",
+    "objection": "^3.1.1",
+    "pg": "^8.11.3",
+    "socket.io": "^4.7.2",
+    "socket.io-client": "^4.7.2",
+    "sqlite3": "^5.1.6",
+    "vite-express": "^0.10.0"
+  },
   "devDependencies": {
-    "npm-run-all": "^4.1.5"
+    "ava": "^5.3.1",
+    "eslint": "^8.48.0",
+    "nodemon": "^3.0.1",
+    "supertest": "^6.3.3",
+    "vite": "^4.4.9"
   }
 }

backend/index.js → server.js

@@ -1,17 +1,18 @@
-import App from './express.js'
+import App from './backend/express.js'
+import ViteExpress from 'vite-express'
 import 'dotenv/config'
 
-import { Socket } from './sockets.js'
+import { Socket } from './backend/sockets.js'
 import { Server } from 'socket.io'
 
+
 const server = App.listen(process.env.PORT, () => {
   console.log(`Ethermap listening for connections on port ${process.env.PORT}`)
 })
 
-const io = new Server(server, {
-  cors: {
-    origin: 'http://localhost:5173'
-  }
-})
+const io = new Server(server)
+
+ViteExpress.bind(App, server)
 
 Socket(io)
+

frontend/vite.config.js → vite.config.js

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 
 export default defineConfig({
+  root: 'frontend/',
   base: '/',
   build: {
     sourcemap: true,