Frontend Overview

Clarification

The frontend of a website is the part users see and interact with in their browser. The .com bit. It's the text, images, videos, pages, layouts, RSS feeds, and other bits that your readers and visitors consume.

When we refer to the frontend of a Statamic site, we're talking about the templates and views, JavaScript/CSS files, media assets, and other resources used to render your final website.

The backend of a Statamic site is all of the PHP and Laravel code that you can customize and extend to bring your own unique features and capabilities to life on your site.

Statamic's Control Panel sits outside both the frontend and backend as a tool used to publish and manage content, users, and assets.

The Frontend is Yours

In today's tech-driven ecosystem there are countless ways to build a website. Some might say too many. You could...

• Write a Single Page Application (SPA) with Vue.js or React to run your entire site without the need for page refreshes
• Use HTML and Statamic's Antlers template language to build a dynamic site with smart caching
• Use Vite, Webpack, Laravel Mix, or Gulp to compile your JavaScript and SCSS/LESS
• Go for the JAMStack approach and run a statically generated site without server-side processing
• Build a standard Statamic site and deploy a static version to Netlify
• Go skateboarding and stay away from computers and nerdy webmasters
• Kick it old-school and write your own HTML, plain CSS, and vanilla JavaScript

Just like the honey badger, Statamic don't care. You can take any of these approaches or one of many others — including several that will be invented tomorrow and forgotten by autumn.

It's up to you. Write or generate HTML somehow and let Statamic get it to the browser.

Path of Least Resistance

If you don't have a hard requirement, a strong preference, or just want our advice, we recommend writing your own HTML, use Antlers or Blade in said HTML to pull content in, use TailwindCSS as your CSS framework, and let Vite compile any JavaScript, SCSS/LESS, or PostCSS as necessary.

You'll be able to take advantage of all of our powerful, tightly coupled tags that do most of the heavy lifting — like fetching and displaying content from collections and taxonomies, manipulating, assets, and rendering variables.

Other Options

You don't have to go Antlers + Tailwind. At all. That's just our preference.

You could do so many different things, like:

• Use our GraphQL integration and build your frontend with Gatsby.js
• Use our REST API and build a single page application with Vue.js or React
• Use Laravel Blade and some controllers and write your own routes.

It's up to you.

Request Lifecycle

Let's take a quick look at what happens during a typical Statamic frontend request:

1. User visits a URL.
2. Statamic checks if there's any data matching the URL (e.g. an entry or route).
3. Variables for that item are fetched out the data store.
4. Statamic loads the appropriate view and injects the variables into it.
5. The Contents of the rendered view is sent to the user's browser.