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

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_templateapp = 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.

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, jsonifyapp = 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());

}