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.

Advertisements

Sassy CSS (SCSS) – Key Missed Parts

SASS (Syntactically awesome stylesheet) or SCSS (Sassy CSS) as we call it, are CSS preprocessors. Preprocessors generate css files and have their own syntax and own language.
E.g. SASS, LESS. SASS or SCSS is an extention of vanilla CSS that adds variables, mixins, nested rules and many other features.
Our SASS code gets compiled to properly formatted CSS, easing the issues of organising and maintaining code.
SCSS syntax is the most widely used by developers and designers. It makes writing CSS fun again.
SCSS is a superset of CSS written in same way but with new SASS features. SCSS makes writing maintainable CSS easier. The code is more redable in less time and with less code.
In SCSS the files are saved as “.SCSS”.

 

Variable:- 

A value can be set to a variable which is the used instead of the original value. They are time savers declare once and use it where required. E.g. $almond:#eee;
The default value is used only if value isn’t set or assigned any place else.
E.g.:- $default-text: $black !default;

 

Mixins:-

They are resuable piece of code. The purpose of mixin is to make a set of properties reusable. Mixins are functions and functions can accept parameters.
E.g.- @mixin overlay {
background-color:#eee;
}
.modal_bg {
@include overlay();
}

E.g.with parameters- @mixin border-radius($radius) {
$border-radius: $radius;
}
.box {
@include border-radius(3px);
}

 

‘&’ Ampersand parent selector:-

The ‘&’ Ampersand parent selector when we nest, it doesn’t add space between parent selector and child selector hence ‘&’ to join classes. Mostly used with pseudo selectors.
“&’ is a shortcut for parent selector.
E.g. .parent {
&:hover { text-decoration:none;}
}
Output:-
.parent:hover { text-decoration:none;}

 

@extend:-

@extend allows to inherit CSS from another source. CSS is maintainable as we add selector one by one in related selector. HTML remains semantic as each element keeps its descriptive class name.
E.g.- .message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
background-color: transparent;
}

.success {
@extend .message;
border-color: green;
}

Output:-
.message, .success {
border: 1px solid #ccc;
padding: 10px;
color: #333;
background-color: transparent;
}

.success { border-color: green; }

 

Difference between Mixin and Extend:-

@extend doesn’t have parameters but mixin do.
@extend combines selectors but mixins don’t.
SASS @extend is more efficient as it writes common properties only once.

 

Placeholders:-

If we don’t want or need the any selector, then we can transform it into a Sass placeholder by replacing the dot with a percentage sign %.
E.g.- %message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
background-color: transparent;
}

.success {
@extend .message;
border-color: green;
}
Output:-
.success {
border: 1px solid #ccc;
padding: 10px;
color: #333;
background-color: transparent;
}

.success { border-color: green; }

 

Comments:-

// single line comment.
/* multipleline comment */ :- Might not display at exact position
/*! Loud comment */ :- Will be displayed at exact location

 

Working with LESS and SCSS in Visual Studio 2015

I am demonstration a simple example to start working with LESS and SCSS in visual studio 2015.

First Set up web compiler

scr1

scr2

Click download and install.

Create an empty solution and add a project.

scr3

scr4

Add css folder and add a main.less file. Right click on the LESS file and compile it for first time.

scr5

scr6

It creates a compilerconfig.json where we can mention what are input and output file paths.

scr7

It automatically generates a css file and minified file with same name.

scr8

We can then include it in our html page and start adding css to the LESS file.

We also have the option to recompile the file or remove it from compilation altogether.

scr9

For scss files we follow the same steps.

Going further I added another less file and imported it in our main file and it works absolutely fine. It also generates sourcemap file in the converted scss to css file inline.

You can find the source code at the following github repo. https://github.com/niteshp27/setup-less-and-scss-in-visualstudio

Working with LESS in ATOM

ATOM is a open source text editor. Atom helps you write code faster with a smart, flexible autocomplete.  You can visit https://atom.io/, download and install it. We are going to work with LESS in ATOM IDE.

Once installed we can begin with installing the less package. For that we need to visit File -> Settings and then the Install tab.

scr1

Type less-autocompile and search for the package. The result will be something like below, click on install to install the package.

scr2

Create a LESS file named main.less and add the below parameters on first line of the LESS file main.less preceded by a //

out (string): This is the path where the CSS file is to be created
sourcemap (bool): This creates a create sourcemap file. I will give more details about sourcemap later in the blog. It is a boolean value true or false.
compress (bool): This will provide us an auto compress CSS minified file. It is a boolean value true or false.

scr3

We usually have different modules of css represented inside separate less file. In our example we find variable.less file. In the variable.less file add the below parmeter on first line of LESS file preceded by a //

main (string): This is the path to our main LESS file to be compiled.

scr4

The same applied for responsive.less file as well.

scr5

The LESS file auto compiles the LESS file on save.

Sourcemaps:-

Source maps seek to bridge the gap between higher-level languages like CoffeeScript and Sass and the lower-level languages they compile down to (JavaScript and CSS). Source maps allow you to see the original source (the CoffeeScript or Sass) instead of the compiled JavaScript or CSS while debugging.

A comment is added to the end of the generated CSS file:
/*# sourceMappingURL=screen.css.map */
This points to an additional file that was created during compilation: screen.css.map, which – as the name implies – is what maps all of the compiled CSS back to the source Sass declarations

To enable it in chrome follow the below screen

scr6

scr7

Intro to LESS CSS – Part 2

Operations:- Operations are functions or modifiers that we can apply to our rules. We can Add, Substract, Multiply or Divide.

Note:- LESS is aware of PX hence no need to mention measurement unit.

Color Functions:- Color functions are used to make variations in color. These functions are darken, lighten, fadein, fadeout, saturate, desaturate. Fadein and fadeout need opacity to be mentioned already.

Comments:- There are two ways in which we can comment.

/*This will appear in LESS to CSS file*/

//This will not appear in CSS file.

Importing:- When we mention file name we can mention .LESS or .CSS extention for the file that we are importing

E.G:- @Import “reset”

Escaping:- Old proprietory code causes LESS to error, hence we can escape using ~”-code-”

E.G:- filter: ~”progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907)”

Scope:- Variables will inherit first from local scope, if not available locally it will search for wider scope

Spin:- We can use spin method to spin the color wheel by degrees to change color values. Its best to set only one color variable in LESS stylesheet and use modifiers throughout rest, then whole design depends on it.

Intro to LESS CSS – Part 1

If you are a frontend developer/designer some time in future you will run into LESS, which is a CSS preprocessor. LESS offers many benefit over plain vanilla CSS. IT make you working with CSS simple and fun. User can write dynamic CSS via LESS. The learning curve for LESS is very minimal.

We can write modular CSS using LESS. LESS includes variables, mixins, nested rules, operations, color functions and many more features. It is fun once you get used to it.

Below you will find examples which make you to easily understand LESS.

Variables Declaration:- They are time savers declare once and use it where required.

MIXINS:- They are resuable piece of code. Mixins allow us to specify a chunk of code as a class and then allow us to mix those classes together. They are divided in two types, Normal Mixin and Parametric Mixin.

A Parametric Mixin is same as normal Mixin but it takes parameters/arguments with Mixin.

We also can override parameters in it.

Example of Parametric Mixin with Variable.

NESTED RULES:- LESS allows users to write new CSS rules within curly braces of existing rules.