404 not found and disallowed mime type when serving svelteKit front-end with Flask server - flask

So I've been trying to serve my svelteKit app using Flask but it seems like Flask doesn't getting any assets such as css or js. Maybe it was due to my folder stucture configuration using FLASK? Does anyone have the solution for this? the npm run preview seems to be working just fine.
This is how I set up the Flask app:
app = Flask(__name__,static_folder="static",template_folder="build", static_url_path="/build/static")
Stucture of the built project
Script tag inside index.html
The front-end when served
I've tried changing the import path inside index.html script tag as well as ensuring the files are existed in the location but nothing changed.

Related

Flask serving images locally, but not once deployed to Google App Engine

A flask app is serving a bunch of .js/.css/image files from the /static folder. It is deployed to Google App Engine behind Cloudflare.
I have no problem processing .js and .css files - they are served with no errors both locally and when deployed. Also the images from the /static/icons folder that have been added previously seem to be served ok.
I'm adding a new image file to the /static folder and it serves normally locally but when I deploy the app to Google App Engine it returns a 404 error.
What I tried:
Checked to source hosted at Google App Engine -- the file is there.
Tried both .png and .webp extensions
Turning Cloudflare cache off (development mode)
Adding the handlers section to the app.yaml:
handlers:
- url: /static
static_dir: static
What am I doing wrong?
You can use cloud storage for serving static files. Please check the following documentation about how to implement it.

I have deployed my Django App on Microsoft Azure and Static files are not displaying, only html

I've deployed a Django app on Azure and run it, everything was working fine css, images, js. After i run Gunicorn to automate the site then Only skeleton HTML displayed, css, images and js disappeared.
this is the Erro:
/home/honest/venv/lib/python3.6/site-packages/django/core/handlers/base.py:58: FutureWarning: TemplateForDeviceMiddleware is deprecated. Please remove it from your middleware settings.
mw_instance = mw_class()
/home/honest/venv/lib/python3.6/site-packages/django/core/handlers/base.py:58: FutureWarning: TemplateForHostMiddleware is deprecated. Please upgrade to the template loader.
Not Found: /static/images/sample/slider/img7.png/
May i know if i need to configure WhiteNoise for gunicorn on Azure?
Do i Need to edit my HTML templates to point to static folder in Azure?
I tried some of the solutions i saw here like setting DEBURG to True set path for static files in Settings.py but it couldn't help.
I will be glad receiving a step by step solution to this.
Thanks for the assistence.

Flask serving Vue.js bundle file. Re-compile on change?

I'm using flask as my backend and Vue.js for my frontend. I created my VueJS project with vue-cli.
The way I have my project setup right now is that my backend is serving my static files. I, npm run build, and output the bundle files to my backend.
Everything works. It's just annoying to build every time.
I would like to re-compile my bundle every time I make changes to Vue. Is this possible? Modify my webpack?
Note: My project/flask is dockerized too.
This is what I was looking for: https://github.com/vuejs/vue-cli/issues/1120 then I found https://www.npmjs.com/package/vue-cli-plugin-build-watch

Multiple Django apps with each having a react frontend

I have a Django aplication (+REST framework) with pluggable Django apps (which are discovered using distutils' entry points, and can be developed independetly from each other, and installed via pip). This works well so far.
The main app should provide a basic index.html which dynamically loads React components, and each app should be possible to add React components as plugins, which are combined on the frontend then.
But: How the heck am I supposed to place my client directories into each app, so that they are found for collecting all the static files?
Should I put a react app into /my-app1/client and /my-app2/client?
my-application/
core-app/
client/
react files etc
static/
models.py
...
plugin-app1/
client/
react files etc
static/
models.py
...
And tell Webpack/brunch/whatever to compile all the css/js etc files into /my-app1/static, followed by ./manage.py collectstatic then?
Is there a better approach to collect distributed react "plugin" in dfferent Django apps into one static directory?
Can brunch.io do this? Webpack? Another? Own script?
It would be nice to have something like brunch watch - to have hot-updated all changed files instantly. This works for one directory, but not for a distributed net of plugin directories, right?
Or is this completely thought wrong? Please help.

Is it possible to run an ember-cli app without an HTTP server?

I've been working on an ember app and I'm trying to create a production build so my manager can look at it, I ran
ember build --environment=production
but it when I open the index.html file I get a 404 error for my app.css and app.js files, this only happens when the files are not served by an HTTP server. Is it possible to run the files locally?
Not really, when using the file URI scheme file://path/to/your/app the relative paths used in index.html won't be resolved properly. It will also break the router even if you correct the paths manually.