Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. First, install all the 183076538 listed above.
  2. Download the latest dspace-angular release from the DSpace GitHub repository. You can choose to either download the zip or tar.gz file provided by GitHub, or you can use "git" to checkout the appropriate tag (e.g. dspace-7.0-beta3) or branch.
  3. Install all necessary local dependencies by running the following from within the unzipped "dspace-angular" directory

    Code Block
    # change directory to our repo
    cd dspace-angular
    
    # install the local dependencies
    yarn install


  4. Modify the Frontend configuration to point at your DSpace Backend
    1. By default the Frontend will be configured to use the Demo Backend at https://dspace7.4science.cloud/server/
    2. Modify the "rest" section of the [dspace-angular]/src/environment/environment.common.ts configuration file, pointing it at your installed DSpace Backend.  For example:

      Code Block
      // This example is valid if your Backend is running at http://localhost:8080/server/
      // It should be kept in sync with the value of "dspace.server.url" in the backend local.cfg
      rest: {
         ssl: false,
         host: 'localhost',
         port: 8080,
         // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
         nameSpace: '/server/api'
      }


    3. (If necessary) modify the "ui" section of the [dspace-angular]/src/environment/environment.common.ts configuration file to match the host & port that you plan to run the UI from.  By default, these settings assume you will run the UI from http://localhost:4000/


      Code Block
      // This example is valid if your UI will be running at http://localhost:4000
      // It should be kept in sync with the value of "dspace.ui.url" in the backend local.cfg
      ui: {
         ssl: false,
         host: 'localhost',
         port: 4000,
         // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
         nameSpace: '/'
      }


    4. Alternatively, if you want, you can copy the "environment.common.ts" to a new file called "environment.prod.ts" and modify that new file.
  5. Start the application

    Code Block
    # build and start the application
    yarn start


    1. To stop the application at any time, use Ctrl + C
  6. After a few minutes, the user interface will be running on your local machine. 
    1. Visit http://localhost:4000/
    2. For an example of what the default frontend looks like, visit the Demo Frontend: https://dspace7-demo.atmire.com/

...

  • Verify that the URLs in your Frontend's src/environments/environment.common.ts  EXACTLY MATCH the Backend's local.cfg 
    • Backend's dspace.ui.url MUST reference the same URL as the Frontend's "ui" configuration section.  Modes (http vs https), ports, hostnames AND nameSpace (or path) must all match.
      • Keep in mind if you are using port 80 or port 443, those can be left off the dspace.ui.url configuration, as they are the default ports for HTTP and HTTPS respectively.
    • Backend's dspace.server.url MUST reference the same URL as the Frontend's "rest" configuration section.  Modes (http vs https), ports and hostnames must all match.
      • Keep in mind if you are using port 80 or port 443, those can be left off the dspace.server.url configuration, as they are the default ports for HTTP and HTTPS respectively.Also keep in mind that the "dspace.server.url" configuration should NOT include the "/api" path, whereas the "rest" configuration section MUST include that path (as "/api" is the location of the REST API within the server webapp).
  • If the above all match, you can also double check the CORS (Cross-origin resource sharing) configuration on the Backend to ensure that it includes the Frontend's URL
    • rest.cors.allowed-origins specifies the client URLs which are allowed login access to the Backend. It MUST include the Frontend URL (though by default it does) or else the backend will block all access to the frontend.