The polymer is an open-source JavaScript library for building web applications using web components. It is created by Google and it allows repeated usage of HTML elements if the developer wants to create web applications with its components. In this article, we will learn the steps to install polymer on MacOS.
Here, I am not explaining more about Polymer. But let us look at the main featuress provided by Polymer.
Web components – Web components are nothing but reusable components were each of the components contains some custom elements, HTML imports, and a template. If you are familiar in using React, Angular, etc. then you are already using web components. Components in React are really web components. Similarly, Angular directives can be considered as a web component.
Customised version of elements – One of the most attractive features of Polymer is that it allows the developers to create their customized version of the elements by using CSS, HTML HTML, and JavaScript for adding features in the element.
Polyfill – It also provides polyfill which enables implementing a feature on the web browsers that do not support it.
Materil design – It uses Google material design for developing a mobile application that is hybrid in nature. The HTML import and the custom element present in can be used fiber uses and the custom elements are distributed across the entire network.
So let’s jump to the installation procedures. All the steps are explained in detail with screen shots.
Installation
So let us learn the steps to install Polymer on MacOs.
1. Install and Update Homebrew
Homebrew is a popular package manager for macOS. We can install all the packages and dependencies required to install Angular using Homebrew. So at first, we need to install it on our system.
To install Homebrew, open the Terminal and run the command below.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
So we have installed Homebrew on our system successfully and now we need to update it so that we can get the latest version of packages available on HomeBrew.
brew update
2. Install Nodejs
Node.js actually provides a runtime environment to execute JavaScript code from outside a browser. NPM, the default package manager for Nodejs is used for managing and sharing the packages for any JavaScript projects. Node.js and NPM are used by Angular for the management of dependencies and runtime.
In this tutorial, we are going to install Angular CLI using the Node Package Manager(NPM). So first, it needs to install Nodejs on our system. NPM will be installed with Nodejs itself.
Nodejs can be installed on our system using brew.
brew install node
Alternative method
Alternatively, we can download and install Nodejs from the official website. If so, it does not need Homebrew to be installed on our system.
Currently, 12.7.0 is the latest version of Nodejs and it can be downloaded and installed on our system using the URL below.
https://nodejs.org/en/download/current/
Select the macOS installer option and download the node-v12.7.0.pkg file. Then install it on our system.
3. Install Git
It requires to install Git on our system because, on step 5, we need to clone the starting code for our first polymer project from Github.
Git can be installed on our system using brew.
brew install git
Alternative method
Alternatively, we can download and install Nodejs from the official website. If so, it does not need Homebrew to be installed on our system.
https://git-scm.com/download/mac
It will download the git-2.22.0-intel-universal-mavericks.dmg file. Just install it.
4. Install Polymer CLI
Polymer CLI helps us to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
The main components of Polymer CLI are a boilerplate generator, build pipeline, a test runner, a linter and a development center.
Polymer CLI It can simply be installed using NPM.
npm install -g polymer-cli
5. Clone the Starting Code
Now we need to download a starting code from Github to create our first application using Polymer. We can easily clone this project using git.
git clone https://github.com/PolymerLabs/polymer-3-first-element.git
6. Install Dependencies for the Starting Code
So we have cloned the starting project from Github and we need to install the dependencies required for it. It can be done with NPM.
cd polymer-3-first-element npm install
7. Running the App
Now, the app we have cloned can be run from our system.
polymer serve --open
This will open up a new browser tab on our system with the below URL. It uses port 8081 as default. But it will open up in another tab, if it’s not available.
http://localhost:8081/demo
So, it is our Polymer project and we can customise it for our need.
Summary
So we did learn the steps to install Polymer on a MacOS system. Screen shots and images are there with each steps.
