Web Application with Python, Flask Framework, Angular 2

0

Ending the article series on the topic of Build web application with NodeJS + Express FrameWork + AngularJS, today I would like to deploy a new topic which is Build web application with Python + Flask Framework + Angular2 + DynamoDB. Perhaps because the angular2’s lifespan and support are so short, it will cause many people to twist their brains when they need to learn about it when their documents are extremely meager or library lists are poor. Sometimes because customers demand it, we have to stretch the brain to find out and treat it well.

In this project, I only use angular2 to build the remaining one using only 1 server which is flask-python.

You need to create a directory to contain your project. Here I set the series2/

Install angular2

There are many ways to install angular2 and in this article, I will perform the installation using angular-cli.

  • First, you need to install npm and nodejs (these 2 guys are very simple, people can search google or find back in their previous series)
  • Next I will install the angular-cli by cd to the series2 directory and run the command: npm install -g @angular/cli
  • Finally, init project angluar2 with the command: ng new front --style scss (here I use style is scss if you want to use css, you can fix it – how to write scss and its benefits.
  • We check by cd into the directory / front and run the command: ng serve After the build takes a few seconds, the result will be as shown below:
ng serve

Open the browser and go to http://localhost:4200/ we will get the result as shown:

Anguler Set up Front

Set up front

  • We will create a component called home including 3 files in the format as below.
#front/src/app/home/home.component.html
 
<div class="welcome">HOME PAGE</div>
#front/src/app/home/home.component.scss
 
.welcome {
  font-size: 20px;
  color: red;
}
#front/src/app/home/home.component.ts
 
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
 
  ngOnInit() { }
  constructor() { }
 
}

In the file front/src/app/app.module.ts we add the newly created component:

#front/src/app/app.module.ts
 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
 
 
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the file front/src/app/app.component.html we delete the unnecessary html fragments and leave only the following command:

#front/src/app/app.component.html
 
 
<router-outlet></router-outlet>

Define a route with a home path and it will move to the component home we just created above by adding a route to the front/src/app/app-routing.module.ts in the form shown below:

#front/src/app/app.component.ts
 
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
 
const routes: Routes = [
  { path: 'home', component: HomeComponent }
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Rerun the angular2 server using the ng serve command and access the localhost:4200/home url, we will see the result as shown (running the angular 2 server is to make sure the component we just created has worked well):

Angular Home Page

In the front directory we run the ng build command and after it is completed we will see in the front directory that there is 1 more dist folder, this is the source that angular2 has built. As mentioned above, I only use a single flask-python server so I will return the source in this directory to the browser.

Flask settings framwork

  • Installing python.
  • Pip settings: You can refer to how to install depending on your OS on google, very simple.
  • Install Flask with the command: pip install Flask (add sudo in front of it if an error is reported)
  • We check by importing the flask and the result will be as shown below:
Flask settings framwork

Server setup

  • In the series2 directory we create the directory /server and create the app.py file in the folder we just created and add the following basic commands:
#server/app.py
 
from flask import Flask
 
app = Flask(__name__, static_folder="../front/dist/front", static_url_path="")
 
@app.route('/')
def hello_world():
   return 'Hello, World!'
 
if __name__ == '__main__':
   app.run()

Here static_forder we are using the same resource that was built by angular2 above.

  • At the server directory we run the python app.py command to run the python server. We will get the result as shown below:
command to run the python server

Open the browser and run the URL http://127.0.0.1:5000/ or localhost:5000 we will get the result like this:

Python Hello World

As I said from the beginning, I only use angular2 to build front-end so at the server I will have to define a route with the url /home to sync with the bottom. Since this is a single-page, we only need to return the correct index page after angular build is okay. We will add the app.py file as follows:

#server/app.py
 
from flask import Flask
 
app = Flask(__name__, static_folder="../front/dist/front", static_url_path="")
 
@app.route('/')
def hello_world():
 return "Hello world."
 
@app.route('/home')
def home():
 return make_response(open('../front/dist/front/index.html').read())
 
if __name__ == '__main__':
 app.run()

We restart server flask and then open localhost:5000/home url, we will get the result as shown:

Python Home Page

To perform the build front job and run the server conveniently later in the server directory we create the sh file named reboot.sh with the following content:

#server/reboot.sh
 
#!/bin/sh
cd ../front
ng build
cd ../server
python app.py

Now after changing the code you just go to the server directory and run the command sh reboot.sh is done.

In the next article, I would like to guide you to create basic CRUD pages. Thank you for reading and looking forward to receiving comments from everyone.

Source: https://techtalk.vn/xay-dung-ung-dung-web-voi-python-flask-framework-angular2-dynamodb-phan-1.html

Share This:

Comments are closed.

Powered by FrontNet