Git Workflow - Reflections of a solo developer

I just started using Git in January of this year, I've known about version control and the benefits for several years, but never felt like it would benefit me as a solo developer. How wrong I was.

When I was working full time at an agency I more and more felt the need to be using version control, but I was unable to get everyone else on board due to a number of factors. These included people not wanting to improve or learn, One of the project managers liked to dabble in CSS and would tackle client requests live on the server rather than pass them on to me, and the time taken to learn would reduce time available for client projects.

In January, I decided that I needed to learn Git and took the plunge on a small personal project with which there would be no impact on anyone except myself if mistakes were made. Turns out there were no real issues. 

I've been thinking about writing this post for sometime now. Today on twitter Patrick Pohler mentioned the article he had written, in September, Git workflow: Manage code complexity, which inspired me to do the actual writing.

How I learned

To learn git I watched a series of YouTube videos which helped me solidify what I'd picked up from reading various articles.

After watching these videos I was still a little unsure how to get deployments to the live server working and the video tutorial that made it all clear was from Mijingo, which was 100% worth the $20, currently $15.:

Tools

The tools that I use are:

  • SourceTree (Git Gui) - opensource and cross platform. Dead easy to use.
  • Command Line - rarely as the gui means I don't need to remember various arcane commands. but sometimes it's necessary.
  • Bit Bucket - Free private repos (GitHub charges for private repos)
  • Dploy - deploy code to staging/production
  • Navicat - Remote access to database, db dumps, imports, data transfer and more. Way better than phpmyadmin
  • FocusLabLLC Master Config - Sets EE up for multiple environments

Workflow

My workflow is pretty simple. I've created a default install of ExpressionEngine default install, which as everything set up the way I like it, including, bootstrap, a simple index template, various EE settings, file directories, client member group,, database dump, javascript, and sass files all preconfigured.

  1. The first step is to create a project in Bitbucket and then clone that empty project to my local computer. 
  2. I then copy and past the default EE project, minus the .git folder into the empty project
  3. Open Navicat create a local db, import the default.sql dump
  4. open /config/ which has the FocusLab master config files and enter the config.local.php db credentials. Open config.env.php and enter the local/staging/production domains
  5. Login and confirm that everything is working correctly. If it is, then I do an initial commit and push everything to BitBucket
  6. Create a Development Branch and Start Building out the site.
  7. Once the site is ready for the client to preview and/or enter content, it's time to set up the staging environment.
    1. Create your db, and staging environment - I have a specific dev domain that I set up subdomains for all my clients.
    2. Enter these credentials into config/config.stage.php (FocusLab master config)
    3. Login to Dploy.io and connect a new Repository, enter the sftp/ssh credentials and set it to auto deploy from the Development branch. Deploy your repo.
    4. While the site is deploying open up Navicat, create a staging connection and test that it works. Assuming it does, close the connection, open your local database and do a "data transfer" to the staging server. This does a direct transfer to the staging server. No need to take a dump and then import.
    5. Check that staging site works.
  8. Now that we have a staging site, workflow changes a little. At this point any changes to the database need to be done on Staging and then moved to the local database either by a "data transfer" or by dumping/importing. Template code, is done locally and pushed to the staging server. Workflow has two different directions:
    • Database (channels, fields, entries etc)  Staging ---> Local
    • Code (HTML, JS, CSS, PHP etc )  Local --> Staging

Production!

Woo Hoo! the site is done, the client has entered all the data and has approved the site to go live. At this point you repeat step 7 above but set Deployment to be manual, i.e. you have to login to dploy.io and click a button to deploy the site. This ensure there's no accidental deployment of code that's not ready. The deployment branch should be set to Production or Master.

In the future when changes are made to the site, you would work on the Dev branch, push to staging, get client approval, Merge to Production and push to production.

Benefits to the Solo Developer

There are several benefits to the solo developer. No longer do you need to create duplicate tempates and make changes there or inform your client that there may be some wonkiness on the site while you do the work they've requested.  No more worrying about accidentally deleting/modifying something and then having no way to recover that file. All changes are version controlled allowing you to easily roll back your changes. 

Collaborating is easy. But wait, I"m a solo developer? Are you really a solo jack of all trades developer? Have you ever needed help on something either due to time constraints or perhaps your skillset doesn't cover something you need done. Git let's you share the repo with another developer, they can do their work and you can then see it before merging it into your staging/production branches. Brilliant.

I'm a solo developer, but I also do a fair amout of outsourcing work for other agencies. Either as the sole developer on the project or as part of a team. Using Git has opened up work opportunities for me that I would have otherwise not been able to do. I can clone an existing project from the agencies repo and make my changes and push back.

GIT-ifying an existing site

Converting an existing, ExpressionEngine, site to Git is super easy. Copy the site to your local server. Drop in the FocusLab Master config files, get the site working locally including upload directories. ONce that's set, set up a staging server and test. Finally set up the live server in Dploy, move existing site to a new folder (I call it DELETE_me_later) and deploy. There will be a few minutes of downtime, but you can easily schedule that at a time the client is comfortable. Now your previous projects are ready to use git workflow.

