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.
I have a single container docker that consists of my flask-based api and a built react application.
How do I make Beanstalk run my flask app and serve my static react app files through nginx?
I have found various potential solutions, but being completely new to Beanstalk it is difficult for me to understand the implications I choose a path to proceed.
.ebextensions
I assume I can completely rewrite nginx config, but it seems excessive if all I want is to serve some static files?
2. Copy files to nginx folder.
This page describes how to configure a custom docker container and in what nginx folder files should go
3. Tell EB to serve static files through UI or CLI
This discussion covers it. It feels "wrong" going outside docker for getting this to work.
I developed an app and I want to deploy it on a server. For backend I use Django and for frontend React. The communication between React and Django is via rest api. I also have an Arduino which communicates with Django via rest. I use nginx on server. What is the best way how to deploy this app? Thanks a lot
Well you need a server, popular choices to rent one are AWS or Heroku. Both have a free limited trial and tutorials that explain to you how to deploy your project. Heroku should be a easier to use, while AWS provides more features. Links:
-AWS Elastic Beanstalk: https://aws.amazon.com/it/elasticbeanstalk/
-Heroku: https://www.heroku.com
There are lots of available alternatives of build and orchestration tools.
For example Ansible has many modules for django, nginx, npm, databases... that allow to perform any actions and commands whatever you want. Just configure some webhooks in your repository settings so you could trigger autodeploy by pushing new changes or run it manually if needed.
What i did was use my VPS to host the Django app, and then used graphql (similar to REST) to communicate from React to Django.
The general steps are:
1) on the VPS server, you will have a code directory w/ your Django app, like on your local machine. Just use git to get it there.
2) create a virtualenv on the VPS server with all your needed django/python modules (added via pip) in your code directory
3) create an nginx conf file. i use nginx to proxy_pass to apache, which calls the python app. my nginx listens on port 80, and has a line this this: proxy_pass http://admin.mysite.com:81;. Create a link to this config in /etc/nginx/sites-enabled/ and restart nginx.
4) create an apache conf file with <VirtualHost *:81> with key lines such as: WSGIDaemonProcess and WSGIScriptAlias which point to your virtual env and your wsgi.py file. make sure to enable this too ('a2ensite`).
5) your project's wsgi.py file will point to your app's settings.
6) restart apache and nginx.
That's the real rough outline, and there are tutorials written. Just search for 'django uwsgi nginx' and that will get your django app running, with the proper endpoints for your react app to call.
you can use 1 server with nginx and gunicorn and make the axios to point to localhost for the react app, create 1 gunicorn for the django and 2 nginx 1 for the django and the other for the react,
Gunicorn use the socket and service file you can use the below link (it will help you for the deployment of django):
https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-18-04
for the react app it is easier, you can make the build on your local and clone the project on the server (make the app to point to localhost)
just create nginx file with the belw:
server {
server_name yourdomain.com;
root /project-path/;
index index.html index.htm;
location / {
try_files $uri /index.html =404;
}
}
We run a "classic" django website (rendering templates in the backend) and host the complete source code on github.
We also use the "classic" folder structure:
/source/ # For python related django code and packages
/templates/ # Just the normal django templates
/static/img/ # static images
/static/sass/ # Sass files
/static/css/ # Generated css files from sass (django-pipeline)
For the development purpose we use vagrant and ssh into the machine to start the django development server. Changes are pushed to github.
This is our current state and it works good for developer which are involved in the project.
But we also have for example external designers which should not have access to the backend.
Problem:
Designer should only have access to the /static/ folder (locally and on git) or if they also want to modify the html structure they need access to the /static/ and /templates/ folder.
So how can they run the Project without having access to the backend files? (Policy, installing and explaining vagrant is time consuming for non developers ...)
I couldn't find a solution but I have the following idea:
Create for the static folder a new repository
Create a server with everything what is needed to run the server
Mount the local /static/ (and /templates/) folder from the developer on the server. So that the local changes are served by the server. That way the designer don't need access to the backend source and also don't need the vagrant overhead. (Not sure how to solve this problem)
This is currently the only way which I see. Is there maybe a better solution and how can I implement step 3?
I've recently adopted this method of serving our static and media files for our docker containers running a wagtail django site.
Serving static and media files from S3 wagtail
I've just realised that I'm going to need to change some things locally in order to be able to serve static files :-(
I don't want to run the collectstatic command for local dev, as that's going to put a load of uneccessary wagtailadmin stuff into the static folder which will then be in the github repo.
Does anyone know how I'd serve the wagtail admin files without running collectstatic?