Build Angular frontend to static resource in Flask (with few hacks)

Last time (https://angular-python-salesforce.blogspot.com/2020/03/join-flask-and-angular-into-one-project.html) we join backend and frontend in Development Mode. But in Production Mode Flask still returns us blank page. Let's fix that. In Production Mode we don't have angular dev server in localhost:4200. Instead we should use compiled frontend bundle from Flask Static Resources. We need to build our frontend but not with a standard way.

First of all update "build" in package.json with this value:

"build": "cd ./frontend && ng build --prod --base-href / --deploy-url /static/app/ --output-path ../backend/static/app && node ../deploy/generate_index_json.js"

all looks simple according to standard Angular Docs except last part. Here generate_index_json.js is our custom script that patches build results to make it friendly for latter use from Flask.

generate_index_json.js:
const fs = require('fs');

console.log('POST BUILD SCRIPT STARTED');

const indexHtml = fs.readFileSync('../backend/static/app/index.html', 'utf8')

let result = indexHtml.match(/<head>((.|\s)*?)<\/head>/);
let headHtml = result[1].trim();;

console.log('---- HEAD ----');
console.log(headHtml);

result = indexHtml.match(/<body>((.|\s)*?)<\/body>/);
let scriptsHtml = result[1].trim();

console.log('---- SCRIPTS ----');
console.log(scriptsHtml);

let data = {
    head: headHtml,
    scripts: scriptsHtml,
}

fs.writeFileSync('../backend/static/app/index.json', JSON.stringify(data));
fs.unlinkSync("../backend/static/app/index.html");

console.log('POST BUILD SCRIPT FINISHED');

This script gets generated index.html and extract required information with links to generated resource. Next it saves this information to index.json file and removes the old index.html. Your ./backend/static/app folder should looks this way

Compiled Angular resources with patched index.json

and index.json should have this content (with different hashes)

Content of index.json with Angular bundles links

Why we did it? Because of filenames with hashes. I don't know yet the better way how to extract bundles filenames with hashes, Angular doesn't offer this possibility. Yes, we can disable hashes in angular compiler at all and hardcode filenames in Home template (like we did it in Development mode), but it will cause a lot of issues with caching latter. As an option we can simulate hashes in Flask itself or enforce cache disabling for static resources, but it is just another options. For me index.html that Angular prepare for us is source of trust and I prefer to re-use it as mush as possible.

Next step is to add support for new index.json to Flask Home template.

- home template controller
@app.route('/')
def home():
    is_development_mode = os.environ.get('FLASK_ENV', 'production') == 'development'
    if is_development_mode:
        return render_template('home.html', is_development_mode=is_development_mode)
    else:
        with open('./backend/static/app/index.json') as json_file:
            resources = json.load(json_file)
        return render_template('home.html', is_development_mode=is_development_mode, resources=resources)

- home.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Frontend from Flask</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    {% if is_development_mode %}
        <base href="/">
    {% else %}
        {{ resources.head | safe }}
    {% endif %}
</head>
<body>
    {% if is_development_mode %}
        <div>
            <script>
                console.log('************************************');
                console.log('************************************');
                console.log('         DEVELOPMENT MODE');
                console.log('************************************');
                console.log('************************************');
            </script>
            <div style="position: fixed; top: 0; right: 0; background-color: #ef4646; color: #fff; padding: 0 7px; z-index: 99999;">DEVELOPMENT MODE</div>
        </div>
        <app-root></app-root>
        <script src="https://localhost:4200/runtime.js" type="module"></script>
        <script src="https://localhost:4200/polyfills.js" type="module"></script>
        <script src="https://localhost:4200/styles.js" type="module"></script>
        <script src="https://localhost:4200/vendor.js" type="module"></script>
        <script src="https://localhost:4200/main.js" type="module"></script>
    {% else %}
        <h2>PRODUCTION MODE</h2>
        <app-root></app-root>
        {{ resources.scripts | safe }}
    {% endif %}
</body>
</html>

I left <h2>PRODUCTION MODE</h2> to be clear that now our angular app is running from compiled bundles in static resource and works inside Flask context. Profit!

Angular app running in Production mode within Flask context


IMPORTANT: Add ./backend/static/app folter to .gitignore. We don't need compiled bundles in our repository. At this moment my .gitignore looks this way:
node_modules
.vscode
backend/static/app
.env
key

Comments

Post a Comment

Popular posts from this blog

HTTPS in local environment for Angular + Flask project.

Image
Sometimes it is important to run project in local environment with HTTPS. For example when you use third party authentication system in our app. In my case I prefer to have local instance similar as mush as possible to the production. Moreover, it’s easy to implement. First what you need is the ssl key. You can follow this article to create it https://devcenter.heroku.com/articles/ssl-certificate-self Create your ssl key in ./key project folder. Finally it should look like this [dmnbrest@~/Documents/myPython/blog2/project/key]$ ls server.crt server.csr server.key Add HTTPS support to the FLASK: Update init section in your backend server file ( ./backend/app.py ) this way if __name__ == "__main__":     context = ('./key/server.crt', './key/server.key')     app.run(ssl_context=context, host='0.0.0.0', debug=True) But now we need to run backend with other command python ./backend/app.py This time you should see this output in
Read more

Salesforce Authentication 2 (Token Validation and Refresh)

Image
In last article we added Salesforce connection setup logic to our application. Now we need to implement connection test logic and token refresh flow.  Connection test flow is a simple request to Salesforce API with access_token. If we receive valid response it means all works fine. In other case we should notify user about problems with Salesforce integration. I mentioned last time when we setup connection and receive response I save it to DB as is as it contains many useful information. And now we can use part of this response. Here is example of OAuth handshake response: { 'access_token': '00Dxxxxxxxxxx', 'refresh_token': '5Aezzzzzzzzzz', 'signature': '8KFGb34p3vMLhSRHHmJZN3Bux9tlcA1+cvgIACw2SG4=', 'scope': 'refresh_token api', 'instance_url': 'https://ap17.salesforce.com', 'id': 'https://login.salesforce.com/id/00D2x000003v71DEAQ/0052x000001S9ojAAC', 'toke
Read more

User authentification with Flask-Login

Image
One important step of project preparation is Security. We plan to publish our app to Heroku where it will be accessible by anyone in the world. Let's make it more secure with Flask-Login ( https://flask-login.readthedocs.io/en/latest/ ). There is one post I will follow. https://www.digitalocean.com/community/tutorials/how-to-add-authentication-to-your-app-with-flask-login But I will simplify it and will use login flow only at this moment as we don't need registration. But for new user creation I will add cli script. To add auth flow to our app we need to create Login View with Controller and some additional service methods for Flask-Login. Also we have to update User model a little bit. backend/models/user.py from models import db from flask_login import UserMixin class User(UserMixin, db.Model): __tablename__ = 'users' id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(255), unique=True, nullable=False) email
Read more