REDAXO with Gulp, Browserify, PostCSS and Bimmelbam*
Example of a front-end workflow for developing a REDAXO website. (* stuff)
- A generic frontend workflow that does not necessarily require REDAXO but works in several contexts (static website, different CMS, web app).
- REDAXO and a static front-end prototype share all assets (CSS, JS, media, ...).
- The prototype is used for the complete frontend development. Implementation for REDAXO can be done separately (useful when working in a team).
- Switch between develop and production mode without touching REDAXO, there is no need to modifiy templates or modules.
Components and features
- Yarn as a package manager
- Gulp as a task runner
- Sass and PostCSS for CSS (with Autoprefixer, cssnano and Bimmelbam)
- A customizable Modernizr (because it works)
- Images get minified
- SVGs get combined and injected into the HTML (for icons)
- Bootstrap and Google Material Icons are included as external components (via npm)
- BrowserSync for live reload and for testing on different devices
Not included, but meaningful:
- Linting, so that code meets the requirements.
- Testing, because people are constantly making mistakes.
- Continuous integration (CI) to not always having to assemble the project by hand.
- Deployment and other Bimmelbam (means: stuff)
Install Node (>= 6.9), if not already available. Can be downloaded as a package directly from the website: https://nodejs.org
Install Yarn if not already available (Manual).
Change to our directory in the terminal and fetch the required packages.
Attention, several hundred megabytes of data are coming through the line!
Use Yarn to install Gulp globally, if it is not already installed:
$ yarn global add gulp-cli
Set up a localhost/vhost (for example,
http://local.bimmelbam) for our project that is able to run REDAXO. Target directory of the host is
.envfile (Environment) inside of the project root. Just copy the
.env.exampleincluded in the package and adjust it accordingly:
APP_HOSTcorresponds to the host you have previously set up,
APP_ENVcan remain at
developmentfor the time being.
Start the front-end workflow. After that, our frontend prototype should be accessible via
This project does not contain a REDAXO installation. Once your gulp tasks have completed successfully, you can now manually add REDAXO into the
/app directory. It already contains the common REDAXO folders.
Once your REDAXO is up and running, you can implement the website with templates and modules as usual. Take the HTML from the prototype (adapt file paths as required) and include the same assets. When done, you’ll see a working REDAXO website whose output is identical to the prototype.
If you prefer to develop your frontend within REDAXO from now on, you can discard the prototype. However, the intention of this project is to convince you to develop frontend outside of REDAXO using the prototype. Why? Because it’s more efficient and comfortable, and also because it can be done by fellow workers who concentrate exclusively on frontend development and don’t require REDAXO and PHP experience.
In addition, the workflow is quite generic. So you could use it in the same way for other projects, for example in combination with other CMS, for static websites or for web apps.
To get the site ready for production, turn on
styles.css?v=1335939007, see also this solution for REDAXO).
🐳 for the Backend
The front-end workflow is complete, so we can now optimize the development environment for the backend. For example with Docker, to enable a consistent setup for the team and to be independent of the local system environment of the computer.
In addition to the front-end Bimmelbam, this package also includes a simplified version of the package REDAXO with Docker. The associated files and folders are:
db/ docker/ .dockerignore docker-compose.yml
We use Docker for Bimmelbam to provide a server environment (Apache, PHP, MySQL). That’s pretty handy, because then your computer does not have to be set up for that, and besides, if you work in a team, you all end up with the same server environment, regardless of the operating system you’re using.
20080 for HTTP and
23306 for the database, so as not to conflict with the standard ports
3306, if they are already in use. That makes our setup more robust. If you use several Docker projects, you have to keep in mind that all these ports use and therefore only one can run at a time, not several at the same time.
If Docker is new to you: no problem, there is a Instruction for Beginners (still german only, sorry).
$ docker-compose up -d
Open REDAXO in the browser:
The Docker setup in this package is less comprehensive than the setup in the parent package »REDAXO with Docker«. Here, Docker is only supposed to provide a server environment and does without additional features. These are the differences:
- It does not automatically install a fresh REDAXO.
- It also does not install demo sites.
- It doesn’t include Mailhog to send mails from REDAXO.
- HTTPS/SSL is not configured.
- The volume for the webroot is the folder
app/while in the parent package it’s
If you prefer to work with the large Docker setup here in Bimmelbam, you can easily copy the required files and folders from »REDAXO with Docker«. After that, you only need to change the webroot to
docker-compose.yml. Everything else can be retained and should work seamlessly in Bimmelbam as well.
Further information, configuration and customization
You will find a lot of information in the package REDAXO with Docker, and also concerning these topics:
If you have questions or need help, feel free to contact us in Slack Chat! You will receive an invitation here: https://redaxo.org/slack/