Bugfix: ensure backend api routes are configured and respond to reque…

…st (#30)

.gitignore

@@ -1,10 +1,13 @@
+.DS_STORE
+
 /build
 /node_modules
 /be/.env
 /be/**/logs/*
 be/node_modules/
 fe/node_modules/
 
-# e2e test output
+# e2e test output and artifacts
+cypress/screenshots/
 nohup.out
 /tmp/**/*

be/server.js

@@ -1,10 +1,11 @@
 
 
 import { App } from './app.js';
+import { HealthRoute } from './src/routes/health.routes.js';
 import { UserRoute } from './src/routes/user.routes.js';
 
 // ValidateEnv();
 
-const app = new App([new UserRoute()]);
+const app = new App([new HealthRoute(), new UserRoute()]);
 
-app.listen();
+app.listen();

be/src/routes/health.routes.js

@@ -0,0 +1,29 @@
+// TODO: add swagger docs. get health and E2E test working first.
+
+import { Router } from 'express'
+
+// memoize router so that when the consumers retrieve it through getter,
+// it's not a fresh instance, as that essentially wipes out the routes
+const router = Router()
+
+export class HealthRoute {
+  get path() {
+    return '/health'
+  }
+
+  get router() {
+    return router
+  }
+
+  constructor() {
+    this.initializeRoutes()
+  }
+
+  buildResponse(req, res) {
+    res.status(200).json({ data: { attributes: { healthy: true } } })
+  }
+
+  initializeRoutes() {
+    this.router.get(this.path, this.buildResponse)
+  }
+}

be/src/routes/user.routes.js

@@ -60,12 +60,16 @@
 import { Router } from 'express'
 import { UsersController } from '../controllers/users.controller.js'
 
+// memoize router so that when the consumers retrieve it via getter,
+// it's not a fresh instance, as that essentially wipes out the routes
+const router = Router()
+
 export class UserRoute {
-  static path() {
+  get path() {
     return '/users'
   }
   get router() {
-    return Router()
+    return router
   }
   get user() {
     return new UsersController()

cypress/e2e/home/home.cy.js

@@ -4,7 +4,8 @@ describe('Home Page', () => {
   beforeEach(() => {
     cy.visit(URL)
   })
-  it('renders a main section', () => {
-    cy.get('main').should('exist')
+
+  it('renders a main section that successfully interacts with the API', () => {
+    cy.get('.backend-healthy main').should('exist')
   })
 })

fe/config/application.template.yml

@@ -5,6 +5,7 @@ development:
   PROXIED_API_TOKEN: ''
 
   # === FE ===
+  REACT_APP_API_URL: http://localhost:8080
   API_URL: http://localhost:8080/api/v1
   FE_PORT: 3000
 

fe/src/js/main/index.js

@@ -1,5 +1,14 @@
 import React from 'react'
 import App from './App'
 import ReactDOM from 'react-dom'
+import { api } from '../services/api'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+const root = document.getElementById('root')
+
+api.get('/api/v1/health').then((response) => {
+  if (response.healthy) {
+    root.classList.add('backend-healthy')
+  }
+})
+
+ReactDOM.render(<App />, root)