Page History

...

Frontend Installation

1. First, install all the Frontend Requirements listed above & verify the backend/REST API is publicly accessible.
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-beta5) 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. Create a Production Configuration file at [dspace-angular]/src/environment/environment.prod.ts. You may wish to use the environment.template.ts as a starting point. This environment.prod.ts file can be used to override any of the default configurations specified in the environment.common.ts (in that same directory).  At a minimum this file MUST include the "ui" and "rest" sections similar to the following (keep in mind, you only need to include settings that you need to modify): 

   Code Block

   export const environment = {   // This example is valid if your UI will be publicly available at httpshttp://mydspace.edu/ // Keep in mind, this usually should be the PUBLIC URL (it should match the URL you will enter in your browser):4000/ // It should also be kept in sync with the value of "dspace.ui.url" in the backend local.cfg (otherwise the backend may not trust your UI) ui: { ssl: truefalse, host: 'mydspace.edu', port: 4434000, // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript nameSpace: '/' } // This example is valid if your Backend is publicly available at https://api.mydspace.edu/server/ // It should be kept in sync with the value of "dspace.server.url" in the backend's local.cfg  rest: { ssl: true, host: 'api.mydspace.edu', port: 443, // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript nameSpace: '/server' } };

   
   

   1. HINT #1: In the "ui" section above, you may wish to start with "ssl: false" and "port: 4000" just to be certain that everything else is working properly.  With those settings, you can quickly test your UI by running "yarn start" and trying to access it via http://[mydspace.edu]:4000/ from your web browser.  KEEP IN MIND, we highly recommend always using HTTPS for Production.
   2. HINT #2: If Node throws an error saying "listen EADDRNOTAVAIL: address not available", try setting the "host" to 0.0.0.0.  While this isn't your Public URL, it should allow Node to respond on your specified "port" when the the "host" is not recognized.
   3. If there are other settings you know you need to modify in the default environment.common.ts configuration file you can also copy them into this same file.

5. Build the User Interface for Production. This uses your environment.prod.ts and the source code to create a compiled version of the UI in the [dspace-angular]/dist folder

   Code Block
   yarn run build:prod

   
   

   1. Keep in mind, HINT: if you change/update your environment.prod.ts, then you will need to rebuild the UI application (i.e. rerun this command).

6. Assuming you are using PM2, create a JSON configuration file describing how to run our UI application.  This need NOT be in the same directory as the dspace-angular codebase itself (in fact you may want to put the parent directory or another location). Keep in mind the "cwd" setting (on line 5) must be the full path to your [dspace-angular] folder.

   Code Block
   title dspace-angular.json linenumbers true
   { "apps": [ { "name": "dspace-angular", "cwd": "/home/angulardspace/dspace-angular", "script": "yarn", "args": "run serve:ssr", "interpreter": "none" } ] }

   
   

7. Now, start the application using PM2 using the configuration file you created in the previous step

   Code Block
   # In this example, we are assuming the config is named "dspace-angular.json" pm2 start dspace-angular.json # To see stopthe itlogs, you'd run # pm2 stop logs # To stop it, you'd run # pm2 stop dspace-angular.json

   
   

   1. For more PM2 commands see https://pm2.keymetrics.io/docs/usage/quick-start/

   Start the application

   Code Block
   # build and start the application yarn start

   1. To stop the application at any time, use Ctrl + C
8. At this point, the User Interface should be available at the URL you configured in your environment.prod.tsAfter a few minutes, the user interface will be running on your local machine. Visit http://localhost:4000/
   
   1. For an example of what the default frontend looks like, visit the Demo Frontend: https://demo7.dspace.org/ 
9. For HTTPS (port 443) support, you have two options
   1. You can use the HTTPS support built into dspace-angular. 
      1. Create a [dspace-angular]/config/ssl/ folder and add a key.pem and cert.pem. Then update your "port" and "ssl" settings and rebuild (and restart the app in PM2)
   2. Or, you can install either Apache HTTPD or Nginx , configuring SSL at that level, and proxy requests to PM2 (on port 4000)
10. Additional UI configurations are described in the environment.common.ts and at https://github.com/DSpace/dspace-angular/blob/main/docs/Configuration.md  (More documentation will be coming soon)

What Next?

After a successful installation, you may want to take a closer look at

...