Angular 4 frontend with python flask backend how to render simple index page

Question

Hello Python community I am angular and node.js developer and I want to try Python as backend of my server because I am new to python I want to ask you how to target the dist folder that contains all HTML and CSS and js files from the angular 4 apps in flask python server

Because my app is SPA application I have set routes inside angular routing component

When I run about or any other route I get this string message './dist/index.html' And I know I return string message but I want to tell the flask whatever route the user type on URL let the angular to render the page because inside my angular app I have set this pages and is work

any help how to start with flask and angular to build simple REST API

Now I have this file structure

python-angular4-app
                  |___ dist
                  |      |___ index.html
                  |      |___ style.css
                  |      |___ inline.js
                  |      |___ polyfill.js
                  |      |___ vendor.js
                  |      |___ favicon.ico
                  |      |___ assets
                  |
                  |___ server.py

My server.py have this content

from flask import Flask

app = Flask(__name__, )

@app.route('/')
def main():
    return './dist/index.html'


@app.route('/about')
def about():
    return './dist/index.html'


@app.route('/contact')
def contact():
    return './dist/index.html'

if __name__ == "__main__":
    app.run(debug=True)

Best regards George35mk thnx for your help

Answer 1

Since I had this same problem, I hope this answer will help someone looking for it again.

1. First create your angular application and build it. (You will get all the required js files and index.html file inside the 'dist' folder.

2. Create your python + flask web app with required end points.

   from flask import Flask,render_template
   app = Flask(__name__)
   
   @app.route("/")
   def hello():
       return render_template('index.html')
   
   if __name__ == "__main__":
       app.run()
   

3. Create a folder 'templates' inside your python app root folder.

4. Copy your index.html file from the angular dist folder to newly created 'templates' folder.

5. Create a another folder call 'static' inside your python app root folder

6. Then copy all the other static files( JS files and CSS files ) to this new folder.

7. Update your index.html file static file urls like this.

     <script type="text/javascript" src="/static/inline.bundle.js"></script>
   

Flask look static files inside '/root_folder/static' folder and update url relative to this structure.

Done. Now your app will serve on localhost:5000 and angular app will served. Final folder structure will like this,

    /pythondApplication
        |-server.py
        |-templates
        |     -index.html
        |-static
        |     -js files and css files 

Since this is my first answer in stackoverflow,If there is a thing to be corrected, feel free to mention it.

Answer 2

I don't think that it's possible to access Angular 'dist' directory via a REST API. Any routing should be done on the client-side with Angular, and Flask should handle your end-points.

In terms of building your REST API, I'd recommend something like this:

from flask import Flask, jsonify

app = Flask(__name__)

tasks = [
    {
        'id': 1,
        'title': u'Buy groceries',
        'description': u'Milk, Cheese, Pizza, Fruit, Tylenol', 
        'done': False
    },
    {
        'id': 2,
        'title': u'Learn Python',
        'description': u'Need to find a good Python tutorial on the web', 
        'done': False
    }
]

@app.route('/todo/api/v1.0/tasks', methods=['GET'])
def get_tasks():
    return jsonify({'tasks': tasks})

if __name__ == '__main__':
    app.run(debug=True)

This is from a very helpful tutorial on building a basic REST API in Flask.

This will then plug in very nicely to your client-side in Angular:

getInfo() {
 return  this.http.get(
   'http://myapi/id')
   .map((res: Response) => res.json());

}