Versions Compared

Old Version 91

changes.mady.by.user Jay Hodgson

Saved on

compared with

New Version 92

changes.mady.by.user Nick Grosenbacher

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Updated Sass instructions to reflect addition of node

Table of Contents
minLevel3

...

  1. Create a GitHub user account if you don't already have one.
    1. Contributors should fork the repository and submit GitHub Pull Requests for code inclusion.

  2. Set up Git: https://help.github.com/articles/set-up-git, and install git-secrets.

  3. Fork the Sage-Bionetworks SynapseWebClient repository into your own GitHub account: https://help.github.com/articles/fork-a-repo

  4. Clone the SynapseWebClient project down to your computer: 
    git clone https://github.com/[YOUR GITHUB NAME]/SynapseWebClient.git
  5. Change into the proper directory: 
    cd SynapseWebClient
  6. Set up the pre-commit hook to detect secrets (do this for all repos that you clone in the future!):
    git secrets --install
    git secrets --register-aws
  7. Set up upstream with: git 
    git remote add upstream https://github.com/Sage-Bionetworks/SynapseWebClient
  8. Fetch and merge changes from the Sage Bionetworks repo, which was named upstream: 
    git fetch upstream
  9. Configure settings.xml –- its a configuration file for running maven
    1. The file needs to placed in $HOME/.m2/settings.xml (e.g. jane/.m2/settings.xml)

    2. This should be the content of this file:

      Code Block
      languagexml
      titlesettings.xml
      <settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0
                      http://maven.apache.org/xsd/settings-1.0.0.xsd">
  <localRepository/>
  <interactiveMode/>
  <usePluginRegistry/>
  <offline/>
  <pluginGroups/>
  <servers/>
  <mirrors/>
  <proxies/>
  <profiles>
    <profile>
      <id>dev-environment</id>
      <activation>
        <activeByDefault>true</activeByDefault>
      </activation>
      <properties>
		<org.sagebionetworks.portal.endpoint>http://127.0.0.1:8888/Portal.html</org.sagebionetworks.portal.endpoint>
        <org.sagebionetworks.repositoryservice.endpoint>https://repo-prod.prod.sagebase.org/repo/v1</org.sagebionetworks.repositoryservice.endpoint>
        <!-- insert properties described below here -->
        <!-- <org.sagebionetworks.repositoryservice.endpoint>https://repo-staging.prod.sagebase.org/repo/v1</org.sagebionetworks.repositoryservice.endpoint> -->
      </properties>
    </profile>
  </profiles>
  <activeProfiles/>
</settings>


...

  1. Install the latest Eclipse (for Java Development)
  2. Install the Google Plug-in for Eclipse.  Do not include GWT SDK in the install (GWT SDK will be installed by the maven install).  Do not install the Google App Engine Maven Integration.
  3. Import the project as a maven project
    1. File → Import → Maven → Existing Maven Projects
    2. Next, in Root Directory enter the local path to your repository clone
    3. Next, Finish 
  4. You need to make sure the GWT xml files are on the classpath. All of these resources can be found in src/main/resources and src/test/resources directories. 
    1. Right-click on portal (project name) → Build Path → Configure Build Path...
    2. Remove the "Exclude" filter from the source tab on the src/main/resources and src/test/resources directories.
  5. We need to tell the GWT Eclipse-plugin that this is a GWT project. Do this by Right-Clicking on the project in the package explorer and select: Google → Web Toolkit Settings...
    1. From the resulting dialog make sure the "Use Google Web Toolkit" check box is selected.
    2. Also make sure you are using the GWT SDK from your local maven repository (.m2/repository/com/google/gwt)
  6. Verify GWT can compile your code
    1. Right-Click on the project from the package explorer.
    2. Select Google→GWT Compile...
    3. Under the "Entry Point Modules" you should see "PortalDebug - org.sagebionetworks.web",  if not, then add it with the add button.
    4. Remove the "Portal - org.sagebionetworks.web" entry.
    5. The first time you run this you will be asked to select the output directory where GWT will compile the code. You want this to match the Maven WAR output directory, so use "target/portal-<VERSION>-SNAPSHOT"
    6. If you get compilation errors from the JavaScript validator (i.e. NullPointerException), navigate to the project's properties → JavaScript → Include Path → Source, and exclude all files from the source. If an OutOfMemoryError was thrown while compiling, you can click the "Advanced" tab towards the bottom of the Google → GWT Compile window and add "-Xms512M -Xmx1524M" to the VM arguments to increase heap space.
  7. SWC uses Sass , in order to automatically transpile to css in Eclipse (this is done automatically by maven) we need to Sass. SCSS compilation is done by Maven during the compile step. To do this automatically in Eclipse (without compiling the entire app), we can add a custom builder:
    1. Install sass: https://sass-lang.com/install
    2. Open the project properties and navigate to Builders
    3. Create a new (Program) Builder, using the installed sass location as the Location value (e.g. /usr/local/bin/sass)
      1. Set the Location value to the installed node binary: ${workspace_loc:/portal/node/node}
      2. Set the Working directory to the SWC project (e.g. ${workspace_loc:/portal})

      3. Set the following arguments:

        Code Block
        ${workspace_loc:/portal/node/yarn/dist/bin/yarn.js}
sass
--no-source-map
--style=compressed
--unicode
--stop-on-error
--update 
--load-path=.
src/main/webapp/sass:target/portal-develop-SNAPSHOT


    4. Under Build Options - Allocate Console, Launch in background, and run this builder during all operations listed.
  8. If the GWT Compile successfully compiled, then you're ready to run the application.
    1. Right-Click on the project in the package explorer
    2. Select: Run As → GWT Development Mode with Jetty, and select Portal.html
    3. Double-click on the link provided in the Development Mode window to view the portal in your browser. 
  9. To run the unit tests:
    1. Right-Click on the project from the package explorer.
    2. Select: Run As → JUnit Test

...

Cross-browser testing

We have a shared account to use BrowserStack to test the website for cross browser compatibility issues.
Alternatively, for testing IE on Mac I use VirtualBox with an image provided by Microsoft from modern.IE.  For this to work, in your Windows VM, you will need to map an ip to outer in order to access your local machine (note, Windows UAC requires you to do this as an admin).

...

Set the repository endpoint parameters in your maven settings.xml file. 

To point to staging set:

<org.sagebionetworks.repositoryservice.endpoint>https://repo-staging.prod.sagebase.org/repo/v1</org.sagebionetworks.repositoryservice.endpoint>

To point to production set:

...