...
Java (Corretto JDK 11+ recommended)
Maven 3
DockerYarn
v1pnpm v9
Set up your GitHub fork and a local repository
...
To run the app in development mode, run yarn pnpm install then yarn pnpm dev. This will launch three processes:
...
| Expand | ||
|---|---|---|
| ||
Instead of running |
...
If you have made changes to a JavaScript dependency (e.g. synapse-react-client), you can see those changes in your local development environment by “linking” the projects. As an example, we will link the synapse-react-client project.
In the synapse-react-client directory, run
Code Block yarn linkIn the SynapseWebClient directory, run
Code Block yarnpnpm link ../path/to/synapse-web-monrepo/packages/synapse-react-client
This will create a symlink on your machine so the node_modules/synapse-react-client directory points to your local synapse-react-client directory.
Make desired changes in the synapse-react-client project
Rebuild the JavaScript artifacts for synapse-react-client (in synapse-web-monorepo, run
pnpm nx run synapse-react-client:build)If you’re running
yarn pnpm dev, the changed JavaScript file should automatically be picked up. Refresh your browser window to see the changes (you will likely need to open your browser dev tools → Network → Disable Cache, and leave the browser devtools open)
When you want to unlink synapse-react-client, in the SynapseWebClient directory you can run yarn unlink synapse-react-client and then yarn install --force.
Known issues:
...
pnpm unlink synapse-react-client
...
.
| Note |
|---|
Linking a package updates the lockfile to reference the local repository, so you must unlink the package before you commit changes to the lockfile. |
IDE Setup Instructions
This section contains instructions for setting up various IDEs to develop SynapseWebClient.
...
| Expand | ||
|---|---|---|
| ||
|
Technologies used
There are several technologies that we are currently utilizing in the portal. The following is a list of primers for each:
React and the Synapse React Client
Further reading: How to create and render a React component in SynapseWebClient
For dependency injection, an example of Inversion of Control (IoC), we are using a combination of GIN and Guice.
Guice - is the base IoC technology but it is only fully functional in Server-side.
Gin - provides basic IoC for GWT client-side code.
Guice Servlet - This is a sub-project of Guice that allows dependency inject into servlets.
HTTP REST calls are currently made using Spring's RestTemplate. http://blog.springsource.com/2009/03/27/rest-in-spring-3-resttemplate/
Mockito testing framework - mock dependent classes/interfaces to isolate test. Verify expected interactions (including async calls).
Bootstrap 3 UI framework (including a number of extras widgets), wrapped for GWT (deprecated).
Markdown-it - for markdown processing . Extended the library by adding a number of plugins, available on npm. The Node.js plugin that's used to orchestrate the processing is called markdown-it-synapse. The source code for many of these plugins is in the synapse-web-monorepo project.
AWS js sdk - direct browser upload/download from s3-like storage.
jquery, moment js, font-awesome, mathjax, plot.ly, twitter, nodeca/pica (browser image resize), SparkMD5 (browser side md5 calculation), nchart and jsplumb (Dave's charting libraries for provenance), Google (analytics, search, closure-library, single sign on).
frontend-maven-plugin to install Node and Yarn pnpm at build-time, which provides numerous JavaScript dependencies via NPM.
...