Journey of Code Over the web: Plugin-Repository-Package-Usage

Recently I created a jQuery plugin jQWaffle, which you can find at Github.

Github

journey1

Here is an journey and the nitty gritty details that happened over the entire phase of the code development from code creation to version control and releasing the different versions. Once the versions were ready then packaging them and hosting them and making them available to everyone over the web.

It all begins with creating a layout with different menus for different use cases. I idea was to have a plugin so jQuery was the default choice as there were going to be multiple DOM manipulations.

Once the code was ready opting for Github is the defacto choice for open source projects. You can create a project and host the code in a Github repository. You can work on multiple features at the same time on different branches and merge them once completed in the master branch. You can also follow the pattern of having seperate production and staging branches.

Git

I used Git for version control. I commited my changes and pushed them to github. It is a command line tool to perform these operations. You can also use the GUI tool Github Desktop available on windows or the lesser known GitKraken avaiable across all operating systems.

Versioning

Once the plugin code completion part is done, we must add versioning. Initially 1.0.0 at first major release.

Given a version number MAJOR.MINOR.PATCH, increment the:

  • MAJOR version when you make incompatible API changes
  • MINOR version when you add functionality in a backwards-compatible manner
  • PATCH version when you make backwards-compatible bug fixes.

Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.

You can read more about the semantic versioning tags at https://semver.org/

To create a first release with the release no on Github visit the release section on your Github section. Click on Draft Release button to create first release.
github-release1

ECMA6

The plugin i was using few feature from latest javascript specification included in ECMA6. You can have a good overview and comparison of new features at http://es6-features.org

All the browser vendors do not support the latest specification features.

BABEL

Babel comes to the rescue. Add `.babelrc.json` file to root of the project. Install development dependencies npm install --save-dev babel-cli babel-preset-env

You can find a step by step guide at Babel Installation. I followed the Babel CLI Installation.

Once a release is done you can find a mention of Versioning Tags on github.

release tag

The first version of plugin i ready and it is time to make it available out in the world, adding it to a package manager.

Bower

I register the package on Bower. Bower keeps track of all these packages and making sure they are up to date. You can find a detailed list of steps to follow to create a package on Bower. It is pretty simple and straight forward.

Install Bower:- npm install -g bower

Add bower.json at root of the directory.

Register the package in bower
E.G.
bower register jqwaffle https://github.com/niteshp27/jQWaffle.git

Expect a similar output:-
bower jqwaffle#* resolve https://github.com/niteshp27/jQWaffle.git#*
bower jqwaffle#* download https://github.com/niteshp27/jQWaffle/archive/1.0.6.tar.gz
bower jqwaffle#* extract archive.tar.gz
bower jqwaffle#* resolved https://github.com/niteshp27/jQWaffle.git#1.0.6
? Registering a package will make it installable via the registry (https://registry.bower.io), continue? Yes
bower jqwaffle register https://github.com/niteshp27/jQWaffle.git

Package jqwaffle registered successfully!
All valid semver tags on https://github.com/niteshp27/jQWaffle.git will be available as versions.
To publish a new version, just release a valid semver tag.

Run bower info jqwaffle to list the available versions.

It install the Github repository as a bower package. Similarly you can unregister the bower package. Type the Github credentials to perform the operation. The package is over the web available for any one to use.

Usage

To use the bower package you can follow the below steps and we can get going.
bower install jqwaffle

There we go using the created plugin in another project.

Advertisements

Deploy Website to Azure

I wanted to explore the Azure cloud service of Microsoft and deploy a static React website I completed, on Microsoft Azure. Below are the step that you can follow on the updated Azure admin console panel to deploy an Hello World Html Site which is hosted on Github.

Here is the Hello World Html Site for site hosted on Github. You can visit Microsoft Azure Website and sign up to use the Azure free products for web-mobile – App service to host the website. Once create the URL will look something like this https://azurehelloportal.azurewebsites.net/

Azure free products for web-mobile

Visit the portal to create a new website. You can use get started and select the Web App – Quick start tutorial or directly on Web + Mobile to create Web App.

azure-portal

Fill up the name for the App choose the subscription if you purchased or signed up using any free monthly Azure credit. Microsoft does drop an email sometimes to promote use Azure, keep and eye on your Office365 email address. Select the Resource group. In short a resource group is a container for your resources, You can read about it in more details here. You can use and already created resource group or create a new one.

create site

Click on create. Your site will be created.

Visit the Resource Group tab in left menu to have a look at available resource groups.

 resource-group

IT’s time to visit our website where we will deploy our code which is hosted on Github using Git. The App Service section located on the left menu of the Dashboard screen.

dashboard-left-menu

Visit the Deployment Credentials section under the Deployment Menu to key in and set up the local git and FTP environment.

deployment-credentials

Next up Visit Deployment Option Menu to choose the deployment source to be git and select local git repository. Choose the performance test to test user load and duration.

deployment-option1

deployment-option2

deployment-option3

deployment-option4

Next visit the Properties Section below to copy the azure git url where we will be pushing out local git repository. We will need this later on. This will look something like this- https://niteshpatare@example.scm.azurewebsites.net:443/example.git

git-properties

Note down the git URL.

Visit the overview section where you can see all the git and ftp details as well.

site-overview

Back to the local machine. Open up your cmd prompt and run the following steps one after the another to deploy site to the azure. I consider you are not a newbie to git and have basic understanding of git commands.

git clone https://github.com/Azure-Samples/html-docs-hello-world.git
cd html-docs-hello-world
You can make any Changes as per your needs or else continue with fresh deployment.
git add –-all
git status
git commit -m "added files"

You will need the git URL from the azure portal that we copied earlier.
git remote add azure https://niteshpatare@example.scm.azurewebsites.net:443/example.git
git push azure master
Enter the credentials to complete the process.

Note:- Some time or another you are bound to run into the following error when everything goes well.

Error-You do not have permission to view this directory or page.

You have to set the starting Default document for your site. Visit Application Settings. Under Default Documents add the starting file name. E.G. start.html

final-application-settings

Below are different starting default documents.

default-documents

And we are good to go. Visit the deployed site. You can find the url in Overview section. It will be something like https://example.azurewebsites.net.