Importing Large Database Dumps

I recently acquired a client with an existing site that I needed to make a copy of locally and set up to work with version control. Usually this is not an issue, but with this particular client the site has 50,000+ entries and the database is 1.1+gb in size. I was able to take a database dump with Navicat and also with phpmyadmin, however importing the database was proving to be rather problematic and failed several times. The database import also failed using SSH with no error message.

I did some research and decided to give bigdump a shot. Big dump was super easy to set up and started working right away. It looked like it was going to take a long time, but at least I'd have the database imported. However about 5 minutes in the import failed and I was informed that it was due to extended inserts. The solution was to take a new dump extended inserts turned off and try again. 

That's easy enough in phpmyadmin. When taking the dump go to Export and choose Custom display all possible options.  Then scroll down to Syntax to use when inserting data and choose the first option.

This is fine, but I prefer to use Navicat to enable to me to work on the database remotely, plus it has a much better interface than phpmyadmin. I had the same problem here and it took some looking but I was able to find where to turn off extended inserts. Open your database, right click and choose data transfer. SEt up your connection to transfer from and the target connection - you can choose either another connection or a file. then go to the Advanced tab and uncheck (checked by default) Use extended insert statements. Now everything works as expected.

ExpressionEngine Snippets with Emmet

A few weeks ago I was watching some YouTube video tutorials in which one of them (cannot remember which video now) used Emmet to quickly expand large chunks of text. I've previously used a couple of different text expanders but for some reason was never really happy with them and shortly afterwards stopped using them. Emmet however is brilliant, easy to use, and is available as a plugin to several text editors which makes it very appealing. If you change your editor in the future or switch from Mac to Windows or Linux you'll still be able to use all the shortcuts that you know and love.

This example from the Emmet Documentation shows the power of what you can do. Typing ul.generic-list>lorem10.item*4 followed by a tab key results in this code

1
2
3
4
5
6
<ul class="generic-list">
    <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</li>
    <li class="item">Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</li>
    <li class="item">Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</li>
    <li class="item">Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</li>
</ul>

I typically use this when building out sections of the HTML of a site using bootstrap so I would often type out: div.container>div.row>div.col-sm-6*2>h2{Lorem Title}+p>lorem15 which results in this code

1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
	<div class="row">
		<div class="col-sm-6">
			<h2>Lorem Title</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sequi repellat enim cumque et. Voluptas.</p>
		</div>
		<div class="col-sm-6">
			<h2>Lorem Title</h2>
			<p>Aut, beatae, molestias dolore voluptates nemo saepe commodi illum quas soluta deleniti asperiores aliquid! Modi.</p>
		</div>
	</div>
</div>

Clearly this is very powerful and will save you lots of keystrokes and time when coding. Last week I saw this post on The Meta Q which inspired me to create a set of EE snippets and share them with the ExpressionEngine community. You can download the snippets at https://bitbucket.org/CreateSean/ee-emmet-snippets I've added snippets for both native ExpressionEngine Code and Third Party addons. Some of the snippets that I've added are ones that I have to check the EE docs everytime to get correct such as ee:search:simple

1
2
3
4
5
6
7
8
9
10
11
12
13
{exp:search:simple_form 
        channel="not foo" 
        result_page="search/results" 
        no_result_page="search/noresults" 
        search_in="everywhere" 
        status="not closed" 
        where="all" 
        form_class="navbar-form navbar-right"} 
        <div class="form-group"> 
                <input type="text" placeholder="" name="keywords" class="form-control search"> 
        </div> 
        <button type="submit" class="btn btn-success">Search</button>
{/exp:search:simple_form}

or ee:paginate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{paginate}
<div class="row">
    <div class="col-sm-12">
    {pagination_links}
        <ul class="pagination">
            
 
            {previous_page}
                <li><a href="{pagination_url}" class="page-previous"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
            {/previous_page}
 
            {page}
                <li><a href="{pagination_url}" class="page-{pagination_page_number} {if current_page}active{/if}">{pagination_page_number}</a></li>
            {/page}
 
            {next_page}
                <li><a href="{pagination_url}" class="page-next"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
            {/next_page}
 
            
        </ul>
    {/pagination_links}
    </div>
</div>
{/paginate}

Feel free to download or contribute additional snippets. I do have plans to add more snippets, both native and third party, as I have time. If there is a chunk of code that you would like added you can contact me via twitter @caffeinecre8ion or contribute directly to the repo.

Native ExpressionEngine Snippets

  • ee:entries
  • ee:entry:date
  • ee:entry:path
  • ee:comment:date
  • ee:comment:entries
  • ee:comment:form
  • ee:layout
  • ee:layout:set
  • ee:paginate
  • ee:simple:search

Third Party Addon Snippets

  • freeform:form
  • ceimg:single
  • ceimg:pair
  • switch:ee
  • crox:ifelse
  • hacksaw
  • low:reorder
  • low:variables:single
  • low:variables:pair
  • seolite
Your Voice Here
Leave a Comment