Pull a web app created from Azure Web Apps gallery to your local machine, and deploy it back to Azure

The web apps gallery in Azure is awesome to get up and running quickly. But how do you continue to develop a site after it has been deployed?

Let's walk through the steps you need to perform, and the steps I tried to perform.

Create a new azure web app

Go to your azure portal and create a new web app from gallery.

Select the (outdated) Ghost template

Configure the app

Run the setup wizard after your app has been deployed by going to http://YOURWEBNAME.azurewebsites.net. In the case of ghost you will have to go to /ghost to trigger the setup wizard.

It works!

Now let's find a way to pull this website to your local machine by going to the dashboard in azure and selecting the "Set up deployment from source control" option from the webs dashboard.

Select "Local Git repository".

Wait a minute

Voila

Fetch the "git url", launch cmder (you did read part1 and part2 of my series on getting started with hardcore git right?) and git clone the repository.

If you have git-credential-winstore installed you will get a nice prompt that saves your credentials, otherwise it will just prompt you for them. If you forgot or haven't set up your credentials there is a "Reset your deployment credentials" link at the bottom of the previous page.

Enter credentials and here is the result

Now that we have a local copy, let's see if we can actually re-deploy the application back to azure without any trouble. Let's change something, commit it and push it back to Azure (which is now set as remote origin).

In my case, I decided to a theme to the \content\themes catalog and push that to Azure. I decided to try the velox theme.

Hmm, errors with npm. I wonder if that has to do with the fact that the node_modules directory is checked in to the repo. Kudu is supposed to handle npm on deploy and we won't have the exact same packages on local and remote. Let's correct this real quick.

First force remove the node_modules recursively with rm -rf node_modules (if path is to long, just mode the node_modules dir to C: and delete from there) and commit the deletions with git add --all . && git commit -m "remove node modules from repo"

Then create a new file named .gitignore and paste the following into it

node_modules/ *.db

Commit that file with git add .gitignore && git commit -m "Don't track node_modules and *.db"

Now let's try to remove the node_modules folder from Azure by opening up a powershell prompt in kudu at http://YOURWEB.scm.azurewebsites.net/.

Remove the node_modules directory with ps Remove-Item site/wwwroot/node_modules -Recurse -Force. This will take a while, so go grab a cup of coffee/tea/water.

Another error! *sigh*

The sqlite3 package is apparently locked.

What happens if we restart our web and try to redeploy again?

It works! The deployment process have now handled the npm installation for us.

Now to be fair, it would probably have been enough to just ignore and remove the node_modules from our git repository, restart the web and redeploy. But I still wanted to show the actual debugging process since it's not super straightforward that a lock was left that prevented our deploy.

If we now check our themes on the newly deployed site we should be able to see the theme we added earlier

Success! Now let's verify that we can actually do another deploy by changing some things in the post template.

Note that ghost sometimes requires you to restart the web app in order for changes to themes to apply. But now when we go check out our post where we changed the rendering of the h1 tag to include our hardcoded message when a post background is set, we can see the changes.

There we have it. We can now try to do things like update the app we deployed from the azure web app gallery directly from git. Neat huh?

As usual, let me know in the comments if you find something strange or have something to add.