REDAXO front-end with Gulp, Browserify, PostCSS and Bimmelbam (stuff)
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app [ImgBot] optimizes images Oct 2, 2018
db
docker
gulpfile.js
source
.browserslistrc
.dockerignore
.env.example
.gitignore
LICENSE Initial commit Jun 5, 2016
README.de.md
README.md
docker-compose.yml
package.json Cssgrid with support modernizr & Custom-properties fallback with post… Oct 3, 2018
yarn.lock Cssgrid with support modernizr & Custom-properties fallback with post… Oct 3, 2018

README.md

🌎 Deutsch

REDAXO with Gulp, Browserify, PostCSS and Bimmelbam*

Example of a front-end workflow for developing a REDAXO website. (* stuff)

Screenshot

Idea

  • 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

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)

Setup

  1. Install Node (>= 6.9), if not already available. Can be downloaded as a package directly from the website: https://nodejs.org

  2. Install Yarn if not already available (Manual).

  3. Change to our directory in the terminal and fetch the required packages.
    Attention, several hundred megabytes of data are coming through the line!

     $ yarn
    
  4. Use Yarn to install Gulp globally, if it is not already installed:

     $ yarn global add gulp-cli
    
  5. 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 /app!

  6. Create an .env file (Environment) inside of the project root. Just copy the .env.example included in the package and adjust it accordingly: APP_HOST corresponds to the host you have previously set up, APP_ENV can remain at development for the time being.

  7. Start the front-end workflow. After that, our frontend prototype should be accessible via http://localhost:3000/demo/:

     $ gulp
    

Does not work? Sorry :-(
No worries! Join the REDAXO Slack for help or leave a post on the Forum, we’ll try to support you!


Screenshot

What’s next?

REDAXO

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.

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. ✌️

Production

To get the site ready for production, turn on APP_ENV = production and run Gulp. JavaScript and CSS are minimized, source maps are removed and images are compressed. In REDAXO you do not have to modify anything, because all assets keep their paths. However, you should consider a solution to control the caching, such as using timestamp parameters (example: styles.css?v=1335939007, see also this solution for REDAXO).


Docker 🐳 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

👉 If you do not want to run Bimmelbam with Docker, you can simply delete these components if it gets too confusing for you.

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.

Setup

Edit .env file:

APP_HOST=http://localhost:20080

👉 We use port 20080 for HTTP and 23306 for the database, so as not to conflict with the standard ports 80/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.

Usage

If Docker is new to you: no problem, there is a Instruction for Beginners (still german only, sorry). 🚀

Start Docker-Container:

$ docker-compose up -d

Open REDAXO in the browser:

http://localhost:3000

👉 We still use the port 3000 to call in the browser, as defined in Bimmelbam (see config.js). Bimmelbam uses a proxy pointing to port 20080, where Docker provides Apache. Do not let that confuse you.

Differences between this setup and REDAXO with Docker

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:

  1. It does not automatically install a fresh REDAXO.
  2. It also does not install demo sites.
  3. It doesn’t include Mailhog to send mails from REDAXO.
  4. HTTPS/SSL is not configured.
  5. The volume for the webroot is the folder app/ while in the parent package it’s html/.

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 app/ in 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/