This document is intended to streamline the onboarding process by providing key resources and instructions for navigating the Synapse web ecosystem. Feel free to comment and share your feedback on this document to help improve it and make this resource even more helpful!
Getting Started with the Synapse Web Monorepo
The Synapse Web Monorepo is a centralized codebase for projects related to synapse.org. For an overview of the Synapse web ecosystem, visit the Web Engineering - Links document.
Running a portal locally
In your terminal, run the snippet below to start a portal (I’m using the ELITE portal as an example but you can replace elportal below with the name of the portal you wish to run:
pnpm nx run elportal:start --host --port 3001
Note run portals on a port other than 3000 if you want to enable local user authentication (see section below).
How to use Login Authentication Locally with OneSage
In your terminal, run the snippet below to enable user authentication in your local environment:
pnpm nx run SageAccountWeb:start --host --port 3000
Note this has to be on port 3000 to work!
Synapse Web Client (SWC)
The Synapse Web Client is a single-page application that serves as the frontend for accessing Synapse REST services. Visit synapse.org to see the latest SWC release build.
Setting Up a Local Web Client
Refer to this document.
Testing Synapse React Client (SRC) in Synapse Web Client (SWC)
Make your changes in SRC
Build UMD files for SRC using pnpm build:umd
Go to https://www.synapse.org in Chrome and open the Developer Tools
Locate the synapse-react-client.production.min.js file in the Network tab and right click on the file and select Override Content
Go to the Sources tab in Developer Tools and go to the Overrides section. Make sure Enabled Local Overrides is checked.
right click cdn-www.synapse.org/generated or synapse-react-client.production.min.js and click open folder or containing folder respectively
In your file explore, navigate to packages/synapse-react-client/dist/umd/ and find the updated synapse-react-client.production.min.js file. Drag and drop this file to the generated folder to replace the old synapse-react-client.production.min.js file
Refresh https://www.synapse.org and the site should now be using your override file
Repeat steps for any SRC changes you want to see in https://www.synapse.org
