Installing Magento 2 on Red Hat Openshift

Openshift is brilliant. Mostly because it’s free, but also for it’s more advanced features like being able to deploy your website simply pushing your master branch from git.

Red hat Openshift

Getting back to it being free, there are obviously limitations in the scope of the gears (I think of gears as servers). In trying to setup Magento 2 I came up to those limitations. According to How to Install Magento 2 on Openshift;

  • Magento 2 requires PHP 5.5+ and OpenShift currently has official cartridges of up to PHP 5.4
  • Magento 2 requires shit loads of space, and OpenShift free gears are limited to 1GB
  • Magento 2 requires MySQL 5.6+ and OpenShift currently supports up to MySQL 5.5 official cartridges

After following this excellent set of instructions, we managed to launch a full fledged Magento 2 store, hosted for free here. All you’ll need is a free openshift account, and the OpenShift Client Tools.


# Create a new OpenShift app with NGINX as web server
# Replace "123" by your actual api key & secrets and
# $myapp with your preferred app name.

# Write down the “Git Remote” ssh url that will be shown once the command finishes.
rhc create-app $myapp http://cartreflect-claytondev.rhcloud.com/github/boekkooi/openshift-cartridge-nginx API_KEY=123 API_SECRET=123

# Install PHP 5.6 cartridge into the app
rhc cartridge add -a $myapp http://cartreflect-claytondev.rhcloud.com/github/boekkooi/openshift-cartridge-php

# Install mysql-5.5 cartridge into the app
rhc cartridge add -a $myapp mysql-5.5

# Clone our repository and push it to your app, we will take care of everything for you.
git clone https://github.com/javilumbrales/magento2-openshift
cd magento2-openshift

# Remember to replace $myapp by your app’s name and YOUR_GIT_REMOTE by your actual repository url, the one that you got when you created the app (ie. should be something like ssh://*******@magento2-mage2.rhcloud.com/~/git/yourappname.git/)
git remote add $myapp YOUR_GIT_REMOTE
git push $myapp master -f

Progressive Web Apps

The first week of my new job has been interesting. This is a smart group of people who are engineering some very high end eCommerce websites for big clients like Coopers Beer & Haighs Chocolate.

One of the things I’ve been working on recently is the idea of creating enhanced front ends for exiting systems like WordPress or Magento. I’m thinking about Single Page App using React or something similar to connect to a RESTful API provided by the system being enhanced. The idea is to leave the older display layers in place for the search engines to index but then adding an uber-display layer on top for users whom it suits.

What I’ve learned here at Aligent is that this is already an idea which is quickly taking shape in the ever speedy world of web development. There are a few concepts I hadn’t thought of, but essentially what I had in mind was a Progressive Web App. I’m on it.

This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.

A Progressive Web App is:

  • Progressive – Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
  • Responsive – Fits any form factor: desktop, mobile, tablet, or whatever is next.
  • Connectivity independent – Enhanced with service workers to work offline or on low-quality networks.
  • App-like – Feels like an app to the user with app-style interactions and navigation because it’s built on the app shell model.
  • Fresh – Always up-to-date thanks to the service worker update process.
  • Safe – Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
  • Discoverable – Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
  • Re-engageable – Makes re-engagement easy through features like push notifications.
  • Installable – Allows users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  • Linkable – Easily share via URL, does not require complex installation.

Use Terminal to create symbolic links to your themes on your local drive

The Question?

Let’s say you have 2 WordPress sites running different databases and you want to see how your new theme looks on both of those websites at the same time, how would you do that?

An Answer

You want to be able to edit one theme and see that theme update on two different WordPress instances on your local mac so one way to do that is to create a symbolic link to the working theme in /wp-content/themes/<your-theme->name>

This means that when the apache (or whichever server you are using) looks for the theme, it finds it.

This assumes

  • You’re on mac
  • You can open the terminal and do basic cut & paste.

The Method

  1. Open Terminal.
    type terminal into spotlight
  2. Open TextEdit
    type textedit into spotlight
  3. Cut and paste the following into a blank TextEdit document
  4. The basic format for the linux operation we’re going to perform is this
    ln -s /path/to/original/ /path/to/link

    or a more real example might be this. Let’s say you have a working directory called node

    ln -s ~/node/{path-to-your-dev-theme}/wp-content/themes/listingslab/ ~/node/{path-to-your-second-site}/wp-content/themes/listingslab/
    The ln command is a standard Unix command utility used to create a hard link or a symbolic link (symlink) to an existing file. The use of a hard link allows multiple filenames to be associated with the same file since a hard link points to the inode of a given file, the data of which is stored on disk. On the other hand, symbolic links are special files that refer to other files by name.
  5. Copy & paste the above command snippet into your TextEdit window, replacing the paths {path-to-…} with more sensible ones of your own. Do this in text edit because you want to make sure it’s perfect before you Cut & paste the command into Terminal. You can find the path to a folder easily by dropping it into a terminal window.
  6. Once you’re happy that the command should do what you want it to, cut and paste it into the Terminal window to create the symlink.
  7. Look in finder to see if your symlink has been created.
  8. Test your second website administering the theme and checking the dev theme shows up.

Webpack

We’ve plenty of experience using webpack module bundler version 1 & 2 for around a year to handle the tooling around hot module replacement development and transpiling our react apps into build versions.

What is webpack?

webpack is a module bundler for modern JavaScript applications. It is incredibly configurable, however, there are Four Core Concepts we feel you should understand.

Entry

webpack creates a graph of all of your application’s dependencies. The starting point of this graph is known as an entry point. The entry point tells webpack where to start and follows the graph of dependencies to know what to bundle. You can think of your application’s entry point as the contextual root or the first file to kick off your app.

In webpack we define entry points using the entry property in our webpack configuration object.

The simplest example is seen below:

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

There are multiple ways to declare your entry property that are specific to your application’s needs.