Browse Source

changed server setup to use ViteExpress to serve front and backend

main
suroh 6 months ago
parent
commit
75e5200748
  1. 0
      .env.template
  2. 0
      .eslintrc.cjs
  3. 31
      backend/README.md
  4. 2
      backend/db/DB.js
  5. 9
      backend/express.js
  6. 5090
      backend/package-lock.json
  7. 39
      backend/package.json
  8. 25
      frontend/README.md
  9. 1940
      frontend/package-lock.json
  10. 22
      frontend/package.json
  11. 2
      frontend/src/components/MapView.js
  12. 2
      frontend/src/controllers/MapController.js
  13. 9
      knexfile.js
  14. 6205
      package-lock.json
  15. 38
      package.json
  16. 15
      server.js
  17. 1
      vite.config.js

0
backend/.env.template → .env.template

0
frontend/.eslintrc.cjs → .eslintrc.cjs

31
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).

2
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'

9
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

5090
backend/package-lock.json

File diff suppressed because it is too large

39
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"
}
}

25
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.

1940
frontend/package-lock.json

File diff suppressed because it is too large

22
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"
}

2
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')

2
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

9
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'
}
},

6205
package-lock.json

File diff suppressed because it is too large

38
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"
}
}

15
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)

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

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