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

user_5225957 · Answer

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

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

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()

Create a folder 'templates' inside your python app root folder.
Copy your index.html file from the angular dist folder to newly created 'templates' folder.
Create a another folder call 'static' inside your python app root folder
Then copy all the other static files( JS files and CSS files ) to this new folder.
Update your index.html file static file urls like this.
```
  
```

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.

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

My server.py have this content

2 Answers