pr05 Typescript Migration #10: Setup Server TS Dependencies & migrate instance of server file

client/tsconfig.json

@@ -6,4 +6,6 @@
     "lib": ["DOM", "ESNext"],
     "jsx": "react",
   },
+  "include": ["./**/*"],
+  "exclude": ["../node_modules", "../server"]
 }

index.js

@@ -1,11 +1,14 @@
 if (process.env.NODE_ENV === 'production') {
-  process.env.webpackAssets = JSON.stringify(require('./dist/static/manifest.json'));
+  process.env.webpackAssets = JSON.stringify(
+    require('./dist/static/manifest.json')
+  );
   require('./dist/server.bundle.js');
   require('./dist/previewServer.bundle.js');
 } else {
   let parsed = require('dotenv').config();
   require('@babel/register')({
-    presets: ["@babel/preset-env"]
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    presets: ['@babel/preset-env', '@babel/preset-typescript']
   });
   require('regenerator-runtime/runtime');
   //// in development, let .env values override those in the environment already (i.e. in docker-compose.yml)

nodemon.json

@@ -12,5 +12,5 @@
   "env": {
     "NODE_ENV": "development"
   },
-  "ext": "js json"
+  "ext": "js ts json"
 }

package.json

@@ -27,8 +27,9 @@
     "storybook:build:css": "sass client/styles/main.scss client/styles/storybook.css",
     "storybook": "npm run storybook:build:css && storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "typecheck": "npm run typecheck:client",
