✨ serve back and front end from same app

package.json

@@ -27,17 +27,17 @@
  "vue-router": "^4.1.6",
  "vuex": "^4.1.0"
  },
- "engines": {
- "node": ">= 16"
- },
- "browserslist": [
- "last 2 versions",
- "not dead"
- ],
+ "engines": {
+ "node": "^16 || ^18"
+ },
+ "browserslist": [
+ "last 2 versions",
+ "not dead"
+ ],
  "scripts": {
- "back-end": "nodemon -w src/back-end -w src/models -x 'npx tsc -p back-end.tsconfig.json && node dist/back-end/index.js'",
- "front-end": "npx parcel src/front-end/index.html",
- "html": "npx parcel build --dist-dir dist/front-end src/front-end/index.html",
- "start": "npx tsc -p back-end.tsconfig.json && host=0.0.0.0 port=3000 node dist/back-end/index.js"
+ "install": "rm -rf dist && npx tsc -p back-end.tsconfig.json && npx parcel build --dist-dir dist/front-end src/front-end/index.html",
+ "client": "npx parcel src/front-end/index.html",
+ "server": "nodemon -w src/back-end -w src/models -x 'npx tsc -p back-end.tsconfig.json && node dist/back-end/index.js'",
+ "start": "node dist/back-end/index.js"
  }
 }

src/back-end/index.ts

@@ -11,12 +11,9 @@ const port = parseInt(process.env.port ?? '3001');
 
 const app = express();
 
-app.use(cors({
- origin: host === 'localhost'
- ? 'http:https://localhost:1234'
- : 'https://haliphax.github.io'
-}));
+if (host === 'localhost') app.use(cors({ origin: "*" }));
 
+app.use(express.static("dist/front-end"));
 app.use(remultExpress({
  entities: [Participant, Story, Vote],
  async initApi(remult) {
@@ -30,5 +27,5 @@ app.use(remultExpress({
  },
 }));
 app.listen(port, host, () => {
- console.log(`API listening at http:https://${host}:${port}`);
+ console.log(`Server listening at http:https://${host}:${port}`);
 });

src/front-end/scripts/remult.ts

@@ -2,9 +2,6 @@ import axios from 'axios';
 import { Remult } from 'remult';
 
 const remult = new Remult(axios);
-remult.apiClient.url =
- location.hostname === 'localhost'
- ? 'http:https://localhost:3001/api'
- : 'https://sphenoid-secret-antimony.glitch.me/api';
+remult.apiClient.url = '/api';
 
 export default remult;

src/front-end/scripts/store/modules/session.ts

@@ -1,6 +1,7 @@
 import { Module } from 'vuex';
 import { sessionState, storeState } from '../../types';
 import { LOCALSTORAGE_GLOBAL_PREFIX } from '../../constants';
+import { v4 } from 'uuid';
 
 const SESSION_PREFIX = `${LOCALSTORAGE_GLOBAL_PREFIX}session.`;
 
@@ -17,7 +18,7 @@ const session: Module<sessionState, storeState> = {
  },
  state() {
  return {
- id: crypto.randomUUID(),
+ id: v4(),
  settings: {
  darkMode: JSON.parse(localStorage.getItem(keys.darkMode) ?? "false"),
  },