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.

Starting a new job

I’m starting a new job today. I have much and varied experience of starting new jobs. I’ll not lie, I’m 42 years old and I’ve never had a single job that I’ve been in for 12 months.

Don’t judge me. I know it’s not a good look on your CV and all that, but that’s who I am. I’m a kid whose first taste of work was freelancing a website for the local photo printing shop who had noticed me come in with my PhotoShop creations when I was at Newcastle University studying psychology in 1995 (ish). I’ve been a freelancing cut & paste script kiddie ever since. Going with the most interesting and highest paying jobs and standing on the shoulders of giants, a career in front end web development isn’t like the olden days.

Likesay I’ve started many new jobs both good and bad in that time. I hope for a good one this time around. They’re a great company who specialise in ecommerce sites using magento have taken the time to properly recruit a front end developer they feel will be a good fit in their company culture and I’m ready to engage with that. Hi ho.

Magento: eCommerce platforms and solutions for selling online

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.

 

React/Redux

Redux is a tool for managing both data-state and UI-state in JavaScript applications. It’s ideal for Single Page Applications (SPAs) where managing state over time can be complex. It’s also framework-agnostic, so while it was written with React in mind, it can even be used with Angular or a jQuery application.