---
# System prepended metadata

title: Wormhole React Migration

---

# Wormhole React Migration

## Context

- Backstage doesn't support [SemVer](https://backstage.io/docs/overview/versioning-policy)
- At the time of this writing, many backstage dependencies are versions less than 1.0, which generally means in the community that they're unstable
- Backstage advises [upgrading all dependencies](https://backstage.io/docs/getting-started/keeping-backstage-updated) at once so as maintain the dependencies that they have between each other
- Despite being extremely useful, Backstage requires more developers to learn and know Backstage before being able to contribute
- Utilizes a separate repository [wormhole-data](https://github.com/AudaxHealthInc/wormhole-data) to process the data for [Backstage's Catalog Component](https://backstage.io/docs/features/software-catalog/software-catalog-overview)
- Some Backstage dependencies have security vulnerabilities (as detected by Rally Snyk)

## Decision

Rebuild [Wormhole](https://wormhole.werally.in/) from the ground up in a new repository using [React](https://reactjs.org) instead of [Backstage](https://backstage.io/), which will provide us with the following benefits:

- Utilizing a new repositories, as opposed to repurposing an older repository, guarantees that the libraries are up-to-date 
- Allows for other teams and developers to contribute without knowing Backstage 
- Allows for dependency upgrades without relying on Backstage 
- Can reuse a great deal of the frontend/backend code, granted we find the equivalent counterparts 

### Frontend

The new frontend of Wormhole will be based on [NodeJS](https://nodejs.org/en/about/) using the following technologies: 

- [React](https://reactjs.org) - Easy creation of multiple templated pages and components
- [React Router](https://reactrouter.com/) - Routing
- [Redux Toolkit](https://redux-toolkit.js.org/) - State Management
    - [React's useReducer with RTK](https://www.valentinog.com/blog/use-reducer/)
- [Material UI](https://mui.com/) - Components, [pagination](https://mui.com/material-ui/react-pagination/), breadcrumbs, filtering, etc.
- [npm](https://www.npmjs.com/) - Package Management
- [DataDog](https://www.datadoghq.com/) - User Analytics
- [Jest](https://jestjs.io/) - Component Testing

### Backend

In addition to housing the new frontend, the backend APIs will also live in the same repository, which will also be based on [NodeJS](https://nodejs.org/en/about/) use the following technologies:

- [ExpressJS](http://expressjs.com/) - Server and API development
- [Jest](https://jestjs.io/) - API Test Suite
- [supertest](https://www.npmjs.com/package/supertest) - API Testing
- [DataDog](https://www.datadoghq.com/) - API Analytics


### Data Migration

The existing data in [wormhole-data](https://github.com/AudaxHealthInc/wormhole-data) will copied into the new repository and served via the same [backend](#backend) mentioned in the section above. Whether or not this data will be served from a relational database like [Postgres](https://www.postgresql.org/) is up for consideration, but TBD for now.

### Continuous Integration/Deployment

- [GitHub Actions](https://github.com/features/actions) - CI/CD Build Testing and Deployment
- [Neptune](https://github.com/AudaxHealthInc/neptunectl) - Deployment Automation
- [K8s](https://kubernetes.io/) - Containerization and Portability
- [Helm](https://helm.sh/) - K8s Application Management


### Authentication

The new Wormhole will continue to support SSO login via [Okta](https://developer.okta.com/code/nodejs/).


## Consequences

- Allows any Frontend engineer to easily provide feedback and contribute to Wormhole without knowing [Backstage](https://backstage.io/)
- Developers in the company will be familiar with the technologies used
- Two different repos need to be managed until the migration is finished
- Lots of rebuilding and reformatting 
- Will definitely take a long time and multiple sprints 
