I’m working on a greenfield webapp. The stack I’d like to try is Vue on top of Phoenix. I’m not new to vue, but I’m new to Phoenix.
I wonder how you all have been addressing the js build chain at development & build time.
I’d love to be able to use the vue cli as much as possible. JS tooling is definitely not my strong suit and so far I’ve found it incredibly useful, with super sane defaults and really cool features (ex, modern mode )
However, one side effect of using vue-cli is that webpack config is kind of abstracted away.
Right now I’m thinking about structuring my project as follows:
Start a new phoenix project with --no-webpack ;
Start a vue project using vue-cli-service , with these two changes:
priv/static should be the build target
lib/myapp/templates/layout/app.html.eex should be the index_path for vue-cli-service
Would this work? Anyone here using vue & phoenix have a similar setup?
As well, how do you handle developing the vue component of your app (ie, leveraging vue-cli-service serve ) with such a setup?
Personally, I run them completely separately in development. And have a shell script in the Vue project that builds the release then rsync’s it into a folder in the Phoenix project when I’m ready to push out a release.
Thanks! I suppose that makes sense. So you have Phonenix serve your static vue app? Just for clarification, does this mean that your phoenix templates/layout/app.html.eex is actually the vue index page? Where do you have a <div id="app"> (or similar), in templates/layout/app.html.eex or in templates/pages/index.html.eex ?
Sorry for the follow up; just trying to figure out how to marry the phoenix pages with the index page created by vue.
In dev, I have a dev (Node) server serving the Vue app, which talks to the Phoenix server, websockets in my case, but could just a well be a REST API. In production, the Phoenix server just serves the Vue app as static assets.
I don’t. If I’m using the cli I use it standalone. The vue cli doesn’t do a good job integrating with existing frameworks, I believe this is an oversight and it will be resolved but it doesn’t seem to be a priority. There are some open issues and ongoing discussions around this. I have a hard time accepting the whole “Just output the index.html file where your backend app will server it” There are many cases where people don’t want to replace the entire rendered page with vue. I love vue as a frontend framework because you can use it in many different forms. From adding it from the cdn and sprinkle in some components all the way to full SPA. The vue-cli really pushes towards SPA. Now that phoenix uses webpack adding vue (and using single file components) is as easy as adding the vue loader.
In fact, if you just have a bunch of static pages along with a walled section (like user area, that doesn’t need to be SEOed) then nuxt generate and deploying that as a static website is great (you can also use Aws S3 and distribute the frontend through cloudfront for instance). If you have a lot of dynamic generated pages that you need to have SEOed then indeed you need to have a back-end server, or generate the dynamic bits (which can become overly complex easily and require a pipeline for continuous generation & deployment).
Sorry for re-spawning this thread, but I’m struggling with something similar. So far, I think I understood the gist of the responses here, but just to re-cap, can someone please validate if the following ideas are correct? I’d like to use VueJs/Apollo client for building the front-end of my app, and Phoenix 1.4/Absinthe for serving GraphQL responses.
With the proposed setup:
The front-end app built with VueJS does not have to be integrated in the same project with the Phoenix back-end app
In fact, the front-end app can be worked on independently from the back-end (planning to mock all GraphQL responses anyway while working on the front-end first)
The Phoenix back-end app does not need to have any JS build tools, since it does not serve any static content. Its sole purpose is to serve the GraphQL queries. As suggested before, this can be achieved by creating the Phoenix app with the --no-webpack --no-html arguments.
The front-end can be deployed as a static site to AWS S3 to leverage distribution through Cloudfront
The front-end app (regardless from where it is served in Cloudfront) would send the GraphQL requests to the same central Phoenix app
Since the VueJS app would be a walled section (ie app.mysite.com) requiring the user to log in, it’s not supposed to be SEO friendly anyway, so no concerns needed about that
The content site (mysite.com) can be built independently with other tools for content management like Hugo, Wordpress, etc
(This last one item is something I’m curious how to solve. Supposedly, we can use Cloudfront to make sure the front-end is served with no bottlenecks. Could something similar be used to serve the Phoenix back-end, but keep the same GraphQL endpoint URI? Or, am I being too paranoid about this, given that Phoenix can handle millions of requests at once, which means this should be of no concerns until it becomes an issue?)
Is this a valid way to use an Elixir/Phoenix app? I know Phoenix is touted for being exceptionally efficient at rendering templates, so if I’m only using it as a GraphQL server, am I losing any of Elixir’s/Phoenix’s advantages?
Would something like this work for a production ready application? Appreciate any comments or concerns!
I’m not exactly sure if primary reason to use Cloudfront is eliminating any kind of bottlenecks.
I guess you are a bit paranoid, it should be fine. But remember that Phoenix can handle so many requests at once only if it has enough resources .
Totally valid. You don’t lose any advantages if you use it purely for API.
Any news since a year ago? Have you applied successfully the approach you described?
Below is the context/reason for my question:
I’m considering a career switch and I decided to use Elixir/Phoenix (OTP).
I want to build for sure web + mobile apps (maybe target also smart watch and maybe IoT?).
I think of building PWAs to span all targets with mainly 1 code base (as closely to native mobile apps for the mobile part of my target).
However, so far there’s no home-made front-end framework for Phoenix … except maybe LiveView but it doesn’t support offline scenario’s (so far - maybe BEAM in local? When? Or compile to WASM? Roadmap?).
So in order to stay with Elixir/Phoenix I feel forced to choose between:
using LiveView and gaining enormous productivity for many use cases but failing for real mobile use cases
using LiveView and inventing a solution myself for the gap (not realistic, I guess?)
I considered ELM, but there’s too much controversy around it (small user base, support?, LT-continuity? …).
Vue seems to be the 2nd best choice (after LiveView if it were fully mature) to get up-and-running fast.
There’s a lot of tooling around it and it has nativescript …
What’s your advice, assuming you have used Vue+Phoenix in the mean time?
I don’t know if this is going to be useful to you. But I will try anyway :D.
Now coming to development, I am a fan of separating frontend from backend. This allows independent development of both and facilitates decoupling. Deploying Vue with Phoenix is easy. I just compile Vue to a single JS file and serve it using Nginx. So my index page shows Vue app. Vue calls into Phoenix using /api url. All calls to /api is redirected by nginx to my Phoenix listening on say port 4000. When combined with Docker, the deployment is also very pleasant. In case you are interested you can also check out my blog post for more info. Have a nice day
Thanks a lot.
Sorry for my late reply, not about not being interested, I was drawn in work (despite lock down, lucky me).
I’ll certainly have a look at your blog post! Thanks for your post.
Lately LiveView is getting better and better … I’m wondering how long it will take before the “offline” issue is tackeled, and then we probably don’t need anything else anymore :-).