I've created a simple project with vuejs as the frontend and flask as backend.
The project was constructed by following the example here, thus the resultant file structure is like that the vuejs build files "dist" is on the same folder as that of the driving python script, run.py.
The project was tested and working fine locally now I ran into problems trying to deploy it on my Ubuntu server hosted by digitalocean.
I followed this article to learn how to deploy - the article was well written but I believed I need to change the apache config file (/etc/apache2/sites-available/000-default.conf) a little to specify the static files of my project as shown in the screenshot.
The question is how? I don't know. When I followed the article word by word and launched the web app, it showed errors like:
Loading failed for the <script> with source “http://my_website.com/static/js/manifest.0e78d562f6b86d93f516.js”. vue-amazon:1:1
static is a standard vuejs folder under "dist" in my file structure.
I found the issue has nothing to do with the way how Flask project is deployed - it's about the configuration of the vuejs frontend.
I need to adjust the setting of assetsPublicPath in vuejs's config file, to a proper location where the index.html can find the obfuscated javascripts.
For example, if my project is called "ABC", and i want the url looks like:
http://my-site.com/ABC
I need to have this in the vuejs config file:
env: require('./prod.env'),
index: path.resolve(__dirname, '../../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '../../ABC/dist/',
before I run
npm run build
Related
I have a working python 3.9 Flask app. The latest Pycharm is my IDE. Yesterday I created a new app with a very similar structure. The old app runs and finds/loads all static content just as expected when run through the PyCharm debugger or from the command line with flask run.
The new app will "run" from PyCharm or flask run. It loads the main/home blueprint and serves the correct template. What it does not do is serve any css or js resources in the static folder. Rather, it tries to load them but each resource in the Brave developer tools window has the message:
Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
I have surveyed the file sizes for each css and js file. I have matched the lengths against the developer tools "network" tab response information and it looks like all the sizes match.
I have tried this with FireFox and it just says:
Loading failed for the <script> with source “http://127.0.0.1:5000/static/LIB/jquery/jquery.min.js”.
and the other resources.
I have deleted and recreated the node_modules and the .idea dirs.
Ideas?
Sigh, my problem was with setting the USE_X_SENDFILE Flask config variable. The dev server does not support it and honestly I don't know why I even included it. Removing it fixed my issues.
Thanks entirely to this post:
Flask development server with X-Sendfile
I want to use this chain (Angular, not AngularJS) but don't quite understand how exactly it should work in production. Tutorials and simple logic show two variants:
Separate application servers, for example
Apache
Angular on top of Webpack or something
Django on top of Gunicorn
"Folder-style" project separation, like
project-folder\
angular-folder\
...
django-folder\
...
(some config to make it work)
Does anybody have working boilerplate of such an application? Everything I saw was outdated. Can someone show the right path and where to start?
This wonderful blog post by Jonathan Cox introduced me to the use of Django Webpack Loader, a Django app that reads a webpack stats file and loads the required bundles automatically. It focuses on React, but the idea can be applied to any front-end framework that uses webpack as output, I used Vue with great success.
Basically, your development stack will look like this:
Webpack Dev Server or Express for serving your bundle with hot reload.
Django Dev Server, using the webpack loader's template tags to load the bundle from Express' virtual location.
Then in production:
Use Webpack to build the bundle straight to Django's Static folder
Load the bundle from statics, using webpack loader.
Folder structure should be whatever you want, you can separate both code bases or make a new folder at app-level in your Django project to keep it all together. It shouldn't matter, while you can point to the dist folder with STATICFILES.
I am trying to deploy the most simple Django 1.10.5 project into Google App Engine and am completely stumped.
Upon running gcloud app deploy I am getting the following error when navigating to /...
This is the file structure of my app...
This is my .yaml file...
This is my appengine_config.py file...
I am also getting the following errors in Google Dev Tools network tab...
I am pretty certain the problem lies within my app.yaml file and am very unclear as to what url and handler are doing in this code. Can anyone see what I am doing wrong?
You seem to be quite far off from getting your django based app running on GAE. For example you're missing the lib dir where your version of django should be installed. You may want to go through Running Django on App Engine standard environment
Take a look of GAE log page and search text "raise". If you see something like "sqlite3", the problem might be caused by the default content of DATABASES section in settings.py file. Commenting out this DATABASES section solved my problem("Error: Server Error" only when deployed to GAE; working fine locally).
I am using a digital ocean virtual server to host a django web app. when you create the droplet, it creates a default app in the directory /home/django/django_project/django. However seeing as this isn't the app I want to host, I put my application files into the directory /home/myproject/myapp and updated the gunicorn and nginx configs to point there. However once updating the urls for this app, I am trying to see it online and noticed that the 404 looked like this:
which states that the URLconf is defined in django_project.urls which I had since deleted out of that 'home/django directory. I have reloaded and restarted gunicorn and nginx in an attempt to get django to realize that the project django_project doesn’t exist any more, but no luck. Has anyone run into this before or have any suggestions as to what I should try next?
I'm developing a web application on Google App Engine using Python, I understand how to use basically the app.yaml and manage the different files; now I'd like to upgrade my application and use Polymer. The root folder has this configuration:
/MyApp
/assets
/css
/img
/js
/bower_components
/templates
app.yaml
bower.json
index.yaml
main.py
I'm having a problem with the bower_components, inside that folder Bower put all the polymer elements that I need in different folders and file inside them, for example:
/bower_components
/core-menu
/core-menu.html
/core-scaffold
/core-scaffold.html
How have I to configure my app yaml? I've tried in different ways to say at mylocalhost & appengine about this folder but every time I try to run my project, I can't see no changes respect to a simple html file. Sometimes, using FireBug i can see the platform js is taken from GAE but I don't know how to rightly link this elements to works fine.
There isn't really anything to configure here. These are all static files, exactly the same as the files you have under /assets: so you should point to them in the same way you do with the assets paths.