woohaaha
Setting up Vite with Phoenix
I’d like to use Vite with Phoenix on a new project and have run into questions that I haven’t seen discussed.
- When starting up, are ya’ll running
npx create-vite .in the./assetsdirectory? If yes, are you removing everything else in the directory? - Are you running the Vite dev server alongside the Phoenix server?
- How are you handling both custom css and tailwindcss?
- I’ve noticed the following code example and am wondering why 3000 is specified since that is neither Vite’s or Phoenix’s default port.
<%= if dev?() do %>
<script type="module" src="http://localhost:3000/@vite/client"></script>
<script type="module" src="http://localhost:3000/js/app.js"></script>
<% else %>
<link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
<script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
<% end %>
Maybe I should be asking if anyone has the series of steps to setup Vite with Phoenix in 2024? 
Thanks all 
Most Liked
LostKobrakai
The default used to be 3000 around V2. But the half-life period in the js ecosystem is so short, that stuff becomes outdated by the hour it seems.
c4710n
Hey, @woohaaha. I have a repo for this - GitHub - dodrio/phoenix_custom_assets: Provides an alternative assets/ of Phoenix for using LiveView and TailwindCSS. · GitHub.
It’s quite a coincidence; I just marked this repository as archived yesterday because I found a simpler method - https://forum.elixirforum.com/t/phoenix-and-the-asset-pipeline/60736/3.
But, you can still follow the repo, it has detailed instructions on how to setup.
Edit: Sorry for replying wrong people.
mike1o1
I’ve recently setup a similar stack. I found these guide to be extremely helpful and kind of picked and chose between both similar approaches.
Basically, I set things up in frontend folder, but could also have been in the assets folder too. I run Vite in a separate process (using the mix watchers) on port 3000, with Vite dev server producing requests to port 4000 where phoenix is running. 90% of the time I access the app on port 3000 (Vite) during development.
I also have the Vite production build copy directly to the phoenix assets directory and can easily do a build and access the full app on port 4000 at any time. I have a catch all controller that serves up the dist index.html file.
I’m very comfortable with React and the tool chains and find myself very productive, though phoenix is really just acting as an API server for now.
Last Post!
bmazaheri
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"