changed Makefile command and added bundling of JS if needed

This commit is contained in:
anthdm 2024-06-12 18:28:55 +02:00
parent fee204a832
commit 077aa48eed
4 changed files with 7 additions and 6 deletions

View file

@ -63,7 +63,7 @@ make dev
## Hot reloading the browser
Hot reloading is configured by default when running your application in development.
> NOTE: on windows or on in my case (WSL2) you might need to run `make assets` in another terminal to watch for CSS and JS file changes.
> NOTE: on windows or on in my case (WSL2) you might need to run `make watch-assets` in another terminal to watch for CSS and JS file changes.
# Migrations
## Create a new migration

View file

@ -20,12 +20,12 @@ server:
--misc.clean_on_exit true
# run tailwindcss to generate the styles.css bundle in watch mode.
assets:
watch-assets:
tailwindcss -i app/assets/app.css -o ./public/assets/styles.css --watch
# run esbuild to generate the index.js bundle in watch mode.
esbuild:
npx esbuild views/js/index.js --bundle --outdir=public/ --watch
npx esbuild app/assets/index.js --bundle --outdir=public/assets --watch
# watch for any js or css change in the assets/ folder, then reload the browser via templ proxy.
sync_assets:
@ -39,12 +39,13 @@ sync_assets:
# start the application in development
dev:
@make -j4 templ server assets sync_assets
@make -j5 templ server watch-assets watch-esbuild sync_assets
# build the application for production. This will compile your app
# to a single binary with all its assets embedded.
build:
@tailwindcss -i app/assets/app.css -o ./public/assets/styles.css
@npx esbuild app/assets/index.js --bundle --outdir=public/assets --watch
@go build -o bin/app_prod cmd/app/main.go
@echo "compiled you application with all its assets to a single binary => bin/app_prod"

View file

@ -0,0 +1 @@
console.log("if you like superkit consider given it a star on GitHub.")

View file

@ -15,8 +15,7 @@ templ BaseLayout() {
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href={ view.Asset("styles.css") }/>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src={ view.Asset("index.js") }></script>
<!-- Alpine Plugins -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>