How to use angular build assets inside python flask static?

Question

I am working on application which uses angular7 in the front end and python flask framework in the back end. I m trying to take the angular build ie, dist folder and configuring in flask as per the flask structure.

I am not able to load the images in this server. where images path in the dist is like dist/assets/images .

flask
---app.py
---templates
   ----index.html
---static
   ---- main6gaugsx.js
   ---- runtime7gyg.js
--conf files

I tried to move the these images inside the static folder of flask. But I cannot set the path of images in main6gaugsx.js , since it is bundled code. Also images may increase later point of time. I cant do this changes every time of deployment.

Answer 1

1. Do not move the files manually, it will only complicate the deployment process and be the place of many issues in the future.
2. Try an set your AngularJS output build directory to be the static folder of the Flask application. Usually it is in the webpack configuration. This will ensure that you are not managing the frontend build files manually and also ensure the relative paths in the JS and CSS files would all be preserved.

But the issue would be index.html will also be placed in the static folder and not in the templates folder. To deal with that, set your template_folder during Flask app creation to static/build or wherever the index.html is being placed in the static folder.

# assuming, the angular build is in the statis/build directory
app = Flask(__name__, static_folder='static', template_folder='static/build`)

Answer 2

I changed angular build outputPath to point to static folder.

    "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "my-project/dist/static",// changes
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "src/tsconfig.app.json",
       "assets": [
         "src/assets",
         "src/favicon.ico"
      ],
    },
.
.

    },

moved build static folder inside service file and updated the static_folder and template_folder path in main.py as below.

    cp -r angular/my-project/dist/static service/app 

in main.py.

    app = Flask(__name__, static_folder='static', template_folder='static')

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