SBOLCanvas is a web application for creation and editing of genetic constructs using the SBOL data and visual standard. SBOLCanvas allows a user to create a genetic design from start to finish, with the option to incorporate existing SBOL data from a SynBioHub repository. SBOLCanvas is created as part of SynBioKS.
This branch is specifically for SBOLCanvas as embedded in the SynBioSuite app; however, it can still function as a standalone application.
This is a monorepo containing an Angular app as a frontend (in the frontend directory) and a Dockerized Java API (in the backend directory) that handles things like conversion, communication with SynBioHub, etc.
This differs from the final branch, which Dockerizes the frontend and backend together, and serves the Angular app from the backend.
The changes made were an optimization to allow the API to be deployed serverlessly and the frontend to be deployed as a static web app served from CDNs.
Clone the project
git clone -b synbio-suite https://github.com/SynBioDex/SBOLCanvas
Go to the backend directory
cd SBOLCanvas/SBOLCanvasBackend
Ensure you have nodemon installed
npm install -g nodemon
Run nodemon to build and run the backend in a container
npx nodemon
Go to the frontend directory
cd ../SBOLCanvas/SBOLCanvasFrontend
Install dependencies
npm install
Start the Angular development server (ensure your node version < 14)
npm run dev
To build the frontend, from the frontend directory, run
npm run build
The built output will be available in frontend/dist and can be deployed anywhere a static web app can be deployed. Genetic Logic Lab's weapon of choice is Azure Static Web Apps.
To build the backend, from the backend directory, run
docker build -t sbolcanvas .
The resulting Docker image can be deployed anywhere you can run Docker containers. Genetic Logic Lab uses Azure Container Apps.