-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathtutorial.html
More file actions
13 lines (13 loc) · 8.22 KB
/
tutorial.html
File metadata and controls
13 lines (13 loc) · 8.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stackpress Tutorial</title><meta name="description" content="This tutorial will guide you through the process of setting up and using and maximizing the framework ideally for your own applications."/><meta property="og:title" content="Stackpress Tutorial"/><meta property="og:image" content="/images/icon.png"/><meta property="og:url" content="/docs/tutorial"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="Stackpress Tutorial"/><meta name="twitter:image" content="/images/icon.png"/><link rel="icon" type="image/x-icon" href="/favicon.ico"/><link rel="stylesheet" type="text/css" href="/styles/global.css"/><link rel="stylesheet" type="text/css" href="/assets/index-DZMgo4S8.css"/>
</head>
<body>
<div id="root"><link rel="preload" as="image" href="/icon.png"/><div class="dark relative overflow-hidden px-w-100-0 px-h-100-0 theme-bg-bg0 theme-tx1"><header class="theme-bg-bg1 duration-200 absolute px-h-60 px-r-0 px-t-0 px-l-220 rmd-px-l-0"><div class="flex items-center px-px-20 px-h-100-0"><button class="theme-tx1 md-hidden b-0 p-0 bg-transparent text-xl"><i class="fas fa-bars"></i></button><div class="flex-grow"></div><button class="flex justify-center items-center b-0 px-mr-10 px-h-26 px-w-26 px-fs-18 rounded-full text-white bg-gray-600"><i class="fas fa-moon"></i></button></div></header><aside class="duration-200 flex flex-col px-h-100-0 px-z-100 absolute px-w-220 px-b-0 px-l-0 px-t-0 rmd-px-l--220"><header class="px-p-10 px-h-60 flex items-center theme-bg-bg0"><h3 class="flex-grow px-m-0"><a class="theme-tx1 flex items-center no-underline" href="/"><img src="/icon.png" class="px-w-40 px-h-40 px-mr-10"/><span class="uppercase px-fs-16">Stackpress</span></a></h3><button class="theme-tx1 md-hidden b-0 p-0 bg-transparent text-xl"><i class="fas fa-chevron-left"></i></button></header><main class="theme-bg-bg1 flex-grow overflow-auto px-pt-10 px-pb-40"><div><a class="theme-muted block px-py-10 px-pl-20" href="/docs/introduction">Introduction</a><a class="theme-muted block px-py-10 px-pl-20" href="/docs/getting-started">Getting Started</a><a class="theme-tx1 block px-py-10 px-pl-20 font-bold" href="/docs/tutorial">Tutorial</a></div><div><a href="/docs/develop/configure-project" class="theme-tx1 theme-bg-bg2 theme-bc-bd1 font-semibold px-fs-16 uppercase px-mb-0 px-mt-0 px-py-12 px-px-20 flex items-center"><span class="flex-grow">Develop</span><i class="theme-muted px-fs-12 fas fa-caret-left"></i></a></div><div><a href="/docs/transform/form-idea" class="theme-tx1 theme-bg-bg2 theme-bc-bd1 font-semibold px-fs-16 uppercase px-mb-0 px-mt-0 px-py-12 px-px-20 flex items-center"><span class="flex-grow">Transform</span><i class="theme-muted px-fs-12 fas fa-caret-left"></i></a></div><div><a href="/docs/toolkit/setup" class="theme-tx1 theme-bg-bg2 theme-bc-bd1 font-semibold px-fs-16 uppercase px-mb-0 px-mt-0 px-py-12 px-px-20 flex items-center"><span class="flex-grow">Toolkit</span><i class="theme-muted px-fs-12 fas fa-caret-left"></i></a></div><div><a href="/docs/references/client-api" class="theme-tx1 theme-bg-bg2 theme-bc-bd1 font-semibold px-fs-16 uppercase px-mb-0 px-mt-0 px-py-12 px-px-20 flex items-center"><span class="flex-grow">References</span><i class="theme-muted px-fs-12 fas fa-caret-left"></i></a></div></main></aside><main class="theme-bg-bg0 duration-200 absolute px-b-0 px-t-60 px-l-220 rmd-px-l-0 px-r-0"><article class="px-h-100-0 overflow-auto px-px-20 px-pb-20 px-fs-15"><h1 class="px-fs-24 font-bold px-pt-40 px-pb-20">Tutorial</h1><div class="px-lh-30 px-py-20 block"><strong class="font-bold">Stackpress</strong> is a vast library with built-in toolkits and many features, making it difficult to explain in one go. The purpose of this tutorial is to get a basic understanding of the core framework and give ideas on how to structure projects. Its specific objectives are the following.</div><ul class="px-lh-30 px-px-20"><li>• Setting up the project to use the <strong class="font-bold">EcmaScript Module</strong> standard.</li><li>• Structuring the project around a <strong class="font-semibold">plugin architecture</strong> that defines folders for use as a plugin.</li><li>• Setting up an example plugin called <span class="inline"><span class="theme-tx1 theme-bg-bg2 inline-block px-px-6 rounded px-lh-24">app</span></span> which contains an example page controller and view.</li><li>• Demonstrate how the view is rendered from the server side router.</li><li>• Demonstrate how props are passed to the view.</li><li>• Configuring the view to enable a style engine.</li></ul><div class="px-lh-30 px-py-20 block">By the end of this tutorial, the end result is a pluggable project structure that can be used to build a web application. You can use the following blocks to skip around the tutorial.</div><div class="flex flex-wrap"><div class="basis-1/2 rmd-basis-full"><div class="theme-bc-bd1 px-p-10 border px-m-2"><h3 class="font-semibold">1. EcmaScript</h3><p class="px-py-10 px-fs-13 px-lh-24">Setting up <strong class="font-bold">EcmaScript Module</strong> standard.</p><a href="/docs/tutorial/1-ecmascript" class="frui-btn frui-btn-md frui-tx-white frui-bg-info inline-block px-fs-12">Read On</a></div></div><div class="basis-1/2 rmd-basis-full"><div class="theme-bc-bd1 px-p-10 border px-m-2"><h3 class="font-semibold">2. Plugin Architecture</h3><p class="px-py-10 px-fs-13 px-lh-24">Creating the first example <span class="inline"><span class="theme-tx1 theme-bg-bg2 inline-block px-px-6 rounded px-lh-24">app</span></span> plugin.</p><a href="/docs/tutorial/2-plugin-architecture" class="frui-btn frui-btn-md frui-tx-white frui-bg-info inline-block px-fs-12">Read On</a></div></div><div class="basis-1/2 rmd-basis-full"><div class="theme-bc-bd1 px-p-10 border px-m-2"><h3 class="font-semibold">3. Server Routes</h3><p class="px-py-10 px-fs-13 px-lh-24">Adding a page controller route.</p><a href="/docs/tutorial/3-server-routes" class="frui-btn frui-btn-md frui-tx-white frui-bg-info inline-block px-fs-12">Read On</a></div></div><div class="basis-1/2 rmd-basis-full"><div class="theme-bc-bd1 px-p-10 border px-m-2"><h3 class="font-semibold">4. Server Props</h3><p class="px-py-10 px-fs-13 px-lh-24">How server props are passed to the view.</p><a href="/docs/tutorial/4-server-props" class="frui-btn frui-btn-md frui-tx-white frui-bg-info inline-block px-fs-12">Read On</a></div></div><div class="basis-1/2 rmd-basis-full"><div class="theme-bc-bd1 px-p-10 border px-m-2"><h3 class="font-semibold">5. View Engine</h3><p class="px-py-10 px-fs-13 px-lh-24">Configure and style engine.</p><a href="/docs/tutorial/5-view-engine" class="frui-btn frui-btn-md frui-tx-white frui-bg-info inline-block px-fs-12">Read On</a></div></div></div><nav class="flex"><a class="theme-primary px-py-40" href="/docs/getting-started"><i class="fas fa-fw fa-chevron-left"></i>Getting Started</a><a class="theme-primary flex-grow text-right px-py-40" href="/docs/tutorial/1-ecmascript">1. EcmaScript<i class="fas fa-fw fa-chevron-right"></i></a></nav></article></main></div><section class="Toastify" aria-live="polite" aria-atomic="false" aria-relevant="additions text" aria-label="Notifications Alt+T"></section></div>
<script id="props" type="text/json">{"data":{"view":{"base":"/","props":{}},"brand":{"name":"Stackpress","logo":"/logo.png","icon":"/icon.png","favicon":"/favicon.ico"},"language":{"key":"locale","locale":"en_US","languages":{"en_US":{"label":"EN","translations":{"Sign In":"Signin","Home Page":"Home Page"}},"th_TH":{"label":"TH","translations":{"Sign In":"Signin","Home Page":"Home Pagesss"}}}}},"session":{"id":0,"roles":["GUEST"],"token":"","permits":[{"method":"ALL","route":"/**"}]},"request":{"url":{"hash":"","host":"www.stackpress.io","hostname":"www.stackpress.io","href":"https://www.stackpress.io/docs/tutorial","origin":"https://www.stackpress.io","pathname":"/docs/tutorial","port":"","protocol":"https:","search":""},"headers":{},"session":{},"method":"GET","mime":"text/plain","data":{"0":"tutorial"}},"response":{"code":200,"status":"OK","errors":{},"results":null,"total":0}}</script>
<script type="module" src="/client/index-UaME7jOm.js"></script>
</body>
</html>