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:

Leave A Reply

Powered by FrontNet