Vagrant for frontend development

As a frontend developer you’ll often have to set up working environments for the websites you’re working on. It’s not too hard to set up a MAMP stack of Apache,  PHP , MySQL etc on a machine, but sometimes you’ll have different requirements for different projects. For instance one website might require PHP 5.6 on nginx and another 5.3 on Apache.

You could try setting up configurable environments and switch between them, but are you 100% sure that the environment you’re running is identical to the production server it will need to run on when you’ve finished?

What you need is a way of your team to easily create and work on a specifically configured environment that is identical, quick and easy. That’s where vagrant comes in.

Vagrant is a tool for building and managing virtual machine environments in a single workflow. With an easy-to-use workflow and focus on automation, Vagrant lowers development environment setup time, increases production parity, and makes the “works on my machine” excuse a relic of the past.

Who benefits?

  • Developers
    Vagrant will isolate dependencies and their configuration within a single disposable, consistent environment, without sacrificing any of the tools you are used to working with (editors, browsers, debuggers, etc.)
  • DevOps
    Vagrant gives you a disposable environment and consistent workflow for developing and testing infrastructure management scripts. You can quickly test things like shell scripts, Chef cookbooks, Puppet modules, and more using local virtualization such as VirtualBox or VMware.
  • Designers
    Vagrant will automatically set everything up that is required for that web app in order for you to focus on doing what you do best: design.

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

Git

Any Git will do but we use Github.  You can find us  here. Clone some of our code and have a look if you like.

Given the choice we use Git Flow to manage software development flow in a larger team.

What is Git?

Git is by far the most widely used modern version control system in the world today. Git is a mature, actively maintained open source project originally developed in 2005 by Linus Torvalds, the famous creator of the Linux operating system kernel. A staggering number of software projects rely on Git for version control, including commercial projects as well as open source. Developers who have worked with Git are well represented in the pool of available software development talent and it works well on a wide range of operating systems and IDEs (Integrated Development Environments).

Having a distributed architecture, Git is an example of a DVCS (hence Distributed Version Control System). Rather than have only one single place for the full version history of the software as is common in once-popular version control systems like CVS or Subversion (also known as SVN), in Git, every developer’s working copy of the code is also a repository that can contain the full history of all changes.

In addition to being distributed, Git has been designed with performance, security and flexibility in mind.

 

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.