Forums

Hello everyone. I'm a newbie on web technologies making some frontend applications in Angular 4. Managed to host an Angular 4 app on a hosting service but it only allows PHP as backend. Searching for a solution that would allow to build Python backend apps I stumbled upon this site and fell in love with the consoles and tools it provides.

Already ran the Flask tutorial successfully and tried to run render_template switching the html page of the tutorial for the Angular page generated after running ng build --prod. From what I see it's a normal html but when trying to access it I get a blank page with "Failed to load resource: the server responded with a status of 404 (NOT FOUND)" on my JS and CSS files.

I tried refreshing them one by one and get the "net::ERR_ABORTED" error instead.

Also tried to link the index.html page directly using the static files option offered but it gives me the same errors.

Is there something I'm missing or the service only allows to run Python backends?

Also REST apis are the standard way for the frontend and backend to interact?

Thanks a lot for your help!

It is possible to host angular4 on PythonAnywhere.

Do you know which particular js file is not loading? (eg: what's the url)

And what is your code/setup to serve that file?

Hello, thanks a lot for your answer. My page url is:

http://rasa911216.pythonanywhere.com/extropyNOW

and the url's of the files that don't load are:

http://rasa911216.pythonanywhere.com/styles.1b7d3a2be10fb550ef64.bundle.css

http://rasa911216.pythonanywhere.com/inline.b245bc601efcea180573.bundle.js

http://rasa911216.pythonanywhere.com/main.a3a55600629391626457.bundle.js

http://rasa911216.pythonanywhere.com/styles.1b7d3a2be10fb550ef64.bundle.css

they are all files generated by Angular through the ng build --prod command.

I originally placed my Angular page inside a folder called templates and used the address to render it through the Flask command:

return render_template("extropyNOW/index.html")

I tested the path and it worked well but didn't load the page. Then afterwards I placed the folder next to the flask.py file and used the Static Files option in the Web tab of the PythonAnywhere page to load them. It gives me exactly the same error.

My current files are:

-project_folder
   -myflask.py (Here's where I load the server  and try to work with the backend code)
   -webpageFolder (Where I store my Angular 4 frontend)
       -index.html (the compiled Angular 4 webpage)
       - inline.b245bc601efcea180573.bundle.js
       - main.a3a55600629391626457.bundle.js
       - polyfills.f20484b2fa4642e0dca8.bundle.js
       - styles.1b7d3a2be10fb550ef64.bundle.css

That's all I'm using right now. My Flask code is:

# A very simple Flask Hello World app for you to get started with...
from flask import Flask, redirect, render_template, request, url_for
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config["DEBUG"] = True

#To connect to the DB.
SQLALCHEMY_DATABASE_URI ...

@app.route('/', methods=["GET","POST"])
def index():
    if request.method == "GET":
        #return render_template("extropyNOW/index.html")
        return render_template("main_page.html", comments=Comment.query.all())
    #comments.append(request.form["contents"])
    comment = Comment(content=request.form["contents"])
    db.session.add(comment)
db.session.commit()
    return redirect(url_for('index'))

although right now I'm not doing anything with Angular there so it shouldn't be the cause IMO.

That's because your static files are setup incorrectly.

See this.

You should probably serve your static files like this:

http://rasa911216.pythonanywhere.com/static/styles.1b7d3a2be10fb550ef64.bundle.css

instead of

http://rasa911216.pythonanywhere.com/styles.1b7d3a2be10fb550ef64.bundle.css

And then just put all the static files into a particular folder (eg: /home/RASA911216/my-static-stuff)

And then set up a static files mapping of

/static/ -> /home/RASA911216/my-static-stuff