Floema + Vite ⚡

Floema represents a modernized rendition of Bizarro's Floema course from Awwwards, now leveraging the powers of 11ty and Vite for enhanced performance and modularity.

See Demo

What's new

11ty (Eleventy): A light yet powerful static site generator offering swiftness in build times, data flexibility, and a broad template language support.
Vite: A groundbreaking build tool and development server that drastically improves frontend development experience with features like lightning-fast HMR (Hot Module Replacement).
PNPM: A package manager that stands out with its efficiency, making use of a shared store to conserve disk space and reduce installation time.

├── /_site/                       # Folder generated by 11ty (contains the final build)
├── /src/                         # Main source directory
  └── /app/                       # JavaScript source files
  └── /fonts/                     # Font assets
  └── /styles/                    # Modular SCSS styling
  └── /views/                     # Pug templates, Prismic Data
├── .env                          # Environment configuration
├── .gitignore                    # Git's filter list
├── package.json                  # Contains project metadata and dependencies
├── .eleventy.cjs                 # Configurations for Eleventy + Vite synergy
├── .nvmrc                        # Node version specification for the project
└── vercel.json                   # Vercel deployment configurations

Working with 11ty

11ty simplifies web templating. In this setup:

views: Your starting point. For instance, index.pug serves as the main landing template.
_includes: Essential building blocks. Store reusable fragments (like navigation or head) here, making it easier to maintain and update the website's consistent parts.
_data: This is where the magic happens. Beyond conventional data, it sources and integrates content directly from Prismic, making content updates seamless and efficient.

Remember, once 11ty works its magic, the fruits of its labor reside in the _site directory.

From SSR to SSG: A Transformation

The original course setup leveraged Server Side Rendering (SSR) with Express, sending hydrated templates to the client. This approach, although effective, brought along overheads in terms of server load and potential latency.

In contrast, the new setup adopts Static Site Generation (SSG), which pre-renders pages at build time. This means all pages are generated once and served statically, ensuring faster load times and reduced server load. This shift aligns perfectly with the JAMstack principles (JavaScript, APIs, Markup), ensuring better performance, security, and a more developer-friendly environment.

Getting Started

Node

For consistent development, we suggest Node v18.17.1. Using NVM (Node Version Manager), this can be easily managed:

nvm install 18.7.1

Installation

Install the project dependencies using:

pnpm i

Dive In!

Kickstart the development environment:

pnpm run dev

Build

To generate a static build of the project:

pnpm run build

Environment Variables

Your .env file should contain:

PRISMIC_REPOSITORY=
PRISMIC_ACCESS_TOKEN=

Ensure these are properly set to connect with Prismic services.

whizzbbig / Floema-Vite