17

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

Improve this question

2 Answers 2

Reset to default
15

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Very nice and detailed guide. But how do I specify the paths for the icons located in the /assets/img folder
1

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

}

Improve this answer

18 Comments

Thank you Gerand but what about the index.html, The python can render html files ??
can you teel mee how to render the index.html when the user hits "/" and if the user hit "about i want to render again the index.html" all this is not work
You need to use the "render_template()" method. So it would be something like : 'return render_template("index.html")'
Also worth mentioning that 'render_template' needs to be imported from 'flask'. Hope this helps! :)
it is angular 4 app this files works perfect in node.js
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.