Angular 2 deployment – Github Pages

Hey guys, after a long time, I started again to write blog posts. Thanks to @CSharp-Corner for giving me a platform to share my knowledge.

In this post, we will see about deployment of Angular 2 Application in GitHub pages. It is really an easy way to do it. Let’s dive into this.

Before knowing about the deployment, let’s talk about the required things we need to have  ready.

Prerequisites

The following need to be installed in PC.

• Node.js.
• Angular-CLI (npm install -g angular-cli@latest) – command line interface for generating Angular 2 app.
• Typescript (if you want, it you can install it either globally or locally – npm install –g typescript).
• Git

Some basic commands in Git

Once installation of the things listed above, we can create Angular 2 Application with the commands, mentioned below.

• ng new ng2SampleApplication which generates Angular 2 Application
• cd ng2SampleApplication entering into the folder, where our Angular 2 app is created.

Now you can open the command prompt from ‘ng2SampleApplication’ created folder. Subsequently, follow the commands, mentioned below to deploy our code in GitHub pages.

• ng build –prod
  It compiles our Application code in production mode.
• Make sure that you have ‘.git’ folder in your Application folder.
• git init which generates .git folder.
• git add . – ‘.’ Represents every file and folder to be added in local git repository.
• git commit –m “Initial Commit” – Committing our code to our local repository.
• Before using the command, mentioned below, make sure we have created new repository in our github account already, if not then login to GitHub account and then create it. Once created, just grab the repository link either based on ssh/https…
• git remote v – It helps to expose our remote GitHub repository address.
• git push u origin master – It pushes our Application source code into our remote repository.
• ng github-pages:deploy creates ‘gh-pages’ branch in our remote repository where pushes our Application production code.

I hope, this post will help you. If you have any queries, please post in the comments section and I will try to answer. If anything is found wrong in the step mentioned above, let me know and I will correct it, which will help other developers also.

Advertisements

MongoDB Installation Procedure

Today this post will help you to install MongoDB in Windows 32 bit environment.

• Just download the required mongodb installation package or .msi from Official MongoDB site where you will get the latest version.
• Then manually create db folder in c:\ drive like
  

  C:\data:\db

• Go to mongodb installed path from there you open command prompt then type
  

  C:\Program Files\MongoDB\Server\3.2\bin>mongod

• if successful then there you can find
  

  I NETWORK  [initandlisten] waiting for connections on port 27017

• if you face anything kind of issues like “Exception initAndListen” and MongoDB can not start server… then you can do as given below instructions.

• C:\Program Files\MongoDB\Server\3.2\bin>mongod –storageEngine=mmapv1  –dbpath C:\data\db

  The above line depicts to map the db folder.

• Yay. Then there you can go!!! Finally you will get the “waiting for connections message”.
• If you want to see your available databases in locally, then  use the below command by keep opening the already existing command prompt.

• C:\Users\srini>mongo                                                                                                             Message will be :  MongoDB shell version: 3.2.3                                                                                                      connecting to: test                                                                                                                          Welcome to the MongoDB shell.

• Again if you face issue like “mongo” is not recognized as an external or internal command, then time to set the Environment variable to Path.

• Go to Control Panel -> System and Security – > Advanced Settings-> Environment Variable-> select Path and Edit to add

• “;C:\Program Files\MongoDB\Server\3.2\bin\”   click ok.

• Now try you can get the MongoDB Shell version Message…

That’s it guys.

Hope it helped you. Thank you.

Share your comments.

Enabling Visual Studio Browser Link

In Visual studio 2013, When you work on design pages (html) closely with Browser, you might experience “Browser Link” feature is not working.

Use of Browser Link,

• List out all the connected browsers
• Without going to browser for every time to see the changes to Html page, simply “Ctrl+Alt+Enter” will do refresh work for you by simply being in visual studio itself.

This post will help you to enable “Browser Link” Feature in Visual Studio 2013.

By default, Browser link will be enabled by including the below script line at end of <body></body> 

• (/_vwd/js/artery) and make sure that appsettings for browser link is set to true.

<appSettings>
<!–Enabling Browser Link–>
<add key=”vs:EnableBrowserLink” value=”true”/>
</appSettings>

• Static HTML pages can be linked by adding
  <modules runAllManagedModulesForAllRequests=”true”/>
• Final thing is keep in mind that before debugging just ensure that
  <compilation debug=”true”/> is set to true.

Yay!!! That’s it. There we go.

Open Visual Studio Specific version in Run Command

If the devenv.exe is associated with earlier version of visual studio, now you wish to change it to newer version of visual studio then just follow the below steps to achieve it.

• Click Windows key + r
• Type Regedit.exe
• Navigate to HKEY_LOCAL_MACHINE-> Software->Microsoft->Windows->Current Version->App Paths->devenv.exe
• Click on Default item to modify.
• Grab the specific version of visual studio devenv.exe path you wished to open, then just replace this with already existing value for Data column
• Once done, try to open Windows Key+r
• Type devenv.exe , Yay!!! We got it.

 

Hope it helps you. Share your comments.

How to Become a Great Software Developer

Source: How to Become a Great Software Developer