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.
├── /_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
11ty simplifies web templating. In this setup:
Remember, once 11ty works its magic, the fruits of its labor reside in the _site directory.
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.
For consistent development, we suggest Node v18.17.1. Using NVM (Node Version Manager), this can be easily managed:
nvm install 18.7.1
Install the project dependencies using:
pnpm i
Kickstart the development environment:
pnpm run dev
To generate a static build of the project:
pnpm run build
Your .env file should contain:
PRISMIC_REPOSITORY=
PRISMIC_ACCESS_TOKEN=
Ensure these are properly set to connect with Prismic services.