So I've finally got around to taking a look at Source Control for Umbraco and figured out what I believe are two suitable solutions. It was a bit of a learning curve and needed a fair bit of thinking and testing.
I hit a few road blocks along the way but nothing major. I thought I would document these problems here to help someone out who might be trying to figure out how to do the same.
So I've written two articles which are closely related....
1. The first details Umbraco source control when using Umbraco Cloud & GitHub
This is the ideal solution if you are making use of Umbraco Cloud. This is the recommended way since Umbraco Cloud has really simplified media and content deployment. You can find full details about this here.
2. This been the second article which details Umbraco source control using only GitHub and uSync
This method is suitable for anyone (like myself) choosing to host your Umbraco website outside of Umbraco Cloud on third party hosting or your own server. This method is slightly more difficult but I have documented this well to make it nice and easy for you.
Please Note...
Regardless of the which method is best for you I still recommend running through the first tutorial. There is some valuable information in there that will help you in this tutorial. In-fact some parts my be slightly dependent on it or at least less documented.
Prerequisites
1. Run through the first tutorial as described above
Tips: Once you've run through the first tutorial copy the .gitignore file from the website root. You can re-use that in this tutorial and save some time.
Tips: I haven't tested it but the content edition supplements uSync. I would probably recommend installing them in the correct order. uSync then uSync Content Edition.
4. Create a GitHub account if you haven't got one already.
So in the first tutorial Andrew sets up the solution under two different projects. One for your custom code and the other for Umbraco's default website & views / document types etc. This works great when using Umbraco Cloud since Umbraco wants you to separate your source control out under two different repositories within Git.
If you are not using Umbraco Cloud and for the likes of this tutorial I prefer to do it slightly different. Instead of separating custom code, models, controllers off into a different project I prefer to simply store these files withing the App_Code folder. I just find working with Visual Studio, source control, and deployments all work a little easier this way.
How to handle your connection strings?
If you're like me and prefer to pull your Umbraco database into a SQL Server instance then connection strings can become a bit of a nightmare when it comes to deployments and source control. You want to check your web.config into source control as to handle any important config changes but at the same time you don't because your colleague may be working under a totally different connection string. The issue is when your team mates run a pull request their connection string would be overwritten.
Here is a nice solution to get around this problem..
1. Create a new file in your website root called ConnectionStrings.config. This is where you will add your connection string. Copy out the connection string details from your original web.config into this file. So it should look something like this.
The idea is that we will commit the web.config into Git but exclude the new ConnectionString.config file and each of your team members can all work from the same web.config but still have their individual connection string file so everything just magically works.
2. What to exclude from Git and .Gitignore
Before we start initializing and committing to GitHub we need to add a couple more items to your solution. There's quite a lot of folders and files that we don't want adding to Git since they will cause problems for your team mates pulling down the code. We can tell Git what to exclude by creating .gitignore files.
A recommend adding two....
Create a .gitignore file in your Visual Studio's solution folder
In your Visual Studio Root folder alongside your solution file create a blank text file called ".gitignore". Open this in notepad and paste the following.
# exclude .vs folder /.vs/*
This will simply tell Git to exclude the .vs folder which we don't want committing. You can download an example of this file from here but don't forget to rename it to .gitignore.
Create a .gitignore file in Umbraco's website root folder
There is quite a lot of folders and files within the Umbraco website root that we don't want including in source control. These may vary from project to project but as a starting point I found the easiest solution is to copy the .gitignore file from the one generated in the first article / tutorial (mentioned above) and then pasting it within your website root folder alongside your web.config file.
This file is generated by Umbraco so I trust they have most things set exactly how we want them. That said I did make one small change to their original file. I decided to remove the ignore media part since I want the media committing to Git. Most of the websites I work with do not have a massive amount of media items and the file sizes are fairly small. I just think it would be easier for my team members to be able to pull these down from Git and commit any new ones. If I was working on a project that has a lot of media items and the file sizes are pretty big I would probably leave these excluded from Git and zip the media folder up for my team members rather than having them pull from source control. I will let you decide if you want the media folder adding in or not. And that goes for any other extra folders and files you decide to exclude.
If you didn't complete the first tutorial then you can probably get away with copying the text from the file here and pasting it into a .gitignore file also to be created within the website root folder.
Exclude the ConnectionString.config by adding to the .gitignore file
So here is one change that you will need to make to the .gitignore file within the website root. We want to exclude the ConnectionString.config file. Please scroll to the bottom of the example file I made and you can see the additional configuration I added.
You simply need to add this
#this will exclude the connection string. The web.config will still be included /ConnectionStrings.config
3. Initializing a new git repository for your website
How to link your GitHub account to GitKraken?
Open GitKraken and first of all make sure your GitHub account is linked. You can do this my clicking on the settings menu in the top right corner and then clicking on preferences. You can then click on Authentication and setup the link between your GitKraken and GitHub account.
How to initialize a new repository for your project?
1. Within GitKraken click on the file menu at the top left and then "Init Repo".
2. Select GitHub and select your account. If you don't initially see your account you haven't yet linked it to your GitHub account as described previously.
3. Enter a name for the respiratory (project name is fine), a description, and un-check the clone after init checkbox. Finally click the create repository button.
4. As you do this GitKraken should display a popup saying it was a success and do you want to open in GitHub. Click on this popup and open the new repository in GitHub.
4. Push your project files to the new repository
Closely follow the steps here.
1. Open command prompt
2. Enter cd\and-the-directory-of-where-your-solution-file-is (hit enter) Eg. cd\Development\Help Projects\Umbraco\TestProtect
3. Enter git init (hit enter)
4. Enter git add . (remember the '.' and hit enter)
5. Enter git commit -m "First commit" (hit enter)
6. Enter git remote add origin remote 'your repository url here' Eg. git remote add origin https://github.com/DavidArmitage/TestRep.git This line of code can be found on the GitHub page that opened following the initialization from GitKraken.
7. Enter git remote -v (hit enter)
8. Enter git push origin master (hit enter)
This should be it. If anything goes wrong try entering 'git remote rm origin' and try all the steps again.
5. Using GitHub & GitKraken to pull and push changes
This is out of the scope of this tutorial but if you worked through the first tutorial and watched Andrew's videos on Umbraco TV the rest should be clear.
6. uSync and committing database changes
If you have installed uSync and uSync Content Edition this is done for you automatically. Basically any changes made to data such as doc types, content, media etc can be pushed into GitHub. How uSync works is by writing these DB changes to disc which can be found within a uSync folder withing your website root. This is then committed to GitHub. Your team members can then pull the changes. When they re-start the website locally then the same changes are applied to their local database.
I'm an entrepreneur and web developer with a passion for coding. I absolutely love working with Umbraco CMS and appreciate the Umbraco community even more.
I've got 10 years+ .Net experience and 7 years+ experience working in the recruitment industry, both coding and marketing job websites. I wanted to use my skills to help give something back to this awesome community and so I decided to build UmbraJobs.com.
My vision & fundamentals
I want this website to be a place where Umbraco Professionals and Umbraco Partners can advertise their services but at the same time I want to filter out all the under-qualified freelancers & agencies that take up the biggest part of other job & freelancer websites. We've all worked hard to gain our Umbraco certifications, partnership status, and help build the Umbraco community to what it is today. I want to see everyone get rewarded for their efforts.
Follow me on social media
If you're an Umbraco professional, partner, employer, recruiter or a passionate Umbraco community builder then I'm more than happy to hear from you. Follow me on my social media channels and please reach out if you have any needs, want help or consultation with anything Umbraco related or just want a general chat.
Need help with a project but not too sure who to approach? Send us your project brief and budget. We will provide a free consultation and can help you gather quotes from the best and most suitable freelancers or agencies.
Have you got job vacancy and want to hire an Umbraco professional? Post a job on our website for free. Alternatively let us know your requirements and we will send suitable prospects your way.
Are you an Umbraco Freelance Developer or Umbraco partner that wants to advertise on our site? If you work with Umbraco or registered as an Umbraco partner then you can create a profile for free.
