https://stacksjs-docs.netlify.app/assets/bootcamp_frontend.md.DzW6pJP-.js

1import{_ as t,c as o,a7 as a,o as i}from"./chunks/framework.Q1KJJagW.js";const p=JSON.parse('{"title":"How to build a frontend?","description":"","frontmatter":{},"headers":[],"relativePath":"bootcamp/frontend.md","filePath":"bootcamp/frontend.md","lastUpdated":1698126157000}'),n={name:"bootcamp/frontend.md"};function r(s,e,d,l,c,u){return i(),o("div",null,e[0]||(e[0]=[a('<h1 id="how-to-build-a-frontend" tabindex="-1">How to build a frontend? <a class="header-anchor" href="#how-to-build-a-frontend" aria-label="Permalink to &quot;How to build a frontend?&quot;">​</a></h1><p>Before getting started, it is important to understand a few fundamental concepts about &quot;Stacks frontends&quot; <em>which you will notice reused throughout Stacks ecosystem.</em></p><h2 id="stacks-ui-engine" tabindex="-1">Stacks UI Engine <a class="header-anchor" href="#stacks-ui-engine" aria-label="Permalink to &quot;Stacks UI Engine&quot;">​</a></h2><p>The Stacks UI engine is responsible for rendering the UI of a Stacks codebase. It is designed to be framework-agnostic, meaning that the built results can be used with any JavaScript or TypeScript framework.</p><p>The UI engine is made up of two core responsibilities:</p><ol><li>Rendering the Application</li><li>Rendering the Documentation</li></ol><p>Now, let&#39;s diver deeper.</p><h3 id="the-application-frontend" tabindex="-1">The Application Frontend <a class="header-anchor" href="#the-application-frontend" aria-label="Permalink to &quot;The Application Frontend&quot;">​</a></h3><p>The source of the application frontend lives in <code>./resources/views</code> and there are two ways to expose &quot;views&quot; (pages) to the server.</p><ol><li>File-based routing</li><li>Laravel-like routing</li></ol><p>By default, file-based routing enabled, but you may also choose to use a more traditional, Laravel-like router.</p><h4 id="file-based-routing" tabindex="-1">File-based Routing <a class="header-anchor" href="#file-based-routing" aria-label="Permalink to &quot;File-based Routing&quot;">​</a></h4><p>File-based routing is the default routing strategy for Stacks. It is designed to be simple and intuitive. It is also a recommended routing strategy for most applications.</p><h4 id="laravel-like-routing" tabindex="-1">Laravel-like Routing <a class="header-anchor" href="#laravel-like-routing" aria-label="Permalink to &quot;Laravel-like Routing&quot;">​</a></h4><p>Laravel-like routing is an alternative routing strategy for Stacks applications. It is designed to be familiar to those who have used Laravel before. It is also the recommended routing strategy for applications that potentially require more complex routing.</p><p>At the end of the day, it is up to you to decide which routing strategy feels most intuitive to you and your environment. Stacks helps you get started with both.</p><h3 id="the-documentation-frontend" tabindex="-1">The Documentation Frontend <a class="header-anchor" href="#the-documentation-frontend" aria-label="Permalink to &quot;The Documentation Frontend&quot;">​</a></h3><p>The source of the documentation frontend lives in <code>./docs</code>. Under the hood, Stacks is powered by <a href="https://vitepress.vuejs.org/" target="_blank" rel="noreferrer">VitePress</a>, and, in short, the markdown files in <code>./docs</code> are compiled into a static website that is automatically served by the Stacks server.</p><p>wip</p>',19)]))}const f=t(n,[["render",r]]);export{p as __pageData,f as default};