Microsoft Windows. Issue: Make brunch easier to replace
peerreynders
Emily
[quote=“idiot, post:4, topic:5108”]
Hi Emily, I lean towards keeping it simple. My suggestion would be to keep your vuejs client directory out of the phoenix build system. You gain the integrated development and build environment that’s so well supported by vuejs. Create apis in phoenix that your vuejs application can call and update your view using vue. When you’re ready to deploy to production, generate the production build and serve it statically with a proxy of your api calls to your elixir/phoenix api endpoints. The vue production build is in the dist directory but you can configure it to place it anywhere, even directly into your phoenix directory structure if you prefer.[/quote]
Some newbie questions regarding this solution:
If I use 2 separate build tools, Brunch for Phoenix, and Webpack for VueJS, while developing I’m running VueJS on localhost:8080/ & VueJS on http://localhost:4000 simultaneously?
Router:
I imagine I would use the VueJS router on the front ends & not the Phoenix router?
For file structure:
I simply separate VueJS build into a top level client folder, and Phoenix into a top level server folder?
I imagine that Websockets will work passing variables between Phoenix on localhost:8080/ & VueJS on http://localhost:4000 synchronously, so long as they are both running?
2
peerreynders
You can run them together as long as you can run them separately (i.e. something like a personal firewall or account permissions isn’t blocking access to the ports). They just couldn’t be using the same port.
You are still going to use the Phoenix router because that is the server side router and WebSockets are addressed with URIs. So for example you would put something like this in web/router.ex
socket "/ws", Backend do
channel "rooms:lobby", RoomChannel
end
(Content borrowed from here)
Note that you can leave out brunch and eex template support with
mix phoenix.new project_name --no-brunch --no-html
You can still find the client-side phoenix.js library needed for Phoenix channel access under deps/phoenix/priv/phoenix/static
Phoenix mix tasks are itemized here and most of them are explained here.
To access the phoenix channels from the browser you’ll use something like this:
import {Socket} from "phoenix"
...
let socket = new Socket("ws://localhost:4000/ws");
socket.connect();
let chan = socket.chan("rooms:lobby", {});
chan.join().receive("ok", () => {
console.log("Welcome to Phoenix Chat!");
});
(I imagine the import statement may need to be adjusted to comply with the webpack build process).
They are two separate projects … so personally I would keep them entirely separate especially as there is a second server serving the Vue.js pages (so if you are suggesting sibling client (Vue.js dev) and server (Phoenix dev) folders for development that’s ok). I wouldn’t join them if and when you are ready to tackle Phoenix serving the Vue.js pages (and building them together) - and by that point in time Phoenix 1.3 final (with a sightly different folder structure) may be available.
1
adamk
During development you proxy api calls via webpack-dev-server, so you can safely use relative urls from your Vuejs code. In production, you would also proxy the api calls, bt using a different tool, such as nginx or caddy.
You could use both routers. It’s not all-or-nothing here. Say your vue application is served from /app then the vue router would be responsible for everything it can control, ie relative to /app. The answer depends on what you’re trying to build. If you intend using vue for the entire website, say for a admin panel, then just have vue handle everything and setup phoenix appropriately.
Your code would be organized like this:
--src
-- client
-- server
webpack-dev-server can also proxy websockets, so you could use relative urls everywhere.
There’s a demo of this architecture (minus the websockets piece) at GitHub - akeating/pespa: A demonstration of single page applications (Vuejs / Elm) with api server (Elixir/Phoenixframework) using graphql subscriptions. · GitHub
1
acrolink
Do you know of any example projects available on github using VueJS and Phoenix 1.3? Thank you.
1
AstonJ
PragDave has a section on Vue.JS in his online course:
It’s not a comprehensive section but just shows how websockets can be used with something like Vue.
1
amnu3387
Hey look at these two posts, one is not related to VueJs but to separating your javascript so to have certain views render only certain JS, this will be useful when you have several vuejs components and you only want some to be loaded in some views, and others in other views.
https://blog.diacode.com/page-specific-javascript-in-phoenix-framework-pt-1
This other goes on on how to build a chat web app with VueJS and phoenix (has a repo too) - although it’s about a web chat app, since it uses channels you can basically leverage what’s there to build anything that coms with the back-end.
https://medium.com/@jespr/create-a-simple-chat-web-app-using-phoenix-and-vue-js-bc5d82e53f9b
1