changed Makefile command and added bundling of JS if needed
This commit is contained in:
parent
fee204a832
commit
077aa48eed
4 changed files with 7 additions and 6 deletions
|
@ -63,7 +63,7 @@ make dev
|
||||||
## Hot reloading the browser
|
## Hot reloading the browser
|
||||||
Hot reloading is configured by default when running your application in development.
|
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
|
# Migrations
|
||||||
## Create a new migration
|
## Create a new migration
|
||||||
|
|
|
@ -20,12 +20,12 @@ server:
|
||||||
--misc.clean_on_exit true
|
--misc.clean_on_exit true
|
||||||
|
|
||||||
# run tailwindcss to generate the styles.css bundle in watch mode.
|
# 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
|
tailwindcss -i app/assets/app.css -o ./public/assets/styles.css --watch
|
||||||
|
|
||||||
# run esbuild to generate the index.js bundle in watch mode.
|
# run esbuild to generate the index.js bundle in watch mode.
|
||||||
esbuild:
|
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.
|
# watch for any js or css change in the assets/ folder, then reload the browser via templ proxy.
|
||||||
sync_assets:
|
sync_assets:
|
||||||
|
@ -39,12 +39,13 @@ sync_assets:
|
||||||
|
|
||||||
# start the application in development
|
# start the application in development
|
||||||
dev:
|
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
|
# build the application for production. This will compile your app
|
||||||
# to a single binary with all its assets embedded.
|
# to a single binary with all its assets embedded.
|
||||||
build:
|
build:
|
||||||
@tailwindcss -i app/assets/app.css -o ./public/assets/styles.css
|
@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
|
@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"
|
@echo "compiled you application with all its assets to a single binary => bin/app_prod"
|
||||||
|
|
||||||
|
|
1
bootstrap/app/assets/index.js
Normal file
1
bootstrap/app/assets/index.js
Normal file
|
@ -0,0 +1 @@
|
||||||
|
console.log("if you like superkit consider given it a star on GitHub.")
|
|
@ -15,8 +15,7 @@ templ BaseLayout() {
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<link rel="stylesheet" href={ view.Asset("styles.css") }/>
|
<link rel="stylesheet" href={ view.Asset("styles.css") }/>
|
||||||
<!-- Jquery -->
|
<script src={ view.Asset("index.js") }></script>
|
||||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
|
|
||||||
<!-- Alpine Plugins -->
|
<!-- 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/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>
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||||
|
|
Loading…
Reference in a new issue