├── .nvmrc
├── .gitignore
├── public
    └── favicon.ico
├── .env.example
├── prettier.config.js
├── helpers
    ├── delay.js
    └── getServerData.js
├── plugins
    ├── formbody.js
    ├── static.js
    ├── templating.js
    └── session.js
├── postcss.config.js
├── routes
    ├── logout.js
    ├── login.js
    ├── pages.js
    ├── userCreate.js
    └── userUpdate.js
├── bundle
    ├── main.pcss
    └── main.js
├── views
    ├── home.twig
    ├── partials
    │   ├── layout.twig
    │   ├── header.twig
    │   └── alert.twig
    ├── login.twig
    ├── create.twig
    ├── account.twig
    └── svg
    │   └── logo.svg
├── tailwind.config.js
├── models
    └── User.js
├── tests
    ├── routes
    │   ├── example.test.js
    │   └── root.test.js
    ├── plugins
    │   └── support.test.js
    └── helper.js
├── app.js
├── README.md
└── package.json


/.nvmrc:
--------------------------------------------------------------------------------
1 | 16.8.0
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .env
3 | node_modules
4 | public/_compiled
5 | secret-key
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattwaler/fastify-starter/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | DATABASE='mongodb://localhost:27017/fastify'
2 | SALT_ROUNDS=4
3 | PORT=3000
4 | FASTIFY_ADDRESS=127.0.0.1
5 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   trailingComma: "es5",
3 |   semi: false,
4 |   singleQuote: true,
5 | }
6 | 


--------------------------------------------------------------------------------
/helpers/delay.js:
--------------------------------------------------------------------------------
1 | module.exports = async function delay(ms) {
2 |   return new Promise((resolve) => {
3 |     setTimeout(() => resolve(), ms)
4 |   })
5 | }
6 | 


--------------------------------------------------------------------------------
/plugins/formbody.js:
--------------------------------------------------------------------------------
1 | const fp = require('fastify-plugin')
2 | 
3 | module.exports = fp(async function (fastify, opts) {
4 |   fastify.register(require('@fastify/formbody'))
5 | })
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [
3 |     require('postcss-import'),
4 |     require('tailwindcss/nesting'),
5 |     require('tailwindcss'),
6 |   ],
7 | }
8 | 


--------------------------------------------------------------------------------
/routes/logout.js:
--------------------------------------------------------------------------------
1 | module.exports = async function (fastify, opts) {
2 |   fastify.get('/api/logout', async function (request, reply) {
3 |     request.session.delete('session')
4 |     return reply.redirect('/')
5 |   })
6 | }
7 | 


--------------------------------------------------------------------------------
/plugins/static.js:
--------------------------------------------------------------------------------
1 | const fp = require('fastify-plugin')
2 | const path = require('path')
3 | 
4 | module.exports = fp(async function (fastify, opts) {
5 |   fastify.register(require('@fastify/static'), {
6 |     root: path.join(__dirname, '../', 'public'),
7 |   })
8 | })
9 | 


