Serve Angular Application in Python Flask Server

Avishka Balasuriya | BSc (Hons) Computer Science | Python Developer @ iLabs

Some of you may know how to do this but I guess most of you don’t. So I decided to give you a brief step by step introduction. It only required a few steps to get this working. So first let’s look into step.

1. Create a simple angular application

2. Create a python server which contains an API endpoint to accept requests to your angular application

3. Build your angular application in production mode

4. Copy the dist folder contents into the python server files

5. Redirect user requests to index.html file

First, create the angular application in your desired folder.

ng new ServeAngularInPython

Then you will be asked to enable angular routing. select yes and select your preferred stylesheet format. In my case, I’m going with CSS. Since this is a small and demo application we will keep using the app component. Then if you want to add your own HTML code go ahead and add. I’m going to stick with generated HTML content by angular.

Now we can move into our next step.

1. First, make a new file called main.py
2. Open your terminal and navigate to the directory where your main.py is located
3. Install python flask package using the pip package manager

pip install flask

4. Copy the below code in your main.py

from flask import Flaskapp = Flask(__name__) @app.route('/', methods=['GET'])if __name__=="__main__":
def root():
 return "Hello world" 
 app.run()

5. Run main.py

python main.py

6. Test your server by visiting localhost:5000. Then you will be presented page similar to this.

7. Create folder name static and templates in the same directory. Here is my folder structure

After we finish building our project, We are going to copy the scripts and styles in our dist folder into a static folder in the python server except for index.html. So those static contents will be located in localhost:5000/static Since index.html is located in the templates folder, It will struggle to find its script and style files in runtime. To avoid this we must build our angular application with this special command.

ng build --prod --build-optimizer --baseHref="/static/"

You can see in baseHref flag, we have mentioned its script & style files will be located in localhost:5000/static.

1. Simply copy all files into python static folder except index.html
2. Then copy the index.html folder into the templates folder in python

Then your static and templates folders will look similar to this.

If you follow all steps correctly, now you are in the final step

Now we have to return our index.html to the userusingflask render_template. Modify your python code as below.

from flask import Flask,render_template # Add render_template app = Flask(__name__) @app.route('/', methods=['GET'])if __name__=="__main__":
 def root():
 return render_template('index.html') # Return index.html 
 app.run()

That’s it. Now run your main.py again and visit localhost:5000. You will be presented with your angular application.

If you have any questions, please contact me. Thank you and Good Luck

Originally published at https://medium.com on April 30, 2020.