Recently, I've been unemployed and have a lot of time, so I decided to make something like this.

download

BBS-SPA It's here → https://github.com/syousei/bbs-spa

Feature

BBS-SPA is a sample of SPA (Single Page Application). The client side uses Angular2 + Bootstrap, and the server side uses App Engine / Python + webapp2.

function

User registration / authentication (login / logout) * JWT (JSON Web Token) authentication is adopted
Posting a topic
Comments on topics

setup

Premise

Please set up the following first.

Python 2.7
Google Cloud SDK / Python
Node.js and npm
Angular CLI
- npm install -g @angular/cli

If you are interested in this article, I think that this area is mostly done.

BBS-SPA setup

Extract the BBS-SPA downloaded from the above to an appropriate working folder. Then you will see two folders, bbs-spa-client and bbs-spa-server.

As you can imagine, bbs-spa-client has client-side files made with Angular2 + Bootstrap, and bbs-spa-server has server-side (API) made with App Engine / Python + webapp2. ) Files are stored respectively.

Now open a terminal (command prompt), go to bbs-spa-client and run the npm start command. If the following message is displayed, there is no problem.

キャプチャ1.PNG

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

(abridgement)

webpack: Compiled successfully.

Then open the Google Cloud SDK Shell, go to bbs-spa-server and run the dev_appserver.py app.yaml command. If the following message is displayed, there is no problem.

キャプチャ2.PNG

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

Installation of pytz and pyjwt

Create a folder called lib directly under bbs-spa-server and install pytz and pyjwt.

If you're not sure, just download them from the following URLs, unzip them, and throw the folders named pytz and pyjwt into bbs-spa-server / lib.

pytz: https://pypi.python.org/pypi/pytz
pyjwt: https://pypi.python.org/pypi/PyJWT

This completes the setup.

Let's open http: // localhost: 4200 in your browser. I think that you can use the bulletin board that requires membership registration.

If you want to edit or delete the registered user information or posted content, the App Engine management console (local version) will open at http: // localhost: 8000.

About operation

Originally, the server-side script and the client script are placed on the same host, but since the Angular 2 development server and the App Engine development server must be started separately in order to run locally, they are stored in separate folders. I will.

If you want to actually deploy to App Engine, set the build destination of bbs-spa-client to the folder in bbs-spa-server that stores static files (for example, / static_files / dist). I need to give it.

We hope that you will understand this and use it for learning. Please comment if you have any questions.

Also, I've used Angular2 and TypeScript for almost the first time to make this, so I think there are a lot of clunky things. If you have any questions, I would be very grateful if you could give me advice in the comments.

that's all.

SPA learning sample (Angular2 + Bootstrap / App Engine / Python + webapp2)