Skip to content

eranhd/angular2-first-time

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 

Repository files navigation

Angular 2 create and delpoy for first time

First time creating and deploying angular2 app

Getting Started

These instructions teach you how to create and deploy angular2 using Firebase and Angular2 CLI

Prerequisites

What things you need to install the software and how to install them

  • nodejs
  • npm
  • git
  • angular2 CLI

Installing

A step by step download and install this links

cause you install git and node js, your computer know nom command

NPM Install

write following line to cmd: npm install angular-cli -g (angular2 CLI)


Create your app

Create app:
$ ng new my-app

Enter app directory:
$ cd my-app

Run app:
$ ng serve

goto http://localhost:4200 and see if app works.

Change your app

Create new component as name Card
To card.component.html insert div tag
copy this css code to card.component.css file



div{
height: 200px;
width: 400px;
box-shadow: 2px 2px 2px #acacac;
background: #eee;
border-radius: 10px;
}

now in app.component.html add 4 cards with *ngFor (don't forget to create temp array in ts file)
To header page add h1 tag with your name and your i.d

Deployment

build app for deploy:
$ ng build --prod

goto firebase and create a new Firebase project.

install firebase tools:
$ npm install -g firebase-tools

deploy to firebase:
$ firebase login

after authentication, run:
$ firebase init

First of all you're being asked which of the Firebase client features you want to use. Select the option Hosting: Configure and deploy Firebase Hosting site. Next the Firebase client will ask which folder to use for deployment. Type in dist. That is important because that is the location where our production build is stored.

Next the question is ask if this app is a single page app and if it should rewrite all URLs to index.html. In our case we need to answer yes.

Last question is if Firebase should over write file index.html. The answer to that question is no. now run:
$ firebase deploy

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published