--------------------------------------------------------------------------------
/bundle/main.pcss:
--------------------------------------------------------------------------------
 1 | @import 'tailwindcss/base';
 2 | @import 'tailwindcss/components';
 3 | @import 'tailwindcss/utilities';
 4 | 
 5 | @layer base {
 6 |   html, body {
 7 |     @apply w-full overflow-x-hidden antialiased text-gray-900 font-sans;
 8 |   }
 9 | 
10 |   * {
11 |     @apply relative;
12 |   }
13 | 
14 |   [x-cloak] {
15 |     @apply hidden;
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/plugins/templating.js:
--------------------------------------------------------------------------------
 1 | const fp = require('fastify-plugin')
 2 | const path = require('path')
 3 | 
 4 | module.exports = fp(async function (fastify, opts) {
 5 |   fastify.register(require('@fastify/view'), {
 6 |     engine: {
 7 |       twig: require('twig')
 8 |     },
 9 |     includeViewExtension: true,
10 |     root: path.join(__dirname, '../', 'views'),
11 |   })
12 | })
13 | 


--------------------------------------------------------------------------------
/views/home.twig:
--------------------------------------------------------------------------------
 1 | {% extends 'partials/layout.twig' %}
 2 | {% set title = 'Home' %}
 3 | 
 4 | {% block body %}
 5 |   <section class="container py-16">
 6 |     <h1 class="text-4xl font-black">
 7 |       Hello, {{ user.name ?? user.email ?? 'guest' }}!
 8 |     </h1>
 9 |     <p class="mt-2 text-lg">Welcome to my fastify starter project! Hope you like it.</p>
10 |   </section>
11 | {% endblock %}
12 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: [
 3 |     './views/**/*.twig',
 4 |   ],
 5 |   theme: {
 6 |     container: {
 7 |       center: true,
 8 |       padding: '2rem',
 9 |     },
10 |     debugScreens: {
11 |       position: ['bottom', 'right'],
12 |     },
13 |   },
14 |   plugins: [
15 |     require('@tailwindcss/forms'),
16 |     require('tailwindcss-debug-screens'),
17 |   ],
18 | 
19 | }
20 | 


--------------------------------------------------------------------------------
/plugins/session.js:
--------------------------------------------------------------------------------
 1 | const fp = require('fastify-plugin')
 2 | const { readFileSync } = require('fs')
 3 | const path = require('path')
 4 | 
 5 | module.exports = fp(async function (fastify, opts) {
 6 |   fastify.register(require('@fastify/secure-session'), {
 7 |     cookieName: 'session',
 8 |     key: readFileSync(path.join(__dirname, '../', 'secret-key')),
 9 |     cookie: {
10 |       path: '/'
11 |     }
12 |   })
13 | })
14 | 


--------------------------------------------------------------------------------
/models/User.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose')
 2 | 
 3 | const UserSchema = new mongoose.Schema({
 4 |   email: {
 5 |     type: String,
 6 |     required: true,
 7 |     unique: true,
 8 |     maxlength: 64,
 9 |   },
10 |   password: {
11 |     type: String,
12 |     required: true,
13 |   },
14 |   name: {
15 |     type: String,
16 |   }
17 | })
18 | 
19 | module.exports = mongoose.models.User || mongoose.model('User', UserSchema)
20 | 


--------------------------------------------------------------------------------
/helpers/getServerData.js:
--------------------------------------------------------------------------------
 1 | const User = require('../models/User')
 2 | 
 3 | module.exports = async function getServerData(request) {
 4 |   const session = request.session.get('session')
 5 |   let data = {
 6 |     devMode: process.env.NODE_ENV !== 'production'
 7 |   }
 8 |   if (session) {
 9 |     const user = await User.findById(session.id)
10 |     data = { ...data, user }
11 |   }
12 |   return {
13 |     data,
14 |     session,
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/bundle/main.js:
--------------------------------------------------------------------------------
 1 | import 'htmx.org'
 2 | import Alpine from 'alpinejs'
 3 | import axios from 'axios'
 4 | 
 5 | // Toss these libraries on the window for ease of use.
 6 | window.axios = axios
 7 | window.Alpine = Alpine
 8 | 
 9 | // Start Alpine when the page is ready.
10 | window.addEventListener('DOMContentLoaded', (event) => {
11 |   Alpine.start()
12 | })
13 | 
14 | // Restart Alpine when the DOM is altered by HTMX.
15 | document.body.addEventListener('htmx:afterSwap', () => {
16 |   Alpine.start()
17 | })
18 | 


--------------------------------------------------------------------------------
/views/partials/layout.twig:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html class="{{ devMode ? 'debug-screens' }}" lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <link rel="stylesheet" href="/_compiled/main.bundle.css">
 8 |   <script defer src="/_compiled/main.bundle.js"></script>
 9 |   <title>{{ title }}</title>
10 |   {{ block('head') }}
11 | </head>
12 | <body hx-boost="true">
13 |   {% include 'header.twig' %}
14 |   {{ block('body') }}
15 |   <div id="alert"></div>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/tests/routes/example.test.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | const { test } = require('tap')
 4 | const { build } = require('../helper')
 5 | 
 6 | test('example is loaded', async (t) => {
 7 |   const app = build(t)
 8 | 
 9 |   const res = await app.inject({
10 |     url: '/example'
11 |   })
12 |   t.equal(res.payload, 'this is an example')
13 | })
14 | 
15 | // inject callback style:
16 | //
17 | // test('example is loaded', (t) => {
18 | //   t.plan(2)
19 | //   const app = build(t)
20 | //
21 | //   app.inject({
22 | //     url: '/example'
23 | //   }, (err, res) => {
24 | //     t.error(err)
25 | //     t.equal(res.payload, 'this is an example')
26 | //   })
27 | // })
28 | 


--------------------------------------------------------------------------------
/tests/routes/root.test.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | const { test } = require('tap')
 4 | const { build } = require('../helper')
 5 | 
 6 | test('default root route', async (t) => {
 7 |   const app = build(t)
 8 | 
 9 |   const res = await app.inject({
10 |     url: '/'
11 |   })
12 |   t.deepEqual(JSON.parse(res.payload), { root: true })
13 | })
14 | 
15 | // inject callback style:
16 | //
17 | // test('default root route', (t) => {
18 | //   t.plan(2)
19 | //   const app = build(t)
20 | //
21 | //   app.inject({
22 | //     url: '/'
23 | //   }, (err, res) => {
24 | //     t.error(err)
25 | //     t.deepEqual(JSON.parse(res.payload), { root: true })
26 | //   })
27 | // })
28 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | require('dotenv').config()
 2 | const path = require('path')
 3 | const AutoLoad = require('@fastify/autoload')
 4 | const mongoose = require('mongoose')
 5 | 
 6 | module.exports = async function (fastify, opts) {
 7 | 
 8 |   // Database connection
 9 |   mongoose.set('strictQuery', false)
10 |   await mongoose.connect(process.env.DATABASE)
11 | 
12 |   // Load all plugins
13 |   fastify.register(AutoLoad, {
14 |     dir: path.join(__dirname, 'plugins'),
15 |     options: Object.assign({}, opts)
16 |   })
17 | 
18 |   // Load all routes
19 |   fastify.register(AutoLoad, {
20 |     dir: path.join(__dirname, 'routes'),
21 |     options: Object.assign({}, opts)
22 |   })
23 | 
24 | }
25 | 


--------------------------------------------------------------------------------
/tests/plugins/support.test.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | const { test } = require('tap')
 4 | const Fastify = require('fastify')
 5 | const Support = require('../../plugins/support')
 6 | 
 7 | test('support works standalone', async (t) => {
 8 |   const fastify = Fastify()
 9 |   fastify.register(Support)
10 | 
11 |   await fastify.ready()
12 |   t.equal(fastify.someSupport(), 'hugs')
13 | })
14 | 
15 | // You can also use plugin with opts in fastify v2
16 | //
17 | // test('support works standalone', (t) => {
18 | //   t.plan(2)
19 | //   const fastify = Fastify()
20 | //   fastify.register(Support)
21 | //
22 | //   fastify.ready((err) => {
23 | //     t.error(err)
24 | //     t.equal(fastify.someSupport(), 'hugs')
25 | //   })
26 | // })
27 | 


--------------------------------------------------------------------------------
/routes/login.js:
--------------------------------------------------------------------------------
 1 | const User = require('../models/User')
 2 | const bcrypt = require('bcrypt')
 3 | 
 4 | module.exports = async function (fastify, opts) {
 5 |   fastify.post('/api/login', async function (request, reply) {
 6 |     const { body } = request
 7 |     try {
 8 |       const user = await User.findOne({ email: body.email })
 9 |       const match = await bcrypt.compare(body.password, user.password)
10 |       if (match) {
11 |         request.session.set('session', { id: user._id })
12 |         return reply.header('HX-Redirect', '/').send({ success: true })
13 |       }
14 |     } catch (err) {
15 |       return reply.view('partials/alert', {
16 |         success: false,
17 |         message: 'Invalid credentials.',
18 |       })
19 |     }
20 |   })
21 | }
22 | 


--------------------------------------------------------------------------------
/tests/helper.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | // This file contains code that we reuse
 4 | // between our tests.
 5 | 
 6 | const Fastify = require('fastify')
 7 | const fp = require('fastify-plugin')
 8 | const App = require('../app')
 9 | 
10 | // Fill in this config with all the configurations
11 | // needed for testing the application
12 | function config () {
13 |   return {}
14 | }
15 | 
16 | // automatically build and tear down our instance
17 | function build (t) {
18 |   const app = Fastify()
19 | 
20 |   // fastify-plugin ensures that all decorators
21 |   // are exposed for testing purposes, this is
22 |   // different from the production setup
23 |   app.register(fp(App), config())
24 | 
25 |   // tear down our app after we are done
26 |   t.tearDown(app.close.bind(app))
27 | 
28 |   return app
29 | }
30 | 
31 | module.exports = {
32 |   config,
33 |   build
34 | }
35 | 


--------------------------------------------------------------------------------
/routes/pages.js:
--------------------------------------------------------------------------------
 1 | const getServerData = require('../helpers/getServerData')
 2 | 
 3 | module.exports = async function (fastify, opts) {
 4 |   fastify.get('/', async function (request, reply) {
 5 |     const { data } = await getServerData(request)
 6 |     return reply.view('home', data)
 7 |   })
 8 | 
 9 |   fastify.get('/account', async function (request, reply) {
10 |     const { data } = await getServerData(request)
11 |     return reply.view('account', data)
12 |   })
13 | 
14 |   fastify.get('/create', async function (request, reply) {
15 |     const { session, data } = await getServerData(request)
16 |     return session ? reply.redirect('/') : reply.view('create', data)
17 |   })
18 | 
19 |   fastify.get('/login', async function (request, reply) {
20 |     const { session, data } = await getServerData(request)
21 |     return session ? reply.redirect('/') : reply.view('login', data)
22 |   })
23 | }
24 | 


--------------------------------------------------------------------------------
/views/login.twig:
--------------------------------------------------------------------------------
 1 | {% extends 'partials/layout.twig' %}
 2 | {% set title = 'Login' %}
 3 | 
 4 | {% block body %}
 5 |   <section class="container py-16">
 6 |     <h1 class="text-4xl font-black">
 7 |       {{ title }}
 8 |     </h1>
 9 |     <form hx-post="/api/login" hx-target="#response" class="mt-4 flex-wrap">
10 |       <label class="block">
11 |         Email:
12 |         <input
13 |           name="email"
14 |           type="email"
15 |           class="block rounded w-full"
16 |         >
17 |       </label>
18 |       <label class="block mt-4">
19 |         Password:
20 |         <input
21 |           name="password"
22 |           type="password"
23 |           class="block rounded w-full"
24 |         >
25 |       </label>
26 |       <button class="mt-8 bg-gray-900 text-white px-4 py-2 rounded">
27 |         Submit
28 |       </button>
29 |     </form>
30 |     <div id="response"></div>
31 |   </section>
32 | {% endblock %}
33 | 


--------------------------------------------------------------------------------
/views/create.twig:
--------------------------------------------------------------------------------
 1 | {% extends 'partials/layout.twig' %}
 2 | {% set title = 'Create' %}
 3 | 
 4 | {% block body %}
 5 |   <section class="container py-16">
 6 |     <h1 class="text-4xl font-black">
 7 |       {{ title }}
 8 |     </h1>
 9 |     <form hx-post="/api/user" hx-target="#response" class="mt-4 flex-wrap">
10 |       <label class="block">
11 |         Email:
12 |         <input
13 |           required
14 |           name="email"
15 |           class="block rounded w-full"
16 |           type="email"
17 |         >
18 |       </label>
19 |       <label class="block mt-4">
20 |         Password:
21 |         <input
22 |           required
23 |           name="password"
24 |           class="block rounded w-full"
25 |           type="password"
26 |         >
27 |       </label>
28 |       <button class="mt-8 bg-gray-900 text-white px-4 py-2 rounded">
29 |         Submit
30 |       </button>
31 |     </form>
32 |     <div id="response"></div>
33 |   </section>
34 | {% endblock %}
35 | 


--------------------------------------------------------------------------------
/views/partials/header.twig:
--------------------------------------------------------------------------------
 1 | {% set buttonClasses = 'inline-block py-2 px-4 border border-transparent rounded-md text-sm font-medium hover:bg-opacity-75' %}
 2 | 
 3 | <header class="bg-slate-900">
 4 |   <nav class="container flex gap-4 flex-col items-center justify-between py-4 sm:flex-row">
 5 |     <a class="flex items-center text-slate-200" href="/">
 6 |       <div class="w-6 h-auto">
 7 |         {% include '../svg/logo.svg' %}
 8 |       </div>
 9 |       <p class="text-white ml-2 font-bold text-lg">Fastify Starter</p>
10 |     </a>
11 |     <div class="flex items-center gap-4">
12 |       {% if user %}
13 |         <a class="{{ buttonClasses }} border border-slate-200 text-slate-200" href="/account">Account</a>
14 |         <a class="{{ buttonClasses }} bg-slate-200" href="/api/logout">Logout</a>
15 |       {% else %}
16 |         <a class="{{ buttonClasses }} text-white" href="/create">Create Account</a>
17 |         <a class="{{ buttonClasses }} bg-slate-200 text-slate-900" href="/login">Login</a>
18 |       {% endif %}
19 |     </div>
20 |   </nav>
21 | </header>
22 | 


--------------------------------------------------------------------------------
/routes/userCreate.js:
--------------------------------------------------------------------------------
 1 | const User = require('../models/User')
 2 | const bcrypt = require('bcrypt')
 3 | const validator = require('validator')
 4 | 
 5 | module.exports = async function (fastify, opts) {
 6 |   fastify.post('/api/user', async function (request, reply) {
 7 |     const { body } = request
 8 | 
 9 |     // Validate Email
10 |     if (!validator.isEmail(body.email)) {
11 |       return reply.view('partials/alert', {
12 |         success: false,
13 |         message: 'Please use a valid email address.',
14 |       })
15 |     }
16 | 
17 |     // Hash Password
18 |     const hashedPassword = await bcrypt.hash(
19 |       body.password,
20 |       parseInt(process.env.SALT_ROUNDS)
21 |     )
22 | 
23 |     // Attempt to Create New User
24 |     try {
25 |       await User.create({ ...body, password: hashedPassword })
26 |       return reply.header('HX-Redirect', '/login').send({ success: true })
27 |     } catch (err) {
28 |       return reply.view('partials/alert', {
29 |         success: false,
30 |         message: 'Something went wrong.',
31 |       })
32 |     }
33 |   })
34 | }
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🏎💨 Fastify Starter
 2 | 
 3 | This project aims to create the most pragmatic fullstack JS project by combining the best tools in the ecosystem.
 4 | 
 5 | ## ⭐️ Requirements
 6 | 
 7 | - [MongoDB](https://www.mongodb.com/)
 8 | - [Node](https://nodejs.org/en/)
 9 | - [NVM](https://github.com/nvm-sh/nvm)
10 | 
11 | ## 🧰 Tools
12 | 
13 | This template uses the following tools:
14 | 
15 | - [Alpine.js](https://alpinejs.dev/)
16 | - [Fastify](https://www.fastify.io/)
17 | - [HTMX](https://htmx.org/)
18 | - [MongoDB](https://www.mongodb.com/)
19 | - [Mongoose](https://mongoosejs.com/)
20 | - [TailwindCSS](https://tailwindcss.com/)
21 | - [Twig](https://github.com/twigjs/twig.js/wiki/Implementation-Notes)
22 | 
23 | ## 🛠 Getting Started
24 | 
25 | 1. Ensure MongoDB is running locally
26 | 2. Duplicate `.env.example` contents into a `.env` file
27 | 3. Run `nvm use` to switch to the correct Node version
28 | 4. Run `npm i` for that big ol' `node_modules` folder
29 | 5. Run `npm run key` to generate a session key
30 | 6. Run `npm run dev` and start developing
31 | 
32 | ### 👋🏻 Thank you!
33 | 
34 | I appreciate you taking time to check out this project. Please leave a star and share it if you found it useful!
35 | 


--------------------------------------------------------------------------------
/routes/userUpdate.js:
--------------------------------------------------------------------------------
 1 | const User = require('../models/User')
 2 | const validator = require('validator')
 3 | const delay = require('../helpers/delay')
 4 | 
 5 | module.exports = async function (fastify, opts) {
 6 |   fastify.patch('/api/user', async function (request, reply) {
 7 |     const session = request.session.get('session')
 8 | 
 9 |     await delay(1000)
10 | 
11 |     // Authenticate
12 |     if (!session) {
13 |       return reply.view('partials/alert', {
14 |         success: false,
15 |         message: 'Not authenticated.',
16 |       })
17 |     }
18 | 
19 |     // Validate Email
20 |     if (!validator.isEmail(request.body.email)) {
21 |       return reply.view('partials/alert', {
22 |         success: false,
23 |         message: 'Invalid email address.',
24 |       })
25 |     }
26 | 
27 |     // Update
28 |     try {
29 |       await User.findOneAndUpdate(session.id, request.body, { new: true })
30 |       return reply.view('partials/alert', {
31 |         success: true,
32 |         message: 'Your account details have been updated successfully.',
33 |       })
34 |     } catch (err) {
35 |       console.log(err)
36 |       return reply.view('partials/alert', {
37 |         success: false,
38 |         message: 'There was an error updating your account. Please try again.',
39 |       })
40 |     }
41 |   })
42 | }
43 | 


--------------------------------------------------------------------------------
/views/partials/alert.twig:
--------------------------------------------------------------------------------
 1 | <div
 2 |   class="fixed top-0 left-0 right-0 flex items-center justify-center pt-8 pointer-events-none"
 3 |   x-data="{ show: false }"
 4 |   x-show="show"
 5 |   x-transition.opacity.duration.500ms
 6 |   x-init="() => {
 7 |     setTimeout(() => { show = true }, 250);
 8 |     setTimeout(() => { show = false }, 3000);
 9 |   }"
10 | >
11 |   <div class="max-w-xs bg-white shadow-xl border rounded p-3 flex items-center gap-2">
12 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 flex-none">
13 |       {% if success %}
14 |         <path class="text-green-500" fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
15 |       {% else %}
16 |         <path class="text-red-500" fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" />
17 |       {% endif %}
18 |     </svg>
19 |     <p class="leading-tight">
20 |       {{ message }}
21 |     </p>
22 |   </div>
23 | </div>
24 | 


--------------------------------------------------------------------------------
/views/account.twig:
--------------------------------------------------------------------------------
 1 | {% extends 'partials/layout.twig' %}
 2 | {% set title = 'Account' %}
 3 | 
 4 | {% block body %}
 5 |   <section class="container py-16">
 6 |     <h1 class="font-black text-6xl">
 7 |       {{ title }}
 8 |     </h1>
 9 |     <form
10 |       hx-patch="/api/user"
11 |       hx-target="#alert"
12 |       hx-indicator="#account-loading"
13 |       class="mt-4 flex-wrap"
14 |     >
15 |       <label class="block">
16 |         Email:
17 |         <input
18 |           name="email"
19 |           class="block rounded w-full"
20 |           type="email"
21 |           value="{{ user.email }}"
22 |         >
23 |       </label>
24 |       <label class="block mt-4">
25 |         Name:
26 |         <input
27 |           name="name"
28 |           class="block rounded w-full"
29 |           type="text"
30 |           value="{{ user.name ?? '' }}"
31 |         >
32 |       </label>
33 |       <div class="mt-8 flex items-center gap-4">
34 |         <button
35 |           class="bg-gray-900 text-white px-4 py-2 rounded"
36 |           type="submit"
37 |         >
38 |           Submit
39 |         </button>
40 |         <svg id="account-loading" class="htmx-indicator animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
41 |           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
42 |           <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
43 |         </svg>
44 |       </div>
45 |     </form>
46 |   </section>
47 | {% endblock %}
48 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fastify-starter",
 3 |   "version": "1.0.0",
 4 |   "description": "A starter for Fastify with Twig, Alpine, and Tailwind.",
 5 |   "main": "app.js",
 6 |   "config": {
 7 | 		"css": "tailwindcss -i bundle/main.pcss -o public/_compiled/main.bundle.css --postcss",
 8 |     "js": "esbuild bundle/main.js --outfile=public/_compiled/main.bundle.js --bundle"
 9 | 	},
10 |   "scripts": {
11 |     "build": "NODE_ENV=production run-p build:*",
12 |     "build:css": "$npm_package_config_css --minify",
13 |     "build:js": "$npm_package_config_js",
14 |     "dev": "NODE_ENV=development npm-run-all -p dev:*",
15 |     "dev:fastify": "fastify start -w -l info -P app.js",
16 |     "dev:css": "$npm_package_config_css --watch",
17 |     "dev:js": "$npm_package_config_js --watch",
18 |     "key": "npx @fastify/secure-session > secret-key",
19 |     "start": "NODE_ENV=production fastify start -l info app.js",
20 |     "test": "tap tests/**/*.test.js"
21 |   },
22 |   "keywords": [],
23 |   "author": "Matt Waler",
24 |   "license": "ISC",
25 |   "dependencies": {
26 |     "@fastify/autoload": "^5.1.0",
27 |     "@fastify/formbody": "^7.0.1",
28 |     "@fastify/secure-session": "^5.2.0",
29 |     "@fastify/static": "^6.4.0",
30 |     "@fastify/view": "^7.0.0",
31 |     "alpinejs": "^3.0.6",
32 |     "axios": "^0.27.2",
33 |     "bcrypt": "^5.0.1",
34 |     "dotenv": "^16.0.1",
35 |     "fastify": "^4.2.1",
36 |     "fastify-cli": "^4.3.0",
37 |     "fastify-plugin": "^4.0.0",
38 |     "htmx.org": "^1.4.1",
39 |     "mongoose": "^6.1.4",
40 |     "twig": "^1.15.4",
41 |     "validator": "^13.6.0"
42 |   },
43 |   "devDependencies": {
44 |     "@tailwindcss/forms": "^0.5.2",
45 |     "esbuild": "^0.14.9",
46 |     "npm-run-all": "^4.1.5",
47 |     "postcss": "^8.4.5",
48 |     "postcss-import": "^14.0.2",
49 |     "tailwindcss": "^3.0.8",
50 |     "tailwindcss-debug-screens": "^2.0.0",
51 |     "tap": "^16.3.0"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/views/svg/logo.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 101 101" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2 |   <path d="M61.6580394,100.001931 C61.3674316,99.0213198 60.9602997,97.4197865 60.551764,95.8169405 C60.3481981,95.0214248 60.1446322,94.2259091 59.9551053,93.5065319 C59.7740018,92.8186602 58.4880268,89.2007703 58.7772308,88.5142114 C59.9396624,85.7548483 65.7448006,86.1053478 72.444225,78.4757483 C75.1116405,75.4367733 75.6746055,74.6123775 76.9212712,72.526446 C78.2170736,70.3578125 79.4342573,67.8163629 80.2204429,65.4613214 C80.9883778,63.1561637 81.3590081,60.7210455 81.6341731,58.3975095 C81.9037224,56.1133555 82.4189548,53.0993224 81.8686249,51.5187928 C81.4432423,50.2927009 81.3239106,48.33673 78.3350014,48.9156449 C75.3460922,49.4945598 77.2413611,52.0543875 74.3282627,54.1219407 C71.4165682,56.1881812 62.3838572,58.2111015 59.9551053,58.5826047 C57.5263534,58.9554207 55.9820602,59.2954183 54.5360403,59.6984271 C53.3876478,60.0187337 52.2476786,60.4191171 51.2789857,61.0006574 C50.2962537,61.5887614 49.6336115,63.1994838 48.64386,63.2309894 C47.6555124,63.262495 46.3667296,61.8670607 45.3460922,61.1857527 C44.3689759,60.5346375 43.49996,59.6367287 42.5186319,59.1405159 C41.5962677,58.6758087 40.5208781,58.4040731 39.4553159,58.2111015 C38.080895,57.9629951 36.0045227,57.8054673 34.2707027,57.6531903 C32.503189,57.4982879 30.4619142,57.5914919 28.8516377,57.2816871 C27.3480577,56.992886 25.7490124,56.5071751 24.6090432,55.7943616 C23.470478,55.081548 22.6463871,53.8423288 22.0174386,53.0061184 C21.4965906,52.3129958 20.9869739,51.2299917 20.3678527,50.5893784 C19.7403082,49.9382633 19.0720504,49.1952568 18.2479594,49.1020529 C17.4224646,49.0088489 16.3919999,49.6127057 15.8908065,50.2178752 C15.378382,50.8374848 15.1720083,51.9323035 15.1720083,52.8197104 C15.1720083,54.0287368 15.6044104,55.9230093 15.8908065,57.4680951 C16.2066847,59.1720215 16.5983736,61.2789566 17.068681,63.0445814 C17.5207378,64.7366932 18.1300316,66.5771438 18.7182669,68.0644693 C19.2447305,69.394267 19.9368546,70.7293157 20.6037084,71.9685349 C21.2495037,73.1683721 21.9289927,74.3590202 22.7250056,75.5010972 C23.5884059,76.7403164 24.7269711,78.2276419 25.7883216,79.4051627 C26.7893044,80.5170469 27.9475242,81.6354947 29.0860894,82.5649091 C30.1699024,83.4496906 31.3702394,84.2491445 32.6211168,84.9829618 C33.9955377,85.7876666 35.7630514,86.7800922 37.3340187,87.3997017 C38.8221557,87.986493 40.0435512,88.4223201 41.1034978,88.7006193 C41.6468082,88.8437072 42.3445479,89.3858655 42.5186319,89.8164417 C42.792393,90.4977497 42.675869,91.5531864 42.7530837,92.7910928 C42.8317022,94.030312 43.0815969,95.2682185 43.224795,96.5087504 C43.3455307,97.549747 43.4185336,98.7719007 43.5519044,99.927105 C17.5642587,99.7643262 0.205,100.04 0.205,100.04 L0.905547522,0.479765283 L36.2502057,0.479765283 C36.2502057,0.479765283 47.6695515,44.93019 49.9466819,44.8579897 C52.2252162,44.7844767 65.7054914,0.04 65.7054914,0.04 L99.872275,0.04 L100.205,99.598922 C100.205,99.598922 84.3970539,100.041313 61.6580394,100.001931 Z" fill="currentColor"></path>
3 | </svg>
4 | 


--------------------------------------------------------------------------------