Angular+Firebaseでまずはフロントエンドだけ作っていくとすごく楽しい

タイトルのとおりです。 Angular+Firebaseで一旦それっぽくしちゃうと、モチベーションが下がらないのでおすすめです。

導入

$ npm install -g @angular/cli
$ ng new my-app
$ cd my-app
$ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: c27678c6699304bb4a70
Time: 7560ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.63 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.4 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

これでhttp://localhost:4200/にアプリケーションがたちました。

それっぽいUIフレームワークをいれる

僕のおすすめは

Angular Material

Clarity Design System

この２つです。 clarityはcardのダサさにウッっとなるのですが、それ以外は無難であることと、デザインガイドラインが用意されているので良いです。 今回はclarityを入れてすすめます。

$ npm install clarity-icons @angular/animations @webcomponents/custom-elements@1.0.0-rc.3 mutationobserver-shim@0.3.2 clarity-ui clarity-angular --save

//.angular-cli.json
      "styles": [
        "../node_modules/clarity-icons/clarity-icons.min.css",
        "../node_modules/clarity-ui/clarity-ui.min.css",
        ...
      ],
      "scripts": [
        "../node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
        "../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
        "../node_modules/clarity-icons/clarity-icons.min.js",
        ...
      ],
...

//src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ClarityModule } from 'clarity-angular'; //追加
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        ClarityModule.forRoot(), //追加
        ....
     ],
     declarations: [ AppComponent ],
     bootstrap: [ AppComponent ]
})
export class AppModule {    }

これでng serveすれば動きます。てきとうに

<!-- src/app/app/component.html -->
<div class="main-container">
  <header class="header header-6">
    <div class="branding">
      <a href="..." class="nav-link">
        <clr-icon shape="vm-bug"></clr-icon>
        <span class="title">僕のWebアプリ</span>
      </a>
    </div>
  </header>
  <div class="content-container">
    <div class="content-area">
      ...
    </div>
    <nav class="sidenav">
      <section class="sidenav-content">
        <a href="..." class="nav-link active">
                    Nav Element 1
                </a>
        <a href="..." class="nav-link">
                    Nav Element 2
                </a>
        <section class="nav-group collapsible">
          <input id="tabexample1" type="checkbox">
          <label for="tabexample1">Collapsible Nav Element</label>
          <ul class="nav-list">
            <li><a class="nav-link">Link 1</a></li>
            <li><a class="nav-link">Link 2</a></li>
          </ul>
        </section>
        <section class="nav-group">
          <input id="tabexample2" type="checkbox">
          <label for="tabexample2">Default Nav Element</label>
          <ul class="nav-list">
            <li><a class="nav-link">Link 1</a></li>
            <li><a class="nav-link">Link 2</a></li>
            <li><a class="nav-link active">Link 3</a></li>
            <li><a class="nav-link">Link 4</a></li>
            <li><a class="nav-link">Link 5</a></li>
            <li><a class="nav-link">Link 6</a></li>
          </ul>
        </section>
      </section>
    </nav>
  </div>
</div>

とか書いておきましょう。それっぽくなると思います。

f:id:anoChick:20170524164453p:plain

ビルドとデプロイ

ビルドは

$ ng build --prod

これだけです。 何処かにデプロイしたいとおもったら、Firebaseが一番早いと思います

$ npm install -g firebase-tools
$ firebase login
$ firebase init




デプロイ先プロジェクトは、既にあればそこを指定し、特になければ[create a new project]で新たに作ってください。



✔  Firebase initialization complete!




となれば成功。



//firebase.json
{
  "hosting": {
    "public": "dist"
  }
}





と書き加えてから



$ firebase deploy




とコマンドを叩くとデプロイされます。



=== Deploying to 'development-ef09c'...

i  deploying hosting
i  hosting: preparing dist directory for upload...
✔  hosting: 8 files uploaded successfully
i  starting release process (may take several minutes)...

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/development-ef09c/overview
Hosting URL: https://development-ef09c.firebaseapp.com




ログインとかユーザ管理のしくみもFirebaseに乗っかるとすごい楽なんですが、
それはまた別の話。