-    "typecheck:client": "npx tsc --noEmit -p ./client/tsconfig.json"
+    "typecheck": "npm run typecheck:client && npm run typecheck:server",
+    "typecheck:client": "npx tsc --noEmit -p ./client/tsconfig.json",
+    "typecheck:server": "npx tsc --noEmit -p ./server/tsconfig.json"
   },
   "husky": {
     "hooks": {
@@ -45,6 +46,15 @@
       {
         "displayName": "server",
         "testEnvironment": "node",
+        "transform": {
+          "^.+\\.[jt]sx?$": "babel-jest"
+        },
+        "moduleFileExtensions": [
+          "ts",
+          "js",
+          "json",
+          "node"
+        ],
         "setupFilesAfterEnv": [
           "<rootDir>/server/jest.setup.js"
         ],

server/controllers/project.controller.js

@@ -9,7 +9,7 @@ import slugify from 'slugify';
 import Project from '../models/project';
 import User from '../models/user';
 import { resolvePathToFile } from '../utils/filePath';
-import generateFileSystemSafeName from '../utils/generateFileSystemSafeName';
+import { generateFileSystemSafeName } from '../utils/generateFileSystemSafeName';
 
 export {
   default as createProject,

server/previewServer.js

@@ -8,7 +8,7 @@ import webpackHotMiddleware from '@gatsbyjs/webpack-hot-middleware';
 import config from '../webpack/config.dev';
 import embedRoutes from './routes/embed.routes';
 import assetRoutes from './routes/asset.routes';
-import renderPreviewIndex from './views/previewIndex';
+import { renderPreviewIndex } from './views/previewIndex';
 
 const app = new Express();
 

server/routes/server.routes.js

@@ -1,5 +1,5 @@
 import { Router } from 'express';
-import sendHtml, { renderIndex, renderProjectIndex } from '../views/index';
+import { sendHtml, renderIndex, renderProjectIndex } from '../views/index';
 import { userExists } from '../controllers/user.controller';
 import {
   projectExists,

server/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "commonjs",
+    "lib": ["ES2022"],
+    "types": ["node", "jest"]
+  },
+  "include": ["./**/*"],
+  "exclude": ["../node_modules", "../client"]
+}

server/utils/generateFileSystemSafeName.js → server/utils/generateFileSystemSafeName.ts

@@ -1,16 +1,17 @@
 /**
- * generate file system safe string for a given string
+ * generate file system safe string for a given name
  * that can be used as a valid file name
  * in all operating systems
- * @param {String} string
+ * @param {String} originalName
  * @param {String} replacer (optional) character to replace invalid characters
  */
-function generateFileSystemSafeName(string, replacer) {
+export function generateFileSystemSafeName(
+  originalName: string,
+  replacer: string
+) {
   // from here  https://serverfault.com/a/242134
   const INVALID_CHARS_REGEX = /[*/?:\\<>|"\u0000-\u001F]/g; // eslint-disable-line
-  const slug = string.replace(INVALID_CHARS_REGEX, replacer || '');
+  const slug = originalName.replace(INVALID_CHARS_REGEX, replacer || '');
 
   return slug;
 }
-
-export default generateFileSystemSafeName;

server/views/index.js → server/views/index.ts

@@ -1,7 +1,9 @@
+import { Request, Response } from 'express';
 import get404Sketch from './404Page';
 
 export function renderIndex() {
-  const assetsManifest = process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
+  const assetsManifest =
+    process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
   return `
   <!DOCTYPE html>
   <html lang="en">
@@ -11,7 +13,11 @@ export function renderIndex() {
       <meta name="keywords" content="p5.js, p5.js web editor, web editor, processing, code editor" />
       <meta name="description" content="A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners." />
       <title>p5.js Web Editor</title>
-      ${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />` : ''}
+      ${
+        process.env.NODE_ENV === 'production'
+          ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />`
+          : ''
+      }
       <link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
       <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
       <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' / >
@@ -25,31 +31,54 @@ export function renderIndex() {
         window.process.env.API_URL = '${process.env.API_URL}';
         window.process.env.NODE_ENV = '${process.env.NODE_ENV}';
         window.process.env.S3_BUCKET = '${process.env.S3_BUCKET}';
-        window.process.env.S3_BUCKET_URL_BASE = ${process.env.S3_BUCKET_URL_BASE ? `'${process.env.S3_BUCKET_URL_BASE}'` : undefined};
+        window.process.env.S3_BUCKET_URL_BASE = ${
+          process.env.S3_BUCKET_URL_BASE
+            ? `'${process.env.S3_BUCKET_URL_BASE}'`
+            : undefined
+        };
         window.process.env.AWS_REGION = '${process.env.AWS_REGION}';
-        window.process.env.FORCE_TO_HTTPS = ${process.env.FORCE_TO_HTTPS === 'false' ? false : undefined};
+        window.process.env.FORCE_TO_HTTPS = ${
+          process.env.FORCE_TO_HTTPS === 'false' ? false : undefined
+        };
         window.process.env.CLIENT = true;
-        window.process.env.LOGIN_ENABLED = ${process.env.LOGIN_ENABLED === 'false' ? false : true};
-        window.process.env.EXAMPLES_ENABLED = ${process.env.EXAMPLES_ENABLED === 'false' ? false : true};
-        window.process.env.UI_ACCESS_TOKEN_ENABLED = ${process.env.UI_ACCESS_TOKEN_ENABLED === 'false' ? false : true};
-        window.process.env.UI_COLLECTIONS_ENABLED = ${process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true};
-        window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined};
-        window.process.env.TRANSLATIONS_ENABLED = ${process.env.TRANSLATIONS_ENABLED === 'true' ? true : false}; 
+        window.process.env.LOGIN_ENABLED = ${
+          process.env.LOGIN_ENABLED !== 'false'
+        };
+        window.process.env.EXAMPLES_ENABLED = ${
+          process.env.EXAMPLES_ENABLED !== 'false'
+        };
+        window.process.env.UI_ACCESS_TOKEN_ENABLED = ${
+          process.env.UI_ACCESS_TOKEN_ENABLED !== 'false'
+        };
+        window.process.env.UI_COLLECTIONS_ENABLED = ${
+          process.env.UI_COLLECTIONS_ENABLED !== 'false'
+        };
+        window.process.env.UPLOAD_LIMIT = ${
+          process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined
+        };
+        window.process.env.TRANSLATIONS_ENABLED = ${
+          process.env.TRANSLATIONS_ENABLED === 'true'
+        }; 
         window.process.env.PREVIEW_URL = '${process.env.PREVIEW_URL}';
         window.process.env.GA_MEASUREMENT_ID='${process.env.GA_MEASUREMENT_ID}';
       </script>
     </head>
     <body>
       <div id="root" class="root-app">
       </div>
-      <script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/app.js']}` : '/app.js'}'></script>
+      <script src='${
+        process.env.NODE_ENV === 'production'
+          ? `${assetsManifest['/app.js']}`
+          : '/app.js'
+      }'></script>
     </body>
   </html>
   `;
 }
 
-export function renderProjectIndex(username, projectName) {
-  const assetsManifest = process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
+export function renderProjectIndex(username: string, projectName: string) {
+  const assetsManifest =
+    process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
   return `
   <!DOCTYPE html>
   <html lang="en">
@@ -59,7 +88,11 @@ export function renderProjectIndex(username, projectName) {
       <meta name="keywords" content="p5.js, p5.js web editor, web editor, processing, code editor" />
       <meta name="description" content="A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners." />
       <title>${`${projectName} by ${username} -`}p5.js Web Editor</title>
-      ${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />` : ''}
+      ${
+        process.env.NODE_ENV === 'production'
+          ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />`
+          : ''
+      }
       <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
       <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
       <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' / >
@@ -73,24 +106,46 @@ export function renderProjectIndex(username, projectName) {
         window.process.env.API_URL = '${process.env.API_URL}';
         window.process.env.NODE_ENV = '${process.env.NODE_ENV}';
         window.process.env.S3_BUCKET = '${process.env.S3_BUCKET}';
-        window.process.env.S3_BUCKET_URL_BASE = ${process.env.S3_BUCKET_URL_BASE ? `'${process.env.S3_BUCKET_URL_BASE}'` : undefined};
+        window.process.env.S3_BUCKET_URL_BASE = ${
+          process.env.S3_BUCKET_URL_BASE
+            ? `'${process.env.S3_BUCKET_URL_BASE}'`
+            : undefined
+        };
         window.process.env.AWS_REGION = '${process.env.AWS_REGION}';
-        window.process.env.FORCE_TO_HTTPS = ${process.env.FORCE_TO_HTTPS === 'false' ? false : undefined};
+        window.process.env.FORCE_TO_HTTPS = ${
+          process.env.FORCE_TO_HTTPS === 'false' ? false : undefined
+        };
         window.process.env.CLIENT = true;
-        window.process.env.LOGIN_ENABLED = ${process.env.LOGIN_ENABLED === 'false' ? false : true};
-        window.process.env.EXAMPLES_ENABLED = ${process.env.EXAMPLES_ENABLED === 'false' ? false : true};
-        window.process.env.UI_ACCESS_TOKEN_ENABLED = ${process.env.UI_ACCESS_TOKEN_ENABLED === 'false' ? false : true};
-        window.process.env.UI_COLLECTIONS_ENABLED = ${process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true};
-        window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined};
-        window.process.env.TRANSLATIONS_ENABLED = ${process.env.TRANSLATIONS_ENABLED === 'true' ? true : false}; 
+        window.process.env.LOGIN_ENABLED = ${
+          process.env.LOGIN_ENABLED !== 'false'
+        };
+        window.process.env.EXAMPLES_ENABLED = ${
+          process.env.EXAMPLES_ENABLED !== 'false'
+        };
+        window.process.env.UI_ACCESS_TOKEN_ENABLED = ${
+          process.env.UI_ACCESS_TOKEN_ENABLED !== 'false'
+        };
+        window.process.env.UI_COLLECTIONS_ENABLED = ${
+          process.env.UI_COLLECTIONS_ENABLED !== 'false'
+        };
+        window.process.env.UPLOAD_LIMIT = ${
+          process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined
+        };
+        window.process.env.TRANSLATIONS_ENABLED = ${
+          process.env.TRANSLATIONS_ENABLED === 'true'
+        }; 
         window.process.env.PREVIEW_URL = '${process.env.PREVIEW_URL}';
         window.process.env.GA_MEASUREMENT_ID='${process.env.GA_MEASUREMENT_ID}';
       </script>
     </head>
     <body>
       <div id="root" class="root-app">
       </div>
-      <script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/app.js']}` : '/app.js'}'></script>
+      <script src='${
+        process.env.NODE_ENV === 'production'
+          ? `${assetsManifest['/app.js']}`
+          : '/app.js'
+      }'></script>
     </body>
   </html>
   `;
@@ -102,12 +157,12 @@ export function renderProjectIndex(username, projectName) {
  * @param {import('express').e.Response} res
  * @param {boolean} [exists]
  */
-export default async function sendHtml(req, res, exists = true) {
+export async function sendHtml(req: Request, res: Response, exists = true) {
   if (!exists) {
     res.status(404);
     const html = await get404Sketch();
     res.send(html);
   } else {
     res.send(renderIndex());
   }
-};
+}

server/views/previewIndex.js → server/views/previewIndex.ts

@@ -1,4 +1,4 @@
-function renderPreviewIndex() {
+export function renderPreviewIndex() {
   const assetsManifest =
     process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
   return `
@@ -34,5 +34,3 @@ function renderPreviewIndex() {
     </html>
   `;
 }
-
-export default renderPreviewIndex;

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "files": [],
   "references": [
-    { "path": "client" },
-    // { "path": "server" }
+    { "path": "./client" },
+    { "path": "./server" }
   ],
 }

webpack/config.dev.js

@@ -30,7 +30,7 @@ module.exports = {
   },
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
-    modules: ['client', 'node_modules'],
+    modules: ['client', 'server', 'node_modules'],
     fallback: {
       os: require.resolve('os-browserify/browser')
     }

webpack/config.examples.js

@@ -16,7 +16,7 @@ module.exports = [
 
     resolve: {
       extensions: ['*', '.js', '.jsx', '.ts', '.tsx'],
-      modules: ['client', 'node_modules']
+      modules: ['server', 'client', 'node_modules']
     },
 
     module: {
@@ -46,7 +46,7 @@ module.exports = [
 
     resolve: {
       extensions: ['*', '.js', '.jsx', '.ts', '.tsx'],
-      modules: ['client', 'node_modules']
+      modules: ['server', 'client', 'node_modules']
     },
 
     module: {
@@ -76,7 +76,7 @@ module.exports = [
 
     resolve: {
       extensions: ['*', '.js', '.jsx', '.ts', '.tsx'],
-      modules: ['client', 'node_modules']
+      modules: ['server', 'client', 'node_modules']
     },
 
     module: {

webpack/config.prod.js

@@ -36,7 +36,7 @@ module.exports = {
 
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
-    modules: ['client', 'node_modules'],
+    modules: ['client', 'server', 'node_modules'],
     fallback: {
       os: require.resolve('os-browserify/browser')
     }

webpack/config.server.js

@@ -29,7 +29,7 @@ module.exports = {
 
   resolve: {
     extensions: ['*', '.js', '.jsx', '.ts', '.tsx'],
-    modules: ['client', 'node_modules']
+    modules: ['server', 'client', 'node_modules']
   },
 
   module: {