Recently we were working on a project for creating a website using MEAN (MongoDB, Express, AngularJS, and Node.js) stack and we were stuck with the process of hosting it on azure. After a bit of exploring we finally came across some options through which we can host our website on Azure:- Windows PowerShell, WebMatrix and Git. Further exploration showed git to be pretty friendly although we didn’t find too much help online and fumbled a bit! So if you have a MEAN stack site and are trying to upload it on Azure…don’t fumble…read on!
Create an website and Git repository on Azure.
1. Login to the Azure Management Portal.
2. Click the + NEW icon on the bottom left of the portal
3. Click WEBSITE, then QUICK CREATE. Enter a value for URL (ex. testsite) and select the datacenter for your website in the REGION dropdown. Click the checkmark at the bottom of the dialog.
4. Once the website status changes to Running, click on the name of the website to access the Dashboard
5. At the bottom right of the Quickstart page, select Set up a deployment from source control.
6. When asked “Where is your source code?” select Local Git repository, and then click the arrow.
7. To enable Git publishing, you must provide a user name and password. If you have previously enabled publishing for an Azure Website, you will not be prompted for the user name or password. Instead, a Git repository will be created using the user name and password you previously specified. Make a note of the user name and password, as they will be used for Git publishing to all Azure Websites you create.
8. Once the Git repository is ready, you will be presented with instructions on the Git commands to use in order to setup a local repository and then push the files to Azure.
Build and test your application locally
When you want to deploy to azure, you need to do a few things. Make sure you have git terminal installed (if not download it from here “msysgit.github.com”. In the installation options choose “use git from windows command prompt” and “checkout as-is, commit as-is” ). So, if you want to build and test execute following commands…
§ grunt / grunt serve
(run the project to test it locally)
§ grunt build
(build the project from the local development branch, so new files or changes will updated in dist directory)
Every time you run > grunt build, you’re creating a new application distribution inside the dist directory.
§ cd dist
(for navigating to the distribution directory)
§ git init
(initialize new git repository)
§ git add –all .
(add all of the new build changes to the current commit stage)
§ git status
(verify that the files you expected to change actually changed…)
§ git commit –m ‘commit statement’
(commit the changes to the master branch)
§ git remote add azure [URL for remote repository]
(add a Git remote for pushing updates to the Azure Website you created previously.)
§ git push azure master
(push the updated master branch to the appropriate azure endpoint)
If you navigate to the deployments tab of your Azure Website within the management portal, you will see your first deployment in the deployment history:
Browse to your site using the Browse button on your Azure Website page within the management portal.
Publish changes to your application
1. Open the project file in a text editor, and do all required change’s and save the file.
§ grunt build
(build the project from the local development branch, so new files or changes will updated in dist directory)
2. From the command-line, navigate to the dist directory and run the following commands:
§ cd dist
(for navigating to the distribution directory)
§ git add –all
(add all of the new build changes to the current commit stage)
§ git status
(verify that the files you expected to change actually changed…)
§ git commit –m ‘commit statement’
(commit the changes to the master branch)
§ git push azure master
(push the updated master branch to the appropriate azure endpoint)
You will be prompted for the password you created earlier. If you navigate to the deployments tab of your Azure Website within the management portal, you will see your updated deployment history:
Browse to your site by using the Browse button and note that the updates have been applied.
We’ve been playing with this and further updating the site etc for sometime now so Contact Us if something bothers you while following this blog!
Team Cennest