Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

separate frontend and backend#15

vic-cieslak started this conversation inIdeas
Mar 3, 2022· 4 comments· 8 replies
Discussion options

Hi,

I was assessing this stack for my needs, but found that it's not going to fit it.
What I was looking for was something that lets me run django/flask as backend/api.
And completely separate frontend set up withhttps://quasar.dev

Why don't integrate into this?

Quasar can be integrated, but only in progressive (UMD) manner. It means a lot of the features provided by quasar-cli won't be available.
https://quasar.dev/start/pick-quasar-flavour

I found something more fitting herehttps://github.com/masterdubs/djengu

I love your docker-compose examples, they are super high quality and you sharing them is just amazing, thanks for great work.

Just an idea to throw around here, hoping I can provide some valuable info.

You must be logged in to vote

Replies: 4 comments 8 replies

Comment options

I don't know what Quasar is but you can run Django as a back-end using this project, it's already set up to run a Django app using gunicorn. It being an API driven app or not is a choice you make as the developer of the app.

If you want to use a customized front-end that depends on running something that's not esbuild then you can replace esbuild with whatever tool you want to use by switching 1 container but Vue and esbuild go well together. If that also means ripping out Django's templating engine that's also another choice that's done at the app level, it's doable if that's the style you want to build your apps.

You must be logged in to vote
0 replies
Comment options

does this look about right? (in terms of Dockerfile / docker-compose.yml)

https://github.com/wiktorcie/docker-django-example/commit/1c999b6874aa6c587abf9bff73dd7851f28d8ef2

You must be logged in to vote
2 replies
@nickjj
Comment options

Does it work?

Here's an example that breaks up the backend and frontend:https://github.com/nickjj/docker-node-example

It uses Node but the rest of the Docker bits are the same as this Django example. But it demonstrates 1 way of splitting things up into different directories if that's the path you want to take.

@vic-cieslak
Comment options

Yep, it works,
ah, haven't seen this one.
Will check the repo tomorrow and do check against my code.

Comment options

Ok so I modified the Dockerfile to build quasar SPA artifacts in assets image.
I end with dist folder with bunch of css, js and one index.html for SPA.
Any clues how to best serve it? Nginx on host with custom root for it would be ideal. But it's not clear to me how to make those artifacts available on the host (docker volume with them doesn't seem to work container -> host)

I'm trying to come up with good base for quasar + django starter project. I will share it to quasar community once it's good enough.

You must be logged in to vote
5 replies
@nickjj
Comment options

nginx running on the host is what I do and really like it. There is a volume mount set up by default with this project to get the assets on the host (it only volume mounts the public_collected directory which are your finalized assets).

@vic-cieslak
Comment options

hmmm, I swapped build tool from esbuild to quasar-cli like this:

RUN if [ "${NODE_ENV}" != "development" ]; then \  ../run yarn:build:quasar; else mkdir -p /app/public; fi
function yarn:build:quasar {  # Build quasar assets, this is meant to be run from within the assets container  mkdir -p ../public/  quasar build -m spa  cp -r dist/spa/* ../public}

But the artifacts don't seem to show up on host. Any clues?
They show up fine with original esbuild method.
I'm checking on production env.

@nickjj
Comment options

You might want to bring that over to the Quasar's issue tracker or discussion board. Not trying to dismiss you here but I have no experience with it and the esbuild build is working (along with using Webpacker before that). I don't see anything off the bat that might cause issues but I also know nothing about how Quasar works.

@vic-cieslak
Comment options

ok ok, I understand, appreciate your attention spent on this. I don't think it's quasar issue, I think I might be misunderstanding some things about the stack here (docker volume related). Because the quasar build files seem to be created fine.

I went through bunch of your posts and I'm learning something new on every run here. Thanks for all you do.

@nickjj
Comment options

It sounds like you might need to configure Quasar to use the existing assets input directory and output public directory. I would first check to make sure your final collected assets end up in public_collected (bundled and md5 tagged from Django) in the Docker image without volumes in production mode, likewise the /public directory too which is where they would get built in the assets Docker stage (which is what the app Docker stage will copy in when it's ready to run a collect static in production mode).

Comment options

ok I managed to get it working for prod and dev enviroments.
I just had to move the artifacts to /app/public and it works now.

Whole thing didn't required many changes, but it got me scratching my head for few days. I think it's simple enough now.

prod env:

  • builds quasar assets into public_collected/spa that can then be served by nginx.

dev env:

  • hot reload for quasar project works, you change the code and the UI updates.
  • Not accessible at localhost for some reason, but can be reached at container ip (which is showed in the console by quasar, so shouldn't be a big issue)

https://github.com/wiktorcie/docker-django-example/commit/3321a7688753ddbe6113f80ddd08a34c599194e5

Unfortunately I've broken django index page, but it shouldn't matter as admin page works fine with all the styles.

Thanks Nick!

You must be logged in to vote
1 reply
@nickjj
Comment options

No problem, glad you got it working in the end without a ton of changes.

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Ideas
Labels
None yet
2 participants
@vic-cieslak@nickjj

[8]ページ先頭

©2009-2025 Movatter.jp