Forums

I have a website hosted on PythonAnywhere that is generated via a Flask app with the Jinja2 template engine. I recently had an idea for a more focused app that may or may not be a standalone thing. A friend of mine, who's a professional web developer, recommended the Angular framework because it's really easy to convert to a web app to a mobile app with Capacitor. I decided to give this a go to see if I could get to grips with it.

I should say, at this point, that – whilst I am a programmer in 'real life' – I'm only a hobbyist when it comes to websites and app development, and the kind of programming I do on a day-to-day basis is very different.

Anyway, I gave Angular a go by working through their tutorials and I have to say that I'm very impressed. The hierarchical and encapsulated structure of the different components all feels much more programmatic and logical to me. The use of Typescript has less of a Wild West feel to it than ordinary Javascript too. I don't think I'll ever get on with CSS, but that's a different story... I managed to write a Flask backend that passed JSON back and forth from my Angular frontend and it all looks promising.

So far, so good, but I'm now wondering if it's worth it. Whilst I definitely think it's an improvement, it's much less familiar to me, and having distinct front and backends requires a whole different way of thinking: things that were previously trivial now require more thought.

Thinking ahead, one stumbling block may be the deployment of the app to PythonAnywhere, so I wanted to ask whether this is easy to do, and whether there are any guides to help me? I did a search and found a few things that indicated it was viable, but no detailed instructions on how to do it.

Specifically, I'm initially thinking that I'll add the backend needed for the new app to my existing Flask app (the one which generates my website), then host the new Angular app in an iframe. This then leaves open the possibility of converting to a standalone mobile app in the future, should I ever get this far. Does anyone have any inkling for whether this is possible? i.e. is it possible to have a 'mixed' website on PythonAnywhere where some bits are generated via Jinja2/renderTemplate etc. and some from Angular?

Sorry for my general ignorance and the generally nebulous nature of my query. If I had a few weeks to sit down and work though this properly, then I'd have more of a grip on it, but unfortunately I have to fit my learning in between work and children!

Finally, what are people's general thoughts on the benefits of Angular as a package? Is it worth it? My path of least resistance is just to use Flask for everything and abandon the idea of ever making it a standalone app.

In general, you can host a site using pretty much any JS frontend framework on PythonAnywhere. If you were to use React, then you'd need to install Node in order to compile the frontend, but that's not too difficult. You might need to do that with modern Angular, too -- I'm not sure, because the only version I have experience with is v1, which was a long time ago!

But in general, you shouldn't have any problems with a mix-and-match approach where some of your code is rendered using Jinja2 and some using Angular, and I don't think you'd even need to put any of it in an iframe. PythonAnywhere itself started off as a pure Django site, using template rendering, which is essentially equivalent to your Flask setup. Then later on, we added on Angular, then React, and then we migrated the Angular to React. So there was a time when we were using all three methods, and it all worked fine (though it wasn't super-maintainable, which is why we decided to standardise).

In terms of how to set it up -- all you really need to do is make sure that the JavaScript that you want to run in the browser is available via static files and is loaded up using tags in your templates, and then make sure that you write a sensible REST-ful backend that can handle queries from the frontend. Any Angular tutorial will explain the setup that you need; there's nothing specific to PythonAnywhere required except in the basic mechanics of how you set up the static file mappings, which is all covered in the help page I linked to above.

[In case you're wondering why we landed on React rather than sticking to Angular: it just happened to be the framework with the most community support at the time that we made our choice. Right now, both of them are great frameworks and if you have a friend who can help with Angular, you're definitely best off sticking with it!]

Thanks for the very informative reply. That's really helpful. If you don't mind me asking, what were your original motivations for moving away from the Django template rendering approach to Angular? My aesthetic instincts tell me it's the right move to make, but my pragmatic instincts are telling me to stick with what I know (Jinja2).

We started the move because there were some parts of out site that would benefit from the more live updating of angular and react.

Thanks.