Building the administration interface frontend application

The administration interface of Sulu is implemented as a single page application using React. The code of this application is built using webpack and stored in the public/build/admin directory of the project. If you update your Sulu version or add custom Javascript code to your project, you need to update the build in the public/build/admin directory. There are different ways to do this:

Solution 2: Build manually with docker

  1. Start a node container with the desired version and map the the current directory into the /var/project folder in the container
docker run --rm --interactive --tty --volume ${PWD}:/var/project node:14.16.0 /bin/bash

# for completion: using another node version is possible by adjusting the tag of the node image
# docker run --rm --interactive --tty --volume ${PWD}:/var/project node:12.21.0 /bin/bash
  1. Cleanup previously created node_modules folders and package-lock.json files
cd /var/project
rm -rf assets/admin/node_modules && rm -rf vendor/sulu/sulu/node_modules && rm -rf vendor/sulu/sulu/src/Sulu/Bundle/*/Resources/js/node_modules
rm -rf assets/admin/package-lock.json && rm -rf vendor/sulu/sulu/package-lock.json && rm -rf vendor/sulu/sulu/src/Sulu/Bundle/*/Resources/js/package-lock.json
  1. Create the administration interface build
cd /var/project/assets/admin
npm install
npm run build

Solution 3: Build manually locally

  1. Install Node

If not yet installed on your computer you would need to install node on your computer.

  1. Cleanup previously created node_modules folders and package-lock.json files
cd /var/project
rm -rf assets/admin/node_modules && rm -rf vendor/sulu/sulu/node_modules && rm -rf vendor/sulu/sulu/src/Sulu/Bundle/*/Resources/js/node_modules
rm -rf assets/admin/package-lock.json && rm -rf vendor/sulu/sulu/package-lock.json && rm -rf vendor/sulu/sulu/src/Sulu/Bundle/*/Resources/js/package-lock.json
  1. Create the administration interface build
cd /var/project/assets/admin
npm install
npm run build