modifying-dspace7-front-page

Modifying the Frontpage User Interface in DSpace 7.6

Important Note:

Simply changing the configurations (e.g. /home/library/dspace-ui/config/config.production.yaml) do not require a rebuild, but only require restarting the UI.

**Example: **

library@localhost$pm2 restart /home/library/dspace-ui.json (or)

library@localhost$pm2 restart dspace-ui.json (from the $HOME directory)

But in order to modify the UI (especially front page of DSpace 7.6), you need to rebuild the UI application.

1. Compiling the Frontend source code in DSpace 7.6

• To modify the front page in DSpace 7.6, you need the fully compiled source code which can be downloaded from

https://sourceforge.net/projects/kohaliveiso/files/dspace-7.6-source/dspace-7.6-frontend.zip/download

• Download and Save the above file under /home/library/ directory
  
  
• Extract the zip file using 'unzip' command

** $unzip dspace-7.6.frontend-source.zip
**
* The extracted files should be available under '/home/library/dspace-7.6.frontend/' directory

** $cd /home/library/dspace-7.6.frontend/
**
First, update the yarn packages to the latest version

** $yarn install
**
* Then simply try to compile the 'UI' without any modifications using the command (This is just to ensure if the code compiles properly)

** $yarn build:prod
**
* The compilation might take few minutes (approximately it took 10 minutes for me) building the 'browser' and 'server' packages.


* The compiled files will be under '/home/library/dspace-7.6.frontend/dist/' directory (without any changes in the UI)

2. Modifying the Front page in DSpace 7.6

• The HTML/CSS files for modifying the DSpace 7.6 Front page will be under

** /home/library/dspace-7.6.frontend/src/themes/dspace/app/home-page/home-news/

File to modify: home-news.component.html** (modify this file according to your need)

• The Image files if any, should be placed under

** /home/library/dspace-7.6.frontend/src/themes/dspace/assets/images/

3. Compile/Build the DSpace UI**

---

** $cd /home/library/dspace-7.6.frontend/
**
* Compile the Source code using

** $yarn build:prod

* After the compilation, the compiled files will be under ** '/home/library/dspace-7.6.frontend/dist/' directory


* Stop the DSpace 7.6 UI (if it is already running)
** library@localhost$pm2 stop /home/library/dspace-ui.json


* Remove the 'old' files from '/home/library/dspace-ui/dist/' directory
** library@localhost$rm -rf /home/library/dspace-ui/dist/*


* Copy the newly compiled files from '/home/library/dspace-7.6.frontend/dist/' to '/home/library/dspace-ui/dist/' directory
** library@localhost$cp -r /home/library/dspace-7.6.frontend/dist/* /home/library/dspace-ui/dist/
**

4. Restart the DSpace-UI using PM2 Process Manager

** library@localhost$pm2 start /home/library/dspace-ui.json (or)
** library@localhost$pm2 start dspace-ui.json (from the $HOME directory) **

• Now browse the modified frontpage by visiting http://localhost:4000/home

The new front page should be looking something like this

• If there is any issue in the 'UI', Repeat the steps from '2. Modifying the Front page in DSpace 7.6'