Environment setup

Let's now set up a development environment so we can start working on the case study project.

Development environment

To develop a full-stack web app with a database, testing and so on, there's quite a bit of software required; everything from Node.js to MongoDB, to Chrome and so on.

To save you having to install and configure some of it, and to ensure you're using all the versions of the software that I am, we're going to use a Vagrant virtual development environment for this course.

If you haven't used Vagrant before, it's software that allows you to host a virtual development environment on your computer that is completely isolated from the rest of your system.

Vagrant

I'm not going to give you an introduction to Vagrant here, nor am I going to give you any instructions on how to install it, as it's quite specific to your particular system.

So what I've done instead is put links above the video where you can find a getting started guide and installation guide for Vagrant.

If you need to install or learn about Vagrant, go ahead and pause the video and do that before you continue here.

Git server

All the source code for this course is hosted on a private server that I've given you access to when you enrolled.

The link to the server is above this video. So go ahead and open that up and log in.

If for some reason you don't have access to it you'll need to get in touch and sort that out before continuing.

For this course, you'll have access to two projects. The first one is PrintBay, which is the source code for the case study app that we'll be building, and we'll discuss that more in the next video.

The other project is PrintBay Vagrant which is the development environment configuration that we need right now. So let's go ahead and click on that project.

Installing Vagrant config

The installation instructions are all here in the project readme file, but I'll quickly demonstrate what to do.

Firstly, click the Clone button and copy the appropriate URL.

Now, come to the terminal, and change to the directory where you'd like to put your project code. For me, that's in the Workspaces directory.

Now, type git clone and then paste in the URL and press enter.

$ git clone [email protected]:vue.js-professional/printbay-vagrant.git

Once that finishes cloning, you'll have a new directory called printbay-vagrant. So go ahead and change into that directory.

Let's now list the contents of this directory, and you'll see there are two sub-directories here, data and vagrant.

We'll talk about the data directory later. For now, let's go ahead and change into the vagrant directory where the Vagrantfile is located. We can now create our virtual environment by typing vagrant up.

$ cd printbay-vagrant
$ ls -la
$ cd vagrant
$ vagrant up

This command is going to download the Vagrant box, if necessary, and provision the virtual environment.

This may take 30 mins or more, so you might want to pause the video while that completes.

Entering Vagrant environment

Once the vagrant up command has completed, we can now log into the Vagrant box by typing:

$ vagrant ssh

Once you've SSH'd into the box, you can change into the app directory. Currently, this will be empty, but in the next video, we'll be installing the app source code on your computer, and it will then appear right here in this directory.