Phoenix LiveView without webpack

Phoenix Forum Questions / Help
, ,
2

I don’t like Webpack either. Here’s my setup.

assets/js/app.js:

let phx = Phoenix
let phxLV = phoenix_live_view

let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
let liveSocket = new phxLV.LiveSocket('/live', phx.Socket, {params: {_csrf_token: csrfToken}})

// Show progress bar on live navigation and form submits.
window.addEventListener('phx:page-loading-start', info => NProgress.start())
window.addEventListener('phx:page-loading-stop', info => NProgress.done())

// Connect if there are any LiveViews on the page.
liveSocket.connect()

// Expose liveSocket on window for web console debug logs and latency simulation:
// >> liveSocket.enableDebug()
// >> liveSocket.enableLatencySim(1000)
window.liveSocket = liveSocket

assets/Makefile for building assets:

# Make targets for assets.

css:
		@echo 'Building CSS...'
		@mkdir -p ../priv/static/css
		@cat \
			vendor/nprogress-0.2.0/nprogress.css \
			css/app.css > ../priv/static/css/app.css

js:
		@echo 'Building JS...'
		@mkdir -p ../priv/static/js
		@cat \
			../deps/phoenix/priv/static/phoenix.js \
			../deps/phoenix_html/priv/static/phoenix_html.js \
			../deps/phoenix_live_view/priv/static/phoenix_live_view.js \
			vendor/nprogress-0.2.0/nprogress.js \
			js/app.js > ../priv/static/js/app.js

static:
		@echo 'Building static...'
		@cp -R static/* ../priv/static/

clean:
		@echo 'Cleaning assets...'
		@rm -rf ../priv/static/*

build: css js static

.PHONY: css js static

root.html.eex excerpt:

    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
    <script src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>

I need to add JS and CSS minification, but that’s coming along later.

9 Likes