最近、無職になって時間があり余っているため、このようなものを作ってみた次第です。

ダウンロード

BBS-SPA

BBS-SPAはSPA(Single Page Application)のサンプルです。
クライアントサイドはAngular2 + Bootstrapを、サーバーサイドはApp Engine/Python + webapp2を使用しています。

先に以下をセットアップしておいてください。

この記事にご興味を持たれた方は、このあたりは大体できていると思いますが。

上記よりダウンロードしたBBS-SPAを適当な作業フォルダに展開します。
すると、bbs-spa-clientとbbs-spa-serverという２つのフォルダが現れます。

ご想像のとおり、bbs-spa-clientにはAngular2 + Bootstrapで作られたクライアントサイドのファイルが、bbs-spa-serverにはApp Engine/Python + webapp2で作られたサーバーサイド（API）のファイルがそれぞれ格納されています。

それではターミナル（コマンドプロンプト）を開いてbbs-spa-clientに移動し、npm startコマンドを実行してください。
以下のメッセージが表示されたら問題ありません。

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **

（省略）

webpack: Compiled successfully.

次にGoogle Cloud SDK Shellを開いてbbs-spa-serverに移動し、dev_appserver.py app.yamlコマンドを実行してください。
以下のメッセージが表示されたら問題ありません。

Starting module "default" running at: http://localhost:8080
admin_server.py:116] Starting admin server at: http://localhost:8000

bbs-spa-serverの直下にlibというフォルダを作成し、pytzとpyjwtをインストールしてください。

よくわからなければ、それぞれ次のURLからダウンロードして、解凍すると出てくるpytzとpyjwtという名前のフォルダをbbs-spa-server/libの中に放り込めばOKです。

以上でセットアップ完了です。

ブラウザでhttp://localhost:4200を開いてみましょう。会員登録制の掲示板が使えるようになっていると思います。

もし登録したユーザー情報や投稿内容を編集・削除したい場合は、http://localhost:8000でApp Engineの管理コンソール（ローカル版）が開きます。

本来ならサーバーサイドスクリプトとクライアントスクリプトが同じホスト上に置かれるわけですが、ローカルで動かすにあたってAngular2の開発サーバーとApp Engineの開発サーバーをそれぞれ別に起動しなければならないため、別々のフォルダに格納しています。

実際にApp Engineにデプロイしてみたい場合は、bbs-spa-clientのビルド先をbbs-spa-serverの中の静的ファイルを格納するフォルダ（例えば /static_files/distなど）に設定してあげる必要があります。

そのあたりをご理解の上、学習用にお使いいただければと思います。
ご質問などあればコメントしてください。

また、これを作るにあたってAngular2やTypeScriptをほぼ初めて使ってみたので、いろいろと不格好なところがあると思います。
もしお気づきの点があればコメントで助言いただけるととても嬉しいです。

以上です。