60 lines
32 KiB
HTML
60 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US" dir="ltr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>🌐 Fullstack Development | Pixel Services Docs</title>
|
||
<meta name="description" content="Documentation for all public Pixel Services projects.">
|
||
<meta name="generator" content="VitePress v1.5.0">
|
||
<link rel="preload stylesheet" href="/assets/style.DKcHOilP.css" as="style">
|
||
<link rel="preload stylesheet" href="/vp-icons.css" as="style">
|
||
|
||
<script type="module" src="/assets/app.CtbirKdi.js"></script>
|
||
<link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
||
<link rel="modulepreload" href="/assets/chunks/theme.B0m-fXrT.js">
|
||
<link rel="modulepreload" href="/assets/chunks/framework.p2VkXzrt.js">
|
||
<link rel="modulepreload" href="/assets/flash_advanced_fullstack-development.md.DFJ2Nfm_.lean.js">
|
||
<link rel="icon" href="https://static.pixel-services.com/static/assets/pservices_logo.png">
|
||
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||
<meta name="twitter:image" content="/assets/banner-cards/flash-advanced-fullstack-development.png">
|
||
<meta name="twitter:image:src" content="https://docs.pixel-services.com/assets/banner-cards/flash-advanced-fullstack-development.png">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:image:height" content="1280">
|
||
<meta name="twitter:image:width" content="669">
|
||
<meta name="twitter:description" content="">
|
||
</head>
|
||
<body>
|
||
<div id="app"><div class="Layout" data-v-d8b57b2d><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c8291ffa></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c8291ffa> Skip to content </a><!--]--><!----><header class="VPNav" data-v-d8b57b2d data-v-7ad780c2><div class="VPNavBar" data-v-7ad780c2 data-v-9fd4d1dd><div class="wrapper" data-v-9fd4d1dd><div class="container" data-v-9fd4d1dd><div class="title" data-v-9fd4d1dd><div class="VPNavBarTitle has-sidebar" data-v-9fd4d1dd data-v-9f43907a><a class="title" href="/" data-v-9f43907a><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://static.pixel-services.com/static/assets/pservices_logo.png" alt data-v-ab19afbb><!--]--><span data-v-9f43907a>Pixel Services Docs</span><!--[--><!--]--></a></div></div><div class="content" data-v-9fd4d1dd><div class="content-body" data-v-9fd4d1dd><!--[--><!--]--><div class="VPNavBarSearch search" data-v-9fd4d1dd><!----></div><!----><!----><div class="VPNavBarAppearance appearance" data-v-9fd4d1dd data-v-3f90c1a5><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-3f90c1a5 data-v-be9742d9 data-v-b4ccac88><span class="check" data-v-b4ccac88><span class="icon" data-v-b4ccac88><!--[--><span class="vpi-sun sun" data-v-be9742d9></span><span class="vpi-moon moon" data-v-be9742d9></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-9fd4d1dd data-v-f953d92f data-v-bfe7971f><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-bfe7971f><span class="vpi-more-horizontal icon" data-v-bfe7971f></span></button><div class="menu" data-v-bfe7971f><div class="VPMenu" data-v-bfe7971f data-v-20ed86d6><!----><!--[--><!--[--><!----><div class="group" data-v-f953d92f><div class="item appearance" data-v-f953d92f><p class="label" data-v-f953d92f>Appearance</p><div class="appearance-action" data-v-f953d92f><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-f953d92f data-v-be9742d9 data-v-b4ccac88><span class="check" data-v-b4ccac88><span class="icon" data-v-b4ccac88><!--[--><span class="vpi-sun sun" data-v-be9742d9></span><span class="vpi-moon moon" data-v-be9742d9></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-9fd4d1dd data-v-6bee1efd><span class="container" data-v-6bee1efd><span class="top" data-v-6bee1efd></span><span class="middle" data-v-6bee1efd></span><span class="bottom" data-v-6bee1efd></span></span></button></div></div></div></div><div class="divider" data-v-9fd4d1dd><div class="divider-line" data-v-9fd4d1dd></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-d8b57b2d data-v-2488c25a><div class="container" data-v-2488c25a><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-2488c25a><span class="vpi-align-left menu-icon" data-v-2488c25a></span><span class="menu-text" data-v-2488c25a>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-2488c25a data-v-883964e0><button data-v-883964e0>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-d8b57b2d data-v-42c4c606><div class="curtain" data-v-42c4c606></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-42c4c606><span class="visually-hidden" id="sidebar-aria-label" data-v-42c4c606> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>Introduction</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8 data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/flash.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>Getting Started</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8 data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/flash/introduction/installation.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>Installation</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>Core Concepts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8 data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/flash/core-concepts/handlers.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>Handlers</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8 data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/flash/core-concepts/request-handler.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>RequestHandler</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8 data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/flash/core-concepts/request-response.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>Request and Response</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8 data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/flash/core-concepts/server-router.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>Server Router</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8 data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/flash/core-concepts/websockets.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>Websockets</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>File Serving</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8 data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/flash/file-serving/static-file-server.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>Static Files Server</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8 data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/flash/file-serving/dynamic-file-server.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>Dynamic Files Server</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible has-active" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>Advanced</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8 data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/flash/advanced/handler-default-implementations.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>Handler Default Implementations</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8 data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/flash/advanced/fullstack-development.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>Fullstack Development</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-d8b57b2d data-v-9a6c75ad><div class="VPDoc has-sidebar has-aside" data-v-9a6c75ad data-v-e6f2a212><!--[--><!--]--><div class="container" data-v-e6f2a212><div class="aside" data-v-e6f2a212><div class="aside-curtain" data-v-e6f2a212></div><div class="aside-container" data-v-e6f2a212><div class="aside-content" data-v-e6f2a212><div class="VPDocAside" data-v-e6f2a212 data-v-cb998dce><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-cb998dce data-v-f610f197><div class="content" data-v-f610f197><div class="outline-marker" data-v-f610f197></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-f610f197>On this page</div><ul class="VPDocOutlineItem root" data-v-f610f197 data-v-53c99d69><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-cb998dce></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-e6f2a212><div class="content-container" data-v-e6f2a212><!--[--><!--]--><main class="main" data-v-e6f2a212><div style="position:relative;" class="vp-doc _flash_advanced_fullstack-development" data-v-e6f2a212><div><h1 id="🌐-fullstack-development" tabindex="-1">🌐 Fullstack Development <a class="header-anchor" href="#🌐-fullstack-development" aria-label="Permalink to "🌐 Fullstack Development""></a></h1><p>Fullstack development involves building both the <strong>front-end</strong> (user interface) and <strong>back-end</strong> (server logic, database) of a web application. A fullstack developer is responsible for the entire application, ensuring a smooth connection between the two layers.</p><p>Popular fullstack frameworks include:</p><ul><li><a href="https://rubyonrails.org" target="_blank" rel="noreferrer">Ruby on Rails</a> (Ruby)</li><li><a href="https://www.djangoproject.com" target="_blank" rel="noreferrer">Django</a> (Python)</li><li><a href="https://laravel.com" target="_blank" rel="noreferrer">Laravel</a> (PHP)</li></ul><h2 id="⚡-fullstack-development-with-flash" tabindex="-1">⚡ Fullstack Development with Flash <a class="header-anchor" href="#⚡-fullstack-development-with-flash" aria-label="Permalink to "⚡ Fullstack Development with Flash""></a></h2><p>Developing and packaging a fullstack application can be complex, but <strong>Flash</strong> simplifies the process with built-in tools and <strong>quality-of-life features</strong>. With Flash, you can:</p><ul><li>Serve both <strong>frontend</strong> and <strong>backend</strong> from a single application.</li><li>Bundle everything into a <strong>single JAR file</strong> for easy deployment.</li><li>Leverage HDI's for <strong>clean, modular and maintainable route logic</strong>.</li></ul><p><img src="/assets/flash-fullstack.D96XNhET.png" alt="Flash Fullstack Development"></p><h2 id="🚀-serving-frontend-with-flash" tabindex="-1">🚀 Serving Frontend with Flash <a class="header-anchor" href="#🚀-serving-frontend-with-flash" aria-label="Permalink to "🚀 Serving Frontend with Flash""></a></h2><p>Flash’s <strong>dynamic file server</strong> enables seamless fullstack development by allowing you to serve frontend assets alongside backend logic. This is made possible by the <code>RESOURCESTREAM</code> source type, which serves files from the JAR’s resources folder.</p><h3 id="✅-deployment-workflow" tabindex="-1">✅ Deployment Workflow <a class="header-anchor" href="#✅-deployment-workflow" aria-label="Permalink to "✅ Deployment Workflow""></a></h3><p>The recommended workflow for packaging a fullstack Flash application:</p><ol><li><strong>Compile</strong> the frontend application (React, Vue, Angular, etc.).</li><li><strong>Place</strong> the compiled files inside the <code>resources</code> folder.</li><li><strong>Build</strong> the JAR file with both frontend and backend code.</li><li><strong>Deploy</strong> the JAR, serving both frontend and backend seamlessly.</li></ol><p>This approach works for any frontend framework that compiles to static files, such as:</p><ul><li><strong>React</strong> (<code>npm run build</code>)</li><li><strong>Vue.js</strong> (<code>npm run build</code>)</li><li><strong>Angular</strong> (<code>ng build --prod</code>)</li></ul><h2 id="❔-setting-up-a-fullstack-flash-application" tabindex="-1">❔ Setting up a Fullstack Flash Application <a class="header-anchor" href="#❔-setting-up-a-fullstack-flash-application" aria-label="Permalink to "❔ Setting up a Fullstack Flash Application""></a></h2><p>To get started with fullstack development using Flash, you will first need to choose a frontend framework and set up the build process to compile the frontend assets. This guide will cover only some of the most popular javascript frontend build tools, but the process is similar for others.</p><h3 id="🛠️-setting-up-the-frontend-build-process" tabindex="-1">🛠️ Setting up the Frontend Build Process <a class="header-anchor" href="#🛠️-setting-up-the-frontend-build-process" aria-label="Permalink to "🛠️ Setting up the Frontend Build Process""></a></h3><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>When building a frontend application with a javascript framework that will be served on a subpath (e.g., <code>/app</code>), you need to specify the homepage in the <code>package.json</code> file. This ensures that the frontend assets are correctly loaded from the subpath. Using a subpath and forgetting to set the homepage will result in broken asset links and a potentially non-functional frontend.</p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "homepage"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/your-subpath"</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div><ul><li><p><code>Vite</code> :</p><details class="details custom-block"><summary>Click to expand</summary><ol><li>Install Vite on your project if it's not already installed or scaffold a new Vite project (follow the <a href="https://vite.dev/guide/#scaffolding-your-first-vite-project" target="_blank" rel="noreferrer">official guide</a>).</li><li>Edit the <code>vite.config.js</code> or <code>vite.config.ts</code> build section to output the compiled files to the <code>resources/frontend</code> folder of your Flash project (see example below).</li></ol><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark has-diff vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span>
|
||
<span class="line diff add"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'path'</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defineConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span>
|
||
<span class="line"></span>
|
||
<span class="line diff add"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> build: { </span></span>
|
||
<span class="line diff add"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> outDir: path.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(__dirname, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'..path/to/your/src/main/resources/frontend'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span></span>
|
||
<span class="line diff add"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> emptyOutDir: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
|
||
<span class="line diff add"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span></code></pre></div><ol start="3"><li>The output of your Vite build will be placed in the <code>resources/frontend</code> folder of your Flash project, ready to be packaged into the JAR file.</li></ol></details></li><li><p><code>Parcel</code></p><details class="details custom-block"><summary>Click to expand</summary><ol><li>Install Parcel on your project if it's not already installed or scaffold a new Parcel project (follow the <a href="https://parceljs.org/getting-started/webapp/" target="_blank" rel="noreferrer">official guide</a>).</li><li>Edit the Parcel build command to output the compiled files to the <code>resources/frontend</code> folder of your Flash project (see example below).<div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "scripts"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "build"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"parcel build src/index.html --out-dir ../path/to/your/src/main/resources/frontend"</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></li><li>The output of your Parcel build will be placed in the <code>resources/frontend</code> folder of your Flash project, ready to be packaged into the JAR file.</li></ol></details></li></ul><h3 id="🛜-serve-the-frontend-with-flash" tabindex="-1">🛜 Serve the Frontend with Flash <a class="header-anchor" href="#🛜-serve-the-frontend-with-flash" aria-label="Permalink to "🛜 Serve the Frontend with Flash""></a></h3><p>Once you have compiled the frontend assets and placed them in the <code>resources/frontend</code> folder, you can serve them using Flash's dynamic file server. This server will serve the frontend assets from the JAR's resources folder.</p><div class="info custom-block"><p class="custom-block-title">INFO</p><p>NOTE: The following example is assuming you plan to serve the frontend from the root path (<code>/</code>). If you plan to serve the frontend from a subpath (e.g., <code>/app</code>), you will need to adjust the endpoint path accordingly by adding a trailing <code>/*</code>.</p></div><div class="language-java vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">java</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">public</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Example</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> public</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> static</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> void</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">String</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[] </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">args</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> FlashServer server </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FlashServer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8080</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> server.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">serveDynamic</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/*"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> DynamicFileServerConfiguration</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "frontend"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// points to the resources/frontend folder</span></span>
|
||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "index.html"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> SourceType.RESOURCESTREAM</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ));</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> server.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="🚀-package-and-deploy-your-app" tabindex="-1">🚀 Package and Deploy your app! <a class="header-anchor" href="#🚀-package-and-deploy-your-app" aria-label="Permalink to "🚀 Package and Deploy your app!""></a></h3><p>With the frontend and backend code in place, you can now build the JAR file and deploy it to your server. The JAR file will contain both the frontend and backend code, making it easy to deploy and run your fullstack application.</p><p>All you've left to do is run the jarfile on any machine that has Java installed, and your fullstack application will be up and running!</p></div></div></main><footer class="VPDocFooter" data-v-e6f2a212 data-v-1bcd8184><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-1bcd8184><span class="visually-hidden" id="doc-footer-aria-label" data-v-1bcd8184>Pager</span><div class="pager" data-v-1bcd8184><a class="VPLink link pager-link prev" href="/flash/advanced/handler-default-implementations.html" data-v-1bcd8184><!--[--><span class="desc" data-v-1bcd8184>Previous page</span><span class="title" data-v-1bcd8184>Handler Default Implementations</span><!--]--></a></div><div class="pager" data-v-1bcd8184><!----></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"flash_advanced_fullstack-development.md\":\"DFJ2Nfm_\",\"flash_advanced_handler-default-implementations.md\":\"CRxyEpV6\",\"flash_core-concepts_handlers.md\":\"BZuBmBSX\",\"flash_core-concepts_request-handler.md\":\"fjZWLpOw\",\"flash_core-concepts_request-response.md\":\"BuTSfkDO\",\"flash_core-concepts_server-router.md\":\"DIWo49Yl\",\"flash_core-concepts_websockets.md\":\"ByGVX96c\",\"flash_file-serving_dynamic-file-server.md\":\"DY_r4ecH\",\"flash_file-serving_static-file-server.md\":\"BvN0FZB2\",\"flash_index.md\":\"CAxgiNVz\",\"flash_introduction_installation.md\":\"BEOKwAAp\",\"index.md\":\"tEfotoPq\",\"mobot_commands_command-arguments.md\":\"Cuc3b3v9\",\"mobot_commands_creating-a-command.md\":\"DrPP2R0G\",\"mobot_configuration_custom-configs.md\":\"BBg-YrVf\",\"mobot_configuration_default-config.md\":\"CWK17AB-\",\"mobot_configuration_non-yaml-configs.md\":\"D1wDyLf4\",\"mobot_creating-a-module_module-lifecycle.md\":\"BfG9RjVD\",\"mobot_creating-a-module_modules-introduction.md\":\"BWpvzdqx\",\"mobot_events_creating-a-listener.md\":\"By59Lqsu\",\"mobot_events_events-introduction.md\":\"cEArHWcq\",\"mobot_index.md\":\"Bklchsn4\",\"mobot_introduction_installation.md\":\"D8x3Ns7p\",\"serverlibraries_index.md\":\"CeIqSPIs\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Pixel Services Docs\",\"description\":\"Documentation for all public Pixel Services projects.\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"https://static.pixel-services.com/static/assets/pservices_logo.png\",\"sidebar\":{\"/flash/\":[{\"text\":\"Introduction\",\"collapsed\":false,\"items\":[{\"text\":\"Getting Started\",\"link\":\"/flash\"},{\"text\":\"Installation\",\"link\":\"/flash/introduction/installation\"}]},{\"text\":\"Core Concepts\",\"collapsed\":false,\"items\":[{\"text\":\"Handlers\",\"link\":\"/flash/core-concepts/handlers\"},{\"text\":\"RequestHandler\",\"link\":\"/flash/core-concepts/request-handler\"},{\"text\":\"Request and Response\",\"link\":\"/flash/core-concepts/request-response\"},{\"text\":\"Server Router\",\"link\":\"/flash/core-concepts/server-router\"},{\"text\":\"Websockets\",\"link\":\"/flash/core-concepts/websockets\"}]},{\"text\":\"File Serving\",\"collapsed\":false,\"items\":[{\"text\":\"Static Files Server\",\"link\":\"/flash/file-serving/static-file-server\"},{\"text\":\"Dynamic Files Server\",\"link\":\"/flash/file-serving/dynamic-file-server\"}]},{\"text\":\"Advanced\",\"collapsed\":false,\"items\":[{\"text\":\"Handler Default Implementations\",\"link\":\"/flash/advanced/handler-default-implementations\"},{\"text\":\"Fullstack Development\",\"link\":\"/flash/advanced/fullstack-development\"}]}],\"/mobot/\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/mobot/introduction/installation\"}]},{\"text\":\"Creating a Module\",\"collapsed\":false,\"items\":[{\"text\":\"Getting Started\",\"link\":\"/mobot/creating-a-module/modules-introduction\"},{\"text\":\"Module Lifecycle\",\"link\":\"/mobot/creating-a-module/module-lifecycle\"}]},{\"text\":\"Commands\",\"collapsed\":false,\"items\":[{\"text\":\"Creating a Command\",\"link\":\"/mobot/commands/creating-a-command\"},{\"text\":\"Command Arguments\",\"link\":\"/mobot/commands/command-arguments\"}]},{\"text\":\"Events\",\"collapsed\":false,\"items\":[{\"text\":\"What are Events?\",\"link\":\"/mobot/events/events-introduction\"},{\"text\":\"Creating a Listener\",\"link\":\"/mobot/events/creating-a-listener\"}]},{\"text\":\"Configs\",\"collapsed\":false,\"items\":[{\"text\":\"Default Config\",\"link\":\"/mobot/configuration/default-config\"},{\"text\":\"Custom Configs\",\"link\":\"/mobot/configuration/custom-configs\"},{\"text\":\"Non Yaml Configs\",\"link\":\"/mobot/configuration/non-yaml-configs\"}]}],\"/serverlibraries/\":[{\"text\":\"ServerLibraries Documentation\",\"items\":[{\"text\":\"Getting Started\",\"link\":\"/serverlibraries\"}]}]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||
|
||
</body>
|
||
</html> |