J4.x:Setting Up Your Local Environment
From Joomla! Documentation
With Joomla 4 we have changed the development process, it is not longer possible to clone the repository and have a usable Joomla installation. We follow here best practices and have implemented a build process for the CMS.
Quick start guide
What you have to do to setup you dev environment depends on your operating system. We can not write documentation for any OS so you should answer your favorite search engine to find a HowTo.
Tools you need
- PHP - basically the same as you need for running a Joomla Site, but you need the cli (command line interface) Version (see https://docs.joomla.org/Configuring_a_LAMPP_server_for_PHP_development)
- Composer - for managing Joomla's PHP Dependencies - for help installation composer read the documentation at https://getcomposer.org/doc/00-intro.md
- Node.js - for compiling Joomla's JS and SASS files - for help installing Node.js please follow the instructions available on https://nodejs.org/en/
- Git - for version management
Steps to setup the local environment
- Clone the repository
- run "composer install" from the root of the git repo
- run "npm install" from the root of the git repo
The a bit longer start guide
Joomla is not different to many other web tools these days. It has a large PHP part and it has more and more javascript code. While PHP coding doesn't need so much preparations javascript needs a lot tooling around. Main reason is that nobody writes code in a way that any browser understand the code, so the code need transscripting from e.g. ES6 to a native version of javascript. The same is true for CSS, for Joomla we are using SASS and this will be converted to native CSS so that any browser understands it. As downside setting up a dev environment is a bit more complicated but the tooling make coding also more convenient. Thanks to watchers and browser auto reload you can see your change in real time.
PHP
It should be enough to run "composer install" this will install PHP dependencies saved in the composer.lock file. You can do this a many time as you like, it will only install new packages when the composer.lock file is changed. Don't run "composer update" this will update all packages to newer versions and update the composer.lock file.
Node/npm scripts
Node.js comes with a package manager called npm (in some way the same as composer). Npm has a run command and we have prepared some scripts to make your life easier. You have to run the commands for the root of the repository.
npm run build:css
It will compile SASS files to CSS and also create the minified files
npm run build:js
It will compile the javascript files to an for all browsers understandable format and also created the minified files.
npm run watch:css
This will watch SASS files and compile the css files when a SASS files is changed.
npm run watch:js
This will watch javascript files and compile when needed
npm run lint:js
This will make a syntax check on javascript files
npm run test
This will run other javascript testing suite