separate frontend and backend

[vic-cieslak]

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 with https://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 here https://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.

[nickjj]

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.

[vic-cieslak]

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

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

[nickjj]

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]

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

[vic-cieslak]

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.

[nickjj]

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]

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]

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]

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]

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).

[vic-cieslak]

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!

[nickjj]

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