Convert AngularJS website to Flask

Question

I created an Angular website with ui-router:

angular app structure
|--index.html
|--js
   |--app.js
   |--angular.js 
   |-- ...
|--stylesheets
   |--main.css
   |-- ...
|--template 
   |--navbar.html
   |--about.html
   |-- ...

Each js and css is linked like this:

<script src="js/main.js"></script>

I want to serve this with Flask. I threw everything in the "templates" folder and wrote a simple Flask app:

server.py:

from flask import Flask, make_response

app = Flask(__name__)

@app.route('/')
def view():
    return make_response(open('templates/index.html').read())

app.debug = True

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

flask app
|--server.py
|--templates
   |--index.html
   |--js
      |--app.js
      |--angular.js 
      |-- ...
   |--stylesheets
      |--main.css
      |-- ...
   |--template 
      |--navbar.html
      |--about.html
      |-- ...

None of my file are loading when I go to the root url. How do I serve the Angular files from the Flask app?

dirn · Accepted Answer · 2015-10-11 14:28:18Z

2

You need to render your template. The best way to do that is

@app.route('/')
def view():
    return render_template('index.html')

answered Oct 11, 2015 at 14:28

dirn

21.1k7 gold badges75 silver badges76 bronze badges

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

1 Comment

Remi Guan Over a year ago

Well, I also forgot this. But maybe we need merge our answers? :)

Remi Guan · Accepted Answer · 2015-10-11 14:30:34Z

1

First, move your all of the .js file and the .css file into a static directory and do something like:

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">

Put this in your templates before </head>, it will loads static/main.css.

And this will loads the static/app.js:

<script type="text/javascript" src="{{ url_for('static', filename='app.js') }}"></script>

About why, here is the document.

edited Oct 11, 2015 at 14:30

answered Oct 11, 2015 at 13:31

Remi Guan

22.5k17 gold badges68 silver badges90 bronze badges

2 Comments

dirn Over a year ago

stylesheets won't work here. url_for takes the name of an endpoint, not a folder.

Remi Guan Over a year ago

@dirn Oops, let me fix it. Thanks :)

Collectives™ on Stack Overflow

Convert AngularJS website to Flask

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related