PWA+Angular8＋AWS amplifyを試す PART#1

3255 ワード
amplify AWS PWA Angular8 AWS テキストリンク

きっかけ

最近話題のPWAを試してみようと思い、メモを兼ねてQiitaへの投稿を始めてみた。
本業は組込みシステムのソフトウェアに携わっており、WEB系は初心者です。
初心者ながら少しずつ成長する姿を見守っていただければ幸いです。
アドバイス等頂けると助かります。

PART1

・Angularの雛形を作る
・angular/cliをインストール
・ブラウザに表示されるかテスト

環境

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.20
Node: 12.13.1
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.20
@angular-devkit/build-angular     0.803.20
@angular-devkit/build-optimizer   0.803.20
@angular-devkit/build-webpack     0.803.20
@angular-devkit/core              8.3.20
@angular-devkit/schematics        8.3.20
@angular/cli                      8.3.20
@ngtools/webpack                  8.3.20
@schematics/angular               8.3.20
@schematics/update                0.803.20
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

Visual studio code/1.40.1を使用しています。

Angularの雛形を作る

md angular-pwa
cd angular-pwa

angular/cliをインストール

npm i @angular/ci

今回はローカル環境にangular/cliをインストールする。
ローカルインストールの為、-gを付けない

ng newでangular雛形を作成

npx ng new angular-pwa --directory=./ --routing=true --style=scss

プロジェクトフォルダは先に作成しているので、--directoryオプションでインストール先をカレントに指定する。
--routing, styleオプションはお好みで。

ブラウザに表示されるかテスト

npx ng serve

http://localhost:4200/にアクセスして以下のような表示になれば成功。

次回

今回は、angularのインストールから動作確認まで行いました。
次回は作成したプロジェクトをgithubにレポジトリを作成して管理します。

PART2: GitHubリポジトリ登録