How to get started with meteor and Reaction Commerce within a vagrant box on MacOS

I will start at the very beginning and setup everything we need first

I want to give everyone a brief start, so if you have one or the other already just skip this part and go over to the more interesting things. I guess the same instructions should also work on any linux or windows system (beside choosing the right installation files…).


What is Reaction Commerce?

Reaction Commerce is an open source ecommerce platform build on top of meteor JavaScript framework. It enables you to have instant updates without page reloads. And surely fits all your needs!


Installing VirtualBox

Go to https://virtualbox.org/wiki/Downloads and choose the right installation file. After downloading just open it and follow the installatioon instructions.

Download VirtualBox and install

Installing Vagrant

Go to https://www.vagrantup.com/downloads.html, download the right installation file, open it and follow the instructions.

Download Vagrant and install

Setting up vagrant and getting Ubuntu Xenial run

Now we are ready to initialize our first vagrant box and getting Ubuntu Xenial running on it. Start a terminal session, create a directory mkdir -p ~/Vagrant/ubuntu-xenial for your box, change into the directory cd ~/Vagrant/ubuntu-xenialand type vagrant init. Now edit the file “Vagrant” to have the following options like this.

#which operating system to load
config.vm.box = "ubuntu/xenial64"
#configure the ram, minimum 2048 MB
config.vm.provider "virtualbox" do |vb|
# # Display the VirtualBox GUI when booting the machine
# vb.gui = true
#
# # Customize the amount of memory on the VM:
vb.memory = "2048"
end

Let’s start now the box with vagrant up, this can last a littel time.

HINT: Beware of the actual kernel bug in Ubuntu Xenial, which could kill your processes. Just have a look at this article.


Fulfill the prerequirements for meteor and Reaction Commerce

In prior to get Reaction Commerce running you have to install nodejs, some build tools and meteor. Login to your newly created box with vagrant sshand do the following steps.

#upate your repodata
sudo apt-get update
#update your system
sudo apt-get -u dist-upgrade
#install the build dependencies
sudo apt-get install -y --no-install-recommends build-essential \ bzip2 curl ca-certificates git graphicsmagick python
#install nodejs 4.x
sudo curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sduo apt-get install -y nodejs
#install meteor to actual user only
curl https://install.meteor.com/ | sh
#update meteor for eventually fixes
meteor update --patch
#install reaction-cli: the installer of Reaction Commerce
sudo npm install -g reaction-cli

Let’s add this to the Vagrantfile for automation purposes.

config.vm.provision “shell”, inline: <<-SHELL
sudo apt-get update
sudo apt-get -u dist-upgrade -y
sudo apt-get install -y --no-install-recommends \
build-essential bzip2 curl ca-certificates git graphicsmagick \
python
sudo curl -sL https://deb.nodesource.com/setup_4.x | sudo -E \
bash -
sudo apt-get install -y nodejs
curl https://install.meteor.com/ | sh
meteor update --patch
sudo npm install -g reaction-cli
SHELL

Now we are ready to get Reaction Commerce up and running!


Getting started with meteor and Reaction

Before we start building reactioncommerce and launch it, I would like to configure a port forwaring for the vagrant box so that we can directly browse to our new created webstore . For this shutdown the box vagrant haltopen the Vagrantfile again and set the following line:

config.vm.network "forwarded_port", guest: 3000, host: 8080

Why doing this? Because Reaction Commerce will get up on the port 3000 and I want it to listen on th eport 8080 on my localhost.

vagrant upyour box, vagrant sshinto it and do the rest of the magic withcd ~/run reaction-cli init, change the directory cd ~/reactionand start reaction reaction run.

cd ~/
reaction init
cd ~/reaction
reaction run

If all goes right, you will shortly see a console output like:

dominik_bittl@ubuntu-xenial:~/reaction$ reaction run

Using settings file at settings/dev.settings.json

Setting up plugin imports...

Setting up style imports...

[[[[[ ~/reaction ]]]]]

=> Started proxy.
=> A patch (Meteor 1.4.2.7) for your current release is available!
Update this project now with 'meteor update --patch'.
=> Started MongoDB.
cfs:gridfs: updating npm dependencies -- mongodb, gridfs-stream...
17:07:11.674Z INFO Reaction: Load default data from /private/data/
17:07:12.982Z INFO Reaction: JobServer started
17:07:12.992Z WARN Reaction: Skipped loading settings from reaction.json.
17:07:22.333Z INFO Reaction: Using meteor --settings to create admin user
17:07:24.977Z WARN Reaction:

*********************************

IMPORTANT! DEFAULT ADMIN INFO

EMAIL/LOGIN: xxxxxxxx@localhost

PASSWORD: xx_XXXXX

*********************************


17:07:25.045Z INFO Reaction: Migrating from version 0 -> 2
17:07:25.046Z INFO Reaction: Running up() on version 1
17:07:25.141Z INFO Reaction: Running up() on version 2
17:07:25.180Z INFO Reaction: Finished migrating.
17:07:25.280Z WARN Reaction: OpenExchangeRates API not configured. Not adding fetchRates job
17:07:25.286Z WARN Reaction: OpenExchangeRates API not configured. Not adding flushRates job
17:07:25.644Z INFO Reaction: Reaction initialization finished.
=> Started your app.

=> App running at: http://localhost:3000/
17:07:54.251Z INFO Reaction: ProductSearch collection (re)built successfully.

Now open your browser and visit http://localhost:8080 and you will see your shop. If you want to get admin on the site login as customer with the credentials of your cosole output.


Setting up Synced Folders

At last we are setting up “Synced Folders”, so you can use your favourite Code-Editor on your local machine and change files without the need to login to your virtual host machine.

Add e.g. the following lines to your vagrant config.

Vagrant.configure(“2”) do |config|
# other config here
config.vm.synced_folder “~/dev/reaction/”, “/home/vagrant/reaction”
end

~/dev/reaction is on your local machine (you can create it with mkdir -p ~/dev/reaction) and it will show the files of the directoy /home/vagrant/reactionof the virtual box.

Conclusion

You can see that it easy and fast to install your first Reaction Commerce shopping site. And overall it is a lot of fun! :-)

One more thing:

You could also package your Vagrant box for reusing it if you want. Mostly I personally like it to get things done fresh, so it is up to you how you like it.

#create the package of your box (I like to version it)
vagrant package — output ubuntu-xenial-reactioncommerce-v1.0.box
#create a place for storing your boxes
mkdir -p ~/Vagrant/boxes
#move your box into that place
mv ubuntu-xenial-reactioncommerce-v1.0.box ~/Vagrant/boxes
#initialize the box when ever you like
vagrant init ubuntu-xenial-reactioncommerce \ file:~/Vagrant/boxes/ubuntu-xenial-reactioncommerce-v1.0.box

Here you can download the Vagrantfile, all packed together and easy to use: https://github.com/domi-nik-/VagrantExample


My setup as writing this article

  • MacBook Pro: Mid 2009 with 8GB RAM
  • MacOS: v10.11.6
  • VirtualBox : v5.1.14
  • Vagrant: v1.9.1