Deploying Multikanban

Deploy time? Great! That means we are ready to release the first version of our app. In my case, Multikanban. These are the steps I followed to deploy my app into my production server. The purpose of this post is mostly to document how I did it in case I have to do it again.

The database

Yikes. Let’s start installing MySQL in our server, as well as the client and the php5 library.

Sudo apt-get install mysql-server mysql-client php5-mysql

We will need to set a password for the root, this password is the one that we will have to add into our Silex Application configuration.

We then create our database with:

Create database multikanban;

At this point, we can use Sequel Pro to export our schema from the local database, make sure to tick off the “content”, as we want to start from 0. To proceed, we can use Sequel Pro to connect to our server database and importing the schema there.

Here, I had to make a change. I needed to define all the table names in lower case. Apparently, my local setup wasn’t case sensitive.

API

Fortunately, all the tools we used during the development of Multikanban make it very easy to deploy into production.

First, we go to where we want to host our project:

cd /var/www

And then clone our API repository:

git clone https://github.com/mezod/multikanban-api

This will create a /multikanban-api with a copy of our project.

We now need to install all the dependencies. Let’s use Composer to help us get this job done.

To install composer:

curl -sS https://getcomposer.org/installer | php

Then we just install all the dependencies with

php composer.phar install

Now that we are all set, let’s not forget to update the root password for the database of our Application config in Application.php.

Few words on vhosts

We initially defined an vhost for http://api.multikanban.com. However, this puts the api in a different subdomain than the app, thus requiring of CORS. As we want to avoid that, we’ll see how we just move the api as part of our app hierarchy.

This is still a good read though:

http://silex.sensiolabs.org/doc/web_servers.html

The js app

We will start cloning our Marionette application into our server:

cd /var/www
git clone https://github.com/mezod/multikanban

Then we simply:

  
npm install  
npm install –g bower  
bower install

We did install everything, but apparently nothing works. Before we start breaking everything around us, let’s just fix a couple of things.

First, and to make it simple for us, let’s just move the api project into the app/ folder of our Marionette app project, so that we can use relative paths and we don’t need CORS.

mv multikanban-api  multikanban/app

Now, let’s just update the paths in the index.html and entities that have paths defined. But wait! Let’s make things right, let’s have a production branch of our project where we update these paths.

In our local machine:

git checkout –b production

Now, we can do all the modifications we want.

When we are done we just pull from this branch from the server

git pull origin production

To be clear, I made a "production" branch to edit all the files whose paths change when in production. Now I got master and production. They have the same code except for the path changes, the idea is that I keep doing changes in master and then merge them into production, so that I can pull production from the server without having to change the paths every time.

We still have an issue though, we need to define a baseUrl in the RequireJS for this not to crash.

Just add

baseUrl: ‘scripts’ 

in the main.js.

Finally, we want to use the dist files we created. The minified versions of our .css and .js. To avoid all the problems with relative paths, we will just define that we want main.min.css to be in the same folder as our styles.css in Gruntfile. Similarly, we will define Gruntfile to output our main.min.js in the same folder as main.js.

Our app should be working now!

Domain name

So, after pointing the domain name to our ip, we need to define the vhost in our Apache configuration.

First let’s make sure that mod_rewrite is available.
Then in sites-enabled lets create an vhost called ‘multikanban’. The file should look like:

      <VirtualHost *:80>  
        ServerAdmin mezood@gmail.com
        ServerName  multikanban.com
        ServerAlias www.multikanban.com
        DocumentRoot /var/www/multikanban/app/
      </VirtualHost>

Restart Apache:

sudo /etc/init.d/apache2 restart

and voilà.

comments powered by Disqus