PageSourceSearch

https://fab.dev/guides/deploying

html fab.dev collected 2026-10-02 03:17:11 UTC 70,768 bytes, 146 lines download raw bytes

1<!DOCTYPE html><html data-n-head-ssr lang="en-US" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22en-US%22%7D%7D"><head>
1<script>window.FAB_SETTINGS={};</script>
1
2    <title>Frontend Application Bundles</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="og:site_name" property="og:site_name" content="Frontend Application Bundles"><meta data-n-head="ssr" data-hid="og:type" property="og:type" content="website"><meta data-n-head="ssr" data-hid="og:url" property="og:url" content="https://fab.dev"><meta data-n-head="ssr" data-hid="og:image" property="og:image" content="https://fab.dev/card.png"><meta data-n-head="ssr" data-hid="twitter:card" name="twitter:card" content="summary_large_image"><meta data-n-head="ssr" data-hid="twitter:site" name="twitter:site" content="@fab_spec"><meta data-n-head="ssr" data-hid="twitter:image" name="twitter:image" content="https://fab.dev/card.png"><meta data-n-head="ssr" data-hid="twitter:image:alt" name="twitter:image:alt" content="The FAB Project"><meta data-n-head="ssr" data-hid="mobile-web-app-capable" name="mobile-web-app-capable" content="yes"><meta data-n-head="ssr" data-hid="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content="@fab/docs"><meta data-n-head="ssr" data-hid="theme-color" name="theme-color" content="#1C6FD8"><meta data-n-head="ssr" data-hid="og:locale" property="og:locale" content="en_US"><meta data-n-head="ssr" data-hid="description" name="description" content="Manually deploy your FAB to the cloud"><meta data-n-head="ssr" data-hid="og:title" property="og:title" content="Deploying"><meta data-n-head="ssr" data-hid="og:description" property="og:description" content="Manually deploy your FAB to the cloud"><meta data-n-head="ssr" data-hid="twitter:title" name="twitter:title" content="Deploying"><meta data-n-head="ssr" data-hid="twitter:description" name="twitter:description" content="Manually deploy your FAB to the cloud"><link data-n-head="ssr" rel="icon" type="image/png" href="/favicon-32x32.png"><link data-n-head="ssr" rel="manifest" href="/_nuxt/manifest.bf24e00c.json"><link data-n-head="ssr" data-hid="alternate-hreflang-en" rel="alternate" href="/guides/deploying" hreflang="en"><link data-n-head="ssr" data-hid="alternate-hreflang-en-US" rel="alternate" href="/guides/deploying" hreflang="en-US">
2<script data-n-head="ssr" data-goatcounter="https://fab.goatcounter.com/count" async src="https://gc.zgo.at/count.js"></script>
2<link rel="preload" href="/_nuxt/510eee772fe8f5c11a5b.js" as="script"><link rel="preload" href="/_nuxt/e4f5c1eee4c2fadec90f.js" as="script"><link rel="preload" href="/_nuxt/28e834e1d7f8ba4cedc8.js" as="script"><link rel="preload" href="/_nuxt/759bb7aab0a82df936cc.js" as="script"><link rel="preload" href="/_nuxt/045607e3b74e19b24e55.js" as="script"><style data-vue-ssr-id="38dfa7e4:0 0623093e:0 7e56e4e3:0 56b15182:0 79b217f6:0 10a809d0:0">/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none;padding:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#a0aec0}input::-moz-placeholder,textarea::-moz-placeholder{color:#a0aec0}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#a0aec0}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:#a0aec0}input::placeholder,textarea::placeholder{color:#a0aec0}
2[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.bg-black{--bg-opacity:1;background-color:#000;background-color:rgba(0,0,0,var(--bg-opacity))}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.bg-gray-200{--bg-opacity:1;background-color:#edf2f7;background-color:rgba(237,242,247,var(--bg-opacity))}.bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.bg-orange-100{--bg-opacity:1;background-color:#fffaf0;background-color:rgba(255,250,240,var(--bg-opacity))}.bg-orange-200{--bg-opacity:1;background-color:#feebc8;background-color:rgba(254,235,200,var(--bg-opacity))}.bg-yellow-800{--bg-opacity:1;background-color:#975a16;background-color:rgba(151,90,22,var(--bg-opacity))}.bg-yellow-900{--bg-opacity:1;background-color:#744210;background-color:rgba(116,66,16,var(--bg-opacity))}.bg-green-600{--bg-opacity:1;background-color:#38a169;background-color:rgba(56,161,105,var(--bg-opacity))}.bg-blue-100{--bg-opacity:1;background-color:#ebf8ff;background-color:rgba(235,248,255,var(--bg-opacity))}.bg-blue-200{--bg-opacity:1;background-color:#bee3f8;background-color:rgba(190,227,248,var(--bg-opacity))}.bg-blue-800{--bg-opacity:1;background-color:#2c5282;background-color:rgba(44,82,130,var(--bg-opacity))}.bg-blue-900{--bg-opacity:1;background-color:#2a4365;background-color:rgba(42,67,101,var(--bg-opacity))}.focus\:bg-white:focus{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.dark-mode .dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark-mode .dark\:bg-gray-900{--bg-opacity:1;
2background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark-mode .dark\:bg-green-900{--bg-opacity:1;background-color:#22543d;background-color:rgba(34,84,61,var(--bg-opacity))}.focus\:bg-opacity-100:focus,.hover\:bg-opacity-100:hover{--bg-opacity:1}.border-transparent{border-color:transparent}.border-gray-300{--border-opacity:1;border-color:#e2e8f0;border-color:rgba(226,232,240,var(--border-opacity))}.border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.focus\:border-gray-300:focus{--border-opacity:1;border-color:#e2e8f0;border-color:rgba(226,232,240,var(--border-opacity))}.dark-mode .dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark-mode .dark\:border-gray-800{--border-opacity:1;border-color:#2d3748;border-color:rgba(45,55,72,var(--border-opacity))}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border-dashed{border-style:dashed}.border{border-width:1px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-b{border-bottom-width:1px}.first\:border-t-0:first-child{border-top-width:0}.block{display:block}.flex{display:flex}.table{display:table}.hidden{display:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.items-end{align-items:flex-end}.items-center{align-items:center}.self-start{align-self:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.font-mono{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-light{font-weight:300}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-black{font-weight:900}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-16{height:4rem}.h-24{height:6rem}.h-full{height:100%}.h-screen{height:100vh}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}.leading-5{line-height:1.25rem}.leading-7{line-height:1.75rem}.leading-none{line-height:1}.leading-snug{line-height:1.375}.leading-normal{line-height:1.5}.list-inside{list-style-position:inside}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.m-0{margin:0}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.-mx-4{margin-left:-1rem;margin-right:-1rem}.mt-0{margin-top:0}.mr-1{margin-right:.25rem}.ml-1{margin-left:.25rem}.mr-2{margin-right:.5rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.mt-3{margin-top:.75rem}.mr-3{margin-right:.75rem}.mb-3{margin-bottom:.75rem}.mt-4{margin-top:1rem}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.mb-6{margin-bottom:1.5rem}.mt-8{margin-top:2rem}.mb-12{margin-bottom:3rem}.mt-px{margin-top:1px}.-ml-5{margin-left:-1.25rem}.-ml-6{margin-left:-1.5rem}.-mt-16{margin-top:-4rem}.last\:mb-0:last-child{margin-bottom:0}.focus\:outline-none:focus{outline:0}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-hidden{overflow-y:hidden}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-4{padding-left:1rem;padding-right:1rem}.pr-0{padding-right:0}.pl-0{padding-left:0}.pt-1{padding-top:.25rem}.pr-1{padding-right:.25rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pr-3{padding-right:.75rem}.pl-3{padding-left:.75rem}.pt-4{padding-top:1rem}.pb-4{padding-bottom:1rem}.pl-4{padding-left:1rem}.pl-10{padding-left:2.5rem}.pt-16{padding-top:4rem}.placeholder-gray-900::-webkit-input-placeholder{--placeholder-opacity:1;
2color:#1a202c;color:rgba(26,32,44,var(--placeholder-opacity))}.placeholder-gray-900::-moz-placeholder{--placeholder-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--placeholder-opacity))}.placeholder-gray-900:-ms-input-placeholder{--placeholder-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--placeholder-opacity))}.placeholder-gray-900::-ms-input-placeholder{--placeholder-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--placeholder-opacity))}.placeholder-gray-900::placeholder{--placeholder-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--placeholder-opacity))}.pointer-events-none{pointer-events:none}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0;bottom:0}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.shadow-xs{box-shadow:0 0 0 1px rgba(0,0,0,.05)}.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.fill-current{fill:currentColor}.fill-nuxt-lightgreen{fill:#41b38a}.fill-nuxt-green{fill:#158876}.text-center{text-align:center}.text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.text-gray-100{--text-opacity:1;color:#f7fafc;color:rgba(247,250,252,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-800{--text-opacity:1;color:#2d3748;color:rgba(45,55,72,var(--text-opacity))}.text-orange-300{--text-opacity:1;color:#fbd38d;color:rgba(251,211,141,var(--text-opacity))}.text-green-200{--text-opacity:1;color:#c6f6d5;color:rgba(198,246,213,var(--text-opacity))}.text-green-600{--text-opacity:1;color:#38a169;color:rgba(56,161,105,var(--text-opacity))}.text-blue-300{--text-opacity:1;color:#90cdf4;color:rgba(144,205,244,var(--text-opacity))}.text-blue-600{--text-opacity:1;color:#3182ce;color:rgba(49,130,206,var(--text-opacity))}.text-blue-700{--text-opacity:1;color:#2b6cb0;color:rgba(43,108,176,var(--text-opacity))}.hover\:text-gray-700:hover{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.hover\:text-blue-600:hover{--text-opacity:1;color:#3182ce;color:rgba(49,130,206,var(--text-opacity))}.dark-mode .dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark-mode .dark\:text-gray-100{--text-opacity:1;color:#f7fafc;color:rgba(247,250,252,var(--text-opacity))}.dark-mode .dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.dark-mode .dark\:text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.dark-mode .dark\:text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.dark-mode .dark\:text-green-200{--text-opacity:1;color:#c6f6d5;color:rgba(198,246,213,var(--text-opacity))}.dark-mode .dark\:text-green-700{--text-opacity:1;color:#2f855a;color:rgba(47,133,90,var(--text-opacity))}.dark-mode .dark-hover\:text-gray-100:hover{--text-opacity:1;color:#f7fafc;color:rgba(247,250,252,var(--text-opacity))}.dark-mode .dark-hover\:text-green-200:hover{--text-opacity:1;color:#c6f6d5;color:rgba(198,246,213,var(--text-opacity))}.uppercase{text-transform:uppercase}.hover\:underline:hover{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-auto{width:auto}.w-1\/6{width:16.666667%}.w-4\/6{width:66.666667%}.w-full{width:100%}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.transform{--transform-translate-x:0;--transform-translate-y:0;--transform-rotate:0;--transform-skew-x:0;--transform-skew-y:0;--transform-scale-x:1;--transform-scale-y:1;transform:translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))}.hover\:translate-x-1:hover{--transform-translate-x:0.25rem}.transition-all{transition-property:all}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform}.transition-transform{transition-property:transform}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-300{transition-duration:.3s}@media (min-width:640px){.sm\:block{display:block}}@media (min-width:768px){.md\:bg-transparent{background-color:transparent}.md\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.md\:bg-opacity-75{--bg-opacity:0.75}.md\:border-r{border-right-width:1px}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-auto{height:auto}.md\:mx-8{margin-left:2rem;margin-right:2rem}.md\:-mt-16{margin-top:-4rem}.md\:overflow-y-auto{overflow-y:auto}.md\:py-8{padding-top:2rem;padding-bottom:2rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:pl-0{padding-left:0}.md\:pb-4{padding-bottom:1rem}.md\:pt-8{padding-top:2rem}.md\:pr-8{padding-right:2rem}.md\:placeholder-gray-100::-webkit-input-placeholder{--placeholder-opacity:1;color:#f7fafc;color:rgba(247,250,252,var(--placeholder-opacity))}.md\:placeholder-gray-100::-moz-placeholder{--placeholder-opacity:1;color:#f7fafc;color:rgba(247,250,252,var(--placeholder-opacity))}.md\:placeholder-gray-100:-ms-input-placeholder{--placeholder-opacity:1;color:#f7fafc;color:rgba(247,250,252,var(--placeholder-opacity))}.md\:placeholder-gray-100::-ms-input-placeholder{--placeholder-opacity:1;color:#f7fafc;color:rgba(247,250,252,var(--placeholder-opacity))}.md\:placeholder-gray-100::placeholder{--placeholder-opacity:1;color:#f7fafc;color:rgba(247,250,252,var(--placeholder-opacity))}.md\:sticky{position:-webkit-sticky;position:sticky}.md\:w-1\/5{width:20%}.md\:w-4\/5{width:80%}}@media (min-width:1024px){.lg\:text-xs{font-size:.75rem}.lg\:text-base{font-size:1rem}.lg\:-mx-8{margin-left:-2rem;margin-right:-2rem}.lg\:mb-2{margin-bottom:.5rem}.lg\:-mt-24{margin-top:-6rem}.lg\:p-8{padding:2rem}.lg\:px-2{padding-left:.5rem;padding-right:.5rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:pt-24{padding-top:6rem}.lg\:sticky{position:-webkit-sticky;position:sticky}.lg\:top-0{top:0}.lg\:w-1\/4{width:25%}.lg\:w-3\/4{width:75%}}@media (min-width:1280px){.xl\:block{display:block}.xl\:w-3\/4{width:75%}}code[class*=language-],pre[class*=language-]{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;color:#c3cee3;background:#263238;font-family:Roboto Mono,monospace;font-size:1em;line-height:1.5em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{background:#363636}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{background:#363636}:not(pre)>code[class*=language-]{white-space:normal;border-radius:.2em;padding:.1em}
2pre[class*=language-]{overflow:auto;position:relative;margin:.5em 0;padding:1.25em 1em}.language-css>code,.language-sass>code,.language-scss>code{color:#fd9170}[class*=language-] .namespace{opacity:.7}.token.atrule{color:#c792ea}.token.attr-name{color:#ffcb6b}.token.attr-value,.token.attribute{color:#c3e88d}.token.boolean{color:#c792ea}.token.builtin{color:#ffcb6b}.token.cdata,.token.char{color:#80cbc4}.token.class{color:#ffcb6b}.token.class-name,.token.color{color:#f2ff00}.token.comment{color:#546e7a}.token.constant{color:#c792ea}.token.deleted{color:#f07178}.token.doctype{color:#546e7a}.token.entity{color:#f07178}.token.function{color:#c792ea}.token.hexcode{color:#f2ff00}.token.id,.token.important{color:#c792ea;font-weight:700}.token.inserted{color:#80cbc4}.token.keyword{color:#c792ea;font-style:italic}.token.number{color:#fd9170}.token.operator{color:#89ddff}.token.prolog{color:#546e7a}.token.property{color:#80cbc4}.token.pseudo-class,.token.pseudo-element{color:#c3e88d}.token.punctuation{color:#89ddff}.token.regex{color:#f2ff00}.token.selector{color:#f07178}.token.string{color:#c3e88d}.token.symbol{color:#c792ea}.token.tag,.token.unit{color:#f07178}.token.url{color:#fd9170}.token.variable{color:#f07178}.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#1c6fd8;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}.aside-title{margin-bottom:.75rem;--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity));text-transform:uppercase;letter-spacing:.025em;font-weight:700;font-size:.875rem}.dark-mode .aside-title{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}@media (min-width:768px){.aside-title{margin-bottom:.5rem;font-size:.75rem}}@media (min-width:1024px){.aside-title{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}}.search-input:focus::-webkit-input-placeholder{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.search-input:focus::-moz-placeholder{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.search-input:focus:-ms-input-placeholder{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.search-input:focus::-ms-input-placeholder{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.search-input:focus::placeholder{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.dark-mode .nuxt-content blockquote,.dark-mode .nuxt-content h2,.dark-mode .nuxt-content h3{--border-opacity:1;border-color:#2d3748;border-color:rgba(45,55,72,var(--border-opacity))}.dark-mode .nuxt-content h3>code,.dark-mode .nuxt-content li>code,.dark-mode .nuxt-content p>code,.dark-mode .nuxt-content>code{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.nuxt-content h1{font-size:3rem;font-weight:300;margin-top:2rem;margin-bottom:3rem;line-height:1;text-align:center}.nuxt-content h1 small{display:block;font-size:1.5rem;margin-top:1rem}.nuxt-content h2{font-size:1.875rem;font-weight:800;margin-bottom:1rem;padding-bottom:.25rem;margin-top:-4rem;padding-top:6rem}.nuxt-content h2>a{margin-left:1.5rem}.nuxt-content h2>a:before{content:"#";--text-opacity:1;color:#2b6cb0;color:rgba(43,108,176,var(--text-opacity));font-weight:400;margin-left:-1.5rem;padding-right:.25rem;position:absolute;opacity:1}.nuxt-content h2:hover>a:before{opacity:1}.nuxt-content h3{font-size:1.5rem;font-weight:800;margin-bottom:.5rem;padding-bottom:.25rem;margin-top:-4rem;padding-top:5rem}.nuxt-content h3>a{margin-left:1.5rem}.nuxt-content h3>a:before{content:"#";--text-opacity:1;color:#2b6cb0;color:rgba(43,108,176,var(--text-opacity));font-weight:400;margin-left:-1.25rem;padding-right:.25rem;position:absolute;opacity:1}.nuxt-content h3:hover>a:before{opacity:1}@media (min-width:1024px){.nuxt-content h2 a,.nuxt-content h3 a{margin-left:0}.nuxt-content h2 a:before,.nuxt-content h3 a:before{opacity:0}}.nuxt-content ol,.nuxt-content ul{list-style-type:disc;list-style-position:inside;margin-bottom:1rem}.nuxt-content ol>li,.nuxt-content ul>li{line-height:1.75rem}.nuxt-content ol>li>ul,.nuxt-content ul>li>ul{padding-left:1rem}.nuxt-content ol{list-style-type:decimal}.nuxt-content a{text-decoration:underline}.nuxt-content p{margin-bottom:1rem;line-height:1.75rem}.nuxt-content blockquote{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;margin-bottom:1rem;border-left-width:4px}.nuxt-content li>code,.nuxt-content p>code,.nuxt-content>code{font-size:.875rem}.nuxt-content h3>code,.nuxt-content li>code,.nuxt-content p>code,.nuxt-content>code{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity));padding:.25rem;box-shadow:0 0 0 1px rgba(0,0,0,.05);border-radius:.25rem}.nuxt-content h3>code{font-size:1.125rem}.nuxt-content pre[class*=language-]{border-radius:.25rem;margin-top:0;margin-bottom:1rem;padding:1rem;--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity));font-size:.875rem;position:relative;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity));position:relative;text-shadow:none}.nuxt-content h5 a{text-decoration:none}.nuxt-content video{width:100%;border-width:1px;border-radius:.25rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.nuxt-content .inline-images+p{padding-bottom:1rem}.nuxt-content .inline-images+p img{display:inline}.nuxt-content .inline-video{margin-top:2rem;margin-bottom:2rem;width:100%;padding-top:56.25%;position:relative}.nuxt-content .inline-video>iframe{position:absolute;top:0;left:0;width:100%;height:100%}.nuxt-content-highlight{position:relative}.nuxt-content-highlight>.filename{display:block;--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity));font-weight:700;z-index:10;padding-bottom:.5rem;font-size:.875rem;text-align:center}</style><link rel="preload" href="/_nuxt/static/1619648227/guides/deploying/state.js" as="script"><link rel="preload" href="/_nuxt/static/1619648227/guides/deploying/payload.js" as="script">
3  </head>
4  <body class="antialiased text-gray-800 leading-normal bg-white dark:bg-gray-900 dark:text-gray-100" data-n-head="%7B%22class%22:%7B%22ssr%22:%5B%22antialiased%20text-gray-800%20leading-normal%20bg-white%20dark:bg-gray-900%20dark:text-gray-100%22%5D%7D%7D">
5    
5<script data-n-head="ssr" data-hid="nuxt-color-mode-script" data-pbody="true">!function (){"use strict";var e=window,t=document,s=t.documentElement,n=["dark","light"],a=function(e){for(var s=e+"=",n=t.cookie.split(";"),a=0;a<n.length;a++){for(var o=n[a];" "===o.charAt(0);)o=o.substring(1,o.length);if(0===o.indexOf(s))return o.substring(s.length,o.length)}return null}("nuxt-color-mode")||"light",o="system"===a?i():a;function r(e){var t=e+"-mode";s.classList?s.classList.add(t):s.className+=" "+t}function c(t){return e.matchMedia("(prefers-color-scheme"+t+")")}function i(){if(e.matchMedia&&"not all"!==c("").media)for(var t of n)if(c(":"+t).matches)return t;return"light"}r(o),e["__NUXT_COLOR_MODE__"]={preference:a,value:o,getColorScheme:i,addClass:r,removeClass:function(e){var t=e+"-mode";s.classList?s.classList.remove(t):s.className=s.className.replace(new RegExp(t,"g"),"")}}}();
6</script>
6<div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div class="pt-16"><nav class="fixed top-0 z-40 w-full bg-blue-900"><div class="container mx-auto px-4 md:px-8 flex-1"><div class="flex items-center justify-between h-16 text-gray-100"><div class="w-1/6"><a href="/" aria-label="FAB Logo" class="text-xl font-bold tracking-tight flex items-center flex-shrink-0 nuxt-link-active" style="width:104px"><svg width="104" height="32" viewBox="0 0 104 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8 w-auto"><g clip-path="url(#clip0)"><path d="M5.64319 11.9802V10.8685L12.5411 4.75435L21.0402 4L28.6359 5.07201L35 11.3847L34.1378 12.5361L20.3215 28.6555L5.64319 11.9802Z" fill="url(#paint0_linear)"/> <path d="M6 11.4269L8.48894 12.9142L11.2176 13.5504L15.3107 14.1072L19.6446 14.3458H24.8612L29.0345 14.0277L33.6149 12.9142" stroke="#1C6FD8" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.5314 4.89972L15.1837 6.90807H25.1742L28.594 5.30145" stroke="#1C6FD8" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M20.5606 29L11.2177 13.5504L15.0376 6.90808" stroke="#1C6FD8" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M25.9045 6.5509L18.8008 14.3457" stroke="#1C6FD8" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M20.5606 28.4979L18.8007 14.3457L17.1359 10.4483L15.5397 6.90808" stroke="#1C6FD8" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M20.5605 28.4979L29.0344 14.0276L25.9045 6.55096" stroke="#1C6FD8" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.0293 20.2541L15.993 20.7853L20.6223 21.0222H23.2508L25.5667 20.7402L27.549 20.2542" stroke="#1C6FD8" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M6 12.1268V11.0151L12.7504 4.90096L21.0678 4.14661L28.501 5.21862L34.729 11.5313L33.8853 12.6827L20.5606 29L6 12.1268Z" stroke="#1C6FD8" stroke-linecap="round" stroke-linejoin="round"/> <g><path d="M41.0437 27V7.15796H53.6518V10.6168H45.0697V15.3447H52.815V18.8035H45.0697V27H41.0437ZM59.4414 27H55.1271L61.7008 7.15796H66.8891L73.4535 27H69.1392L67.7259 22.4755H60.8547L59.4414 27ZM61.8775 19.2008H66.7125L64.3694 11.6922H64.2206L61.8775 19.2008ZM77.3091 27V7.15796H84.9335C89.1362 7.15796 91.2562 9.27005 91.2562 12.2444C91.2562 14.5793 89.7964 16.0423 87.8159 16.5074V16.7011C89.9823 16.8077 92 18.5807 92 21.5163C92 24.6748 89.722 27 85.4449 27H77.3091ZM81.3352 23.5703H84.6174C86.8675 23.5703 87.8438 22.5917 87.8438 21.0997C87.8438 19.4623 86.6443 18.2997 84.7104 18.2997H81.3352V23.5703ZM81.3352 15.461H84.3198C85.9656 15.461 87.1929 14.5115 87.1929 12.942C87.1929 11.5081 86.1794 10.5489 84.3942 10.5489H81.3352V15.461Z" fill="black"/></g> <path d="M41.0437 27V7.15796H53.6518V10.6168H45.0697V15.3447H52.815V18.8035H45.0697V27H41.0437ZM59.4414 27H55.1271L61.7008 7.15796H66.8891L73.4535 27H69.1392L67.7259 22.4755H60.8547L59.4414 27ZM61.8775 19.2008H66.7125L64.3694 11.6922H64.2206L61.8775 19.2008ZM77.3091 27V7.15796H84.9335C89.1362 7.15796 91.2562 9.27005 91.2562 12.2444C91.2562 14.5793 89.7964 16.0423 87.8159 16.5074V16.7011C89.9823 16.8077 92 18.5807 92 21.5163C92 24.6748 89.722 27 85.4449 27H77.3091ZM81.3352 23.5703H84.6174C86.8675 23.5703 87.8438 22.5917 87.8438 21.0997C87.8438 19.4623 86.6443 18.2997 84.7104 18.2997H81.3352V23.5703ZM81.3352 15.461H84.3198C85.9656 15.461 87.1929 14.5115 87.1929 12.942C87.1929 11.5081 86.1794 10.5489 84.3942 10.5489H81.3352V15.461Z" fill="url(#paint1_linear)"/> <path d="M45.4036 10.8337V15.0784H53.0938V18.912H45.4036V27H41V7H53.9246V10.8337H45.4036ZM67.548 22.5354H61.0207L59.6174 27H54.9014L61.5685 7H67.0095L73.6672 27H68.9513L67.548 22.5354ZM62.1683 18.8834H66.4096L64.289 12.1295L62.1683 18.8834ZM64.2153 11.8948L64.2151 11.8943V11.7343L64.289 11.7094L64.3628 11.7343V11.8943L64.3626 11.8948H64.2153ZM88.2381 16.4835C90.3905 16.8706 92 18.7817 92 21.3786C92 24.7734 89.4657 27 85.2884 27H77.0074V7H84.7807C88.8804 7 91.2615 9.0177 91.2615 12.2294C91.2615 14.3182 90.1023 15.8458 88.2381 16.4835ZM81.411 23.195H84.4668C86.4907 23.195 87.4671 22.3986 87.4671 20.9675C87.4671 19.4421 86.337 18.4149 84.5591 18.4149H81.411V23.195ZM81.411 15.1931H84.1714C85.7535 15.1931 86.8209 14.2958 86.8209 12.9178C86.8209 11.5942 85.8741 10.7667 84.2452 10.7667H81.411V15.1931Z" stroke="#1C6FD8" stroke-linecap="round" stroke-linejoin="round"/></g> <defs><filter id="filter0_d" x="21.0437" y="-12.842" width="90.9563" height="59.842" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
6<feFlood flood-opacity="0" result="BackgroundImageFix"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> <feOffset/> <feGaussianBlur stdDeviation="10"/> <feColorMatrix type="matrix" values="0 0 0 0 0.686275 0 0 0 0 0.956863 0 0 0 0 1 0 0 0 0.5 0"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter> <linearGradient id="paint0_linear" x1="20.3216" y1="28.6555" x2="20.3216" y2="4" gradientUnits="userSpaceOnUse"><stop offset="0.578125" stop-color="#AFF4FF"/></linearGradient> <linearGradient id="paint1_linear" x1="66.5219" y1="27" x2="66.5219" y2="7.15796" gradientUnits="userSpaceOnUse"><stop offset="1" stop-color="#AFF4FF"/></linearGradient> <clipPath id="clip0"><rect width="104" height="32" fill="white"/></clipPath></defs></svg></a></div> <div class="hidden flex-1 md:flex justify-center ml-4 mr-2 md:mx-8 w-4/6"><div class="w-full relative flex flex-col justify-between"><div class="w-full relative"><label for="search" class="sr-only">Search</label> <div class="relative transition-all duration-100"><div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="h-5 w-5 text-gray-500"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg></div> <input id="search" placeholder="Search the docs (Press &quot;/&quot; to focus)" type="search" autocomplete="off" class="search-input block md:bg-opacity-75 hover:bg-opacity-100 transition-all duration-100 focus:bg-opacity-100 w-full pl-10 pr-3 py-2 truncate leading-5 placeholder-gray-900 md:placeholder-gray-100 border border-transparent text-gray-700 focus:border-gray-300 rounded-md focus:outline-none focus:bg-white bg-gray-100 md:bg-gray-800"></div></div> <ul class="z-10 absolute w-full flex-1 top-0 bg-white text-gray-700 rounded-md border border-gray-300 dark:border-gray-700 overflow-hidden" style="margin-top:37px;display:none"><!----> </ul></div></div> <div class="flex items-center justify-end w-1/6"><a href="https://twitter.com/fab_spec" target="_blank" rel="noopener noreferrer" title="Twitter" name="Twitter" class="hidden md:block hover:text-blue-600 mr-2"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6"><path d="M22 5.89584C21.2498 6.22182 20.456 6.43658 19.6438 6.53334C20.4974 6.0335 21.1393 5.23941 21.4492 4.30001C20.6421 4.77192 19.7606 5.10304 18.8425 5.27917C18.4559 4.87398 17.9909 4.55163 17.4758 4.33173C16.9607 4.11183 16.4063 3.99897 15.8463 4.00001C13.5788 4.00001 11.7438 5.80834 11.7438 8.0375C11.7421 8.34757 11.7777 8.65672 11.8496 8.95833C10.2236 8.88211 8.63147 8.46733 7.17499 7.74053C5.71852 7.01372 4.42979 5.9909 3.39125 4.73751C3.02691 5.35172 2.83422 6.05252 2.83333 6.76667C2.83333 8.16667 3.56375 9.40417 4.66667 10.1292C4.01322 10.1137 3.37316 9.94071 2.80083 9.625V9.675C2.80083 11.6333 4.2175 13.2625 6.0925 13.6333C5.73991 13.7273 5.37657 13.7749 5.01167 13.775C4.75274 13.7754 4.4944 13.7503 4.24042 13.7C4.76167 15.3042 6.27875 16.4708 8.07583 16.5042C6.61557 17.6295 4.82276 18.2378 2.97917 18.2333C2.65192 18.2328 2.32499 18.2134 2 18.175C3.87549 19.3726 6.0556 20.006 8.28083 20C15.8375 20 19.9658 13.8458 19.9658 8.50833C19.9658 8.33333 19.9613 8.15834 19.9529 7.9875C20.7542 7.41753 21.4474 6.70922 22 5.89584V5.89584Z"/></svg></a> <a href="https://github.com/fab-spec/fab" target="_blank" rel="noopener noreferrer" title="Github" name="Github" class="hidden md:block hover:text-blue-600 mr-4"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6"><path d="M12 2C6.47768 2 2 6.59375 2 12.2545C2 16.7857 4.86607 20.625 8.83929 21.9821C8.89502 21.9942 8.9519 22.0002 9.00893 22C9.37946 22 9.52232 21.7277 9.52232 21.4911C9.52232 21.2455 9.51339 20.6027 9.50893 19.7455C9.17814 19.8231 8.83974 19.8635 8.5 19.8661C6.57589 19.8661 6.13839 18.3705 6.13839 18.3705C5.68304 17.1875 5.02679 16.8705 5.02679 16.8705C4.15625 16.2589 5.02232 16.2411 5.08929 16.2411H5.09375C6.09821 16.3304 6.625 17.3036 6.625 17.3036C7.125 18.1786 7.79464 18.4241 8.39286 18.4241C8.78841 18.4162 9.17784 18.3249 9.53571 18.1562C9.625 17.4955 9.88393 17.0446 10.1696 16.7857C7.95089 16.5268 5.61607 15.6473 5.61607 11.7187C5.61607 10.5982 6.00446 9.68303 6.64286 8.96875C6.54018 8.70982 6.19643 7.66518 6.74107 6.25446C6.81413 6.23698 6.88921 6.22947 6.96429 6.23214C7.32589 6.23214 8.14286 6.37053 9.49107 7.30803C11.1293 6.84969 12.8618 
66.84969 14.5 7.30803C15.8482 6.37053 16.6652 6.23214 17.0268 6.23214C17.1019 6.22947 17.1769 6.23698 17.25 6.25446C17.7946 7.66518 17.4509 8.70982 17.3482 8.96875C17.9866 9.6875 18.375 10.6027 18.375 11.7187C18.375 15.6562 16.0357 16.5223 13.808 16.7768C14.1652 17.0937 14.4866 17.7187 14.4866 18.6741C14.4866 20.0446 14.4732 21.1518 14.4732 21.4866C14.4732 21.7277 14.6116 22 14.9821 22C15.0421 22.0003 15.102 21.9943 15.1607 21.9821C19.1384 20.625 22 16.7812 22 12.2545C22 6.59375 17.5223 2 12 2Z"/></svg></a> <button aria-label="Hamburger Menu" class="md:hidden p-2 pr-0 rounded-md hover:text-blue-600 focus:outline-none"><svg stroke="currentColor" fill="none" viewBox="0 0 24 24" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></button></div></div></div></nav> <main class="container mx-auto px-4 md:px-8"><div class="flex flex-wrap relative"><aside class="h-screen w-full md:w-1/5 fixed md:sticky top-0 left-0 bottom-0 pt-16 md:-mt-16 md:block bg-white dark:bg-gray-900 md:bg-transparent z-30 md:border-r hidden"><div class="container mx-auto overflow-auto h-full"><div class="md:hidden flex-1 flex justify-center px-4 mt-8 mb-4 w-full"><div class="w-full relative flex flex-col justify-between"><div class="w-full relative"><label for="search" class="sr-only">Search</label> <div class="relative transition-all duration-100"><div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="h-5 w-5 text-gray-500"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg></div> <input id="search" placeholder="Search the docs (Press &quot;/&quot; to focus)" type="search" autocomplete="off" class="search-input block md:bg-opacity-75 hover:bg-opacity-100 transition-all duration-100 focus:bg-opacity-100 w-full pl-10 pr-3 py-2 truncate leading-5 placeholder-gray-900 md:placeholder-gray-100 border border-transparent text-gray-700 focus:border-gray-300 rounded-md focus:outline-none focus:bg-white bg-gray-100 md:bg-gray-800"></div></div> <ul class="z-10 absolute w-full flex-1 top-0 bg-white text-gray-700 rounded-md border border-gray-300 dark:border-gray-700 overflow-hidden" style="margin-top:37px;display:none"><!----> </ul></div></div> <ul class="md:pl-0 p-4 md:py-8 md:pr-8"><li class="mb-6 last:mb-0"><a href="/" class="nuxt-link-active"><h3 class="aside-title">Home</h3></a></li><li class="mb-6 last:mb-0"><h3 class="aside-title">Guides</h3> <ul><li><a href="/guides/getting-started" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
7                      Getting Started
8                    </a></li><li><a href="/guides/known-project-types" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
9                      Known Project Types
10                    </a></li><li><a href="/guides/deploying" aria-current="page" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100 text-blue-600 bg-blue-100 hover:text-blue-600 dark:text-green-200 dark:bg-green-900 dark-hover:text-green-200 nuxt-link-active">
11                      Deploying
12                    </a></li><li><a href="/guides/adding-server-side-logic" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
13                      Adding Server-Side Logic
14                    </a></li><li><a href="/guides/feedback" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
15                      Giving Feedback
16                    </a></li><li><a href="/guides/contributing" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
17                      Contributing
18                    </a></li><li>
18<a href="/guides/converting-custom-ssr" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
19                      Converting Custom SSR
20                    </a></li></ul></li><li class="mb-6 last:mb-0"><h3 class="aside-title">Plugins</h3> <ul><li><a href="/plugins/introduction" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
21                      Introduction
22                    </a></li><li><a href="/plugins/server-side-routing" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
23                      Server-Side Routing
24                    </a></li></ul></li><li class="mb-6 last:mb-0"><h3 class="aside-title">Knowledge Base</h3> <ul><li><a href="/kb/configuration" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
25                      Configuration
26                    </a></li><li><a href="/kb/settings" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
27                      Settings
28                    </a></li><li><a href="/kb/production" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
29                      Production
30                    </a></li><li><a href="/kb/streaming" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
31                      Streaming
32                    </a></li><li><a href="/kb/cache" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
33                      Cache layer
34                    </a></li><li><a href="/kb/fab-runtime-environment" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
35                      Server Component Restrictions
36                    </a></li><li><a href="/kb/environment-variables" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
37                      Environment Variables
38                    </a></li><li><a href="/kb/error-origin-fallback" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
39                      error.fab.dev
40                    </a></li><li><a href="/kb/fab-structure" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
41                      FAB Structure
42                    </a></li><li><a href="/kb/understanding-assets" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
43                      Understanding Assets
44                    </a></li><li><a href="/kb/project-goals" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
45                      FAB Project Goals
46                    </a></li><li><a href="/kb/automatic-deploys" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
47                      Automatic Deploys
48                    </a></li></ul></li><li class="mb-6 last:mb-0"><h3 class="aside-title">Blog</h3> <ul><li><a href="/blog/18-05-2020-why-frontend-bundles" class="leading-snug lg:px-2 text-sm lg:text-base rounded font-medium py-1 block text-gray-600 dark:text-gray-500 hover:text-gray-700 dark-hover:text-gray-100">
49                      Why &quot;Frontend&quot; bundles, specifically?
50                    </a></li></ul></li></ul> <div class="md:hidden flex items-center px-4"><a href="https://twitter.com/nuxt_js" target="_blank" rel="noopener noreferrer" title="Twitter" name="Twitter" class="hover:text-blue-600 mr-4 ml-2"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6"><path d="M22 5.89584C21.2498 6.22182 20.456 6.43658 19.6438 6.53334C20.4974 6.0335 21.1393 5.23941 21.4492 4.30001C20.6421 4.77192 19.7606 5.10304 18.8425 5.27917C18.4559 4.87398 17.9909 4.55163 17.4758 4.33173C16.9607 4.11183 16.4063 3.99897 15.8463 4.00001C13.5788 4.00001 11.7438 5.80834 11.7438 8.0375C11.7421 8.34757 11.7777 8.65672 11.8496 8.95833C10.2236 8.88211 8.63147 8.46733 7.17499 7.74053C5.71852 7.01372 4.42979 5.9909 3.39125 4.73751C3.02691 5.35172 2.83422 6.05252 2.83333 6.76667C2.83333 8.16667 3.56375 9.40417 4.66667 10.1292C4.01322 10.1137 3.37316 9.94071 2.80083 9.625V9.675C2.80083 11.6333 4.2175 13.2625 6.0925 13.6333C5.73991 13.7273 5.37657 13.7749 5.01167 13.775C4.75274 13.7754 4.4944 13.7503 4.24042 13.7C4.76167 15.3042 6.27875 16.4708 8.07583 16.5042C6.61557 17.6295 4.82276 18.2378 2.97917 18.2333C2.65192 18.2328 2.32499 18.2134 2 18.175C3.87549 19.3726 6.0556 20.006 8.28083 20C15.8375 20 19.9658 
5013.8458 19.9658 8.50833C19.9658 8.33333 19.9613 8.15834 19.9529 7.9875C20.7542 7.41753 21.4474 6.70922 22 5.89584V5.89584Z"/></svg></a> <a href="https://github.com/nuxt/content" target="_blank" rel="noopener noreferrer" title="Github" name="Github" class="hover:text-blue-600 mr-4"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6"><path d="M12 2C6.47768 2 2 6.59375 2 12.2545C2 16.7857 4.86607 20.625 8.83929 21.9821C8.89502 21.9942 8.9519 22.0002 9.00893 22C9.37946 22 9.52232 21.7277 9.52232 21.4911C9.52232 21.2455 9.51339 20.6027 9.50893 19.7455C9.17814 19.8231 8.83974 19.8635 8.5 19.8661C6.57589 19.8661 6.13839 18.3705 6.13839 18.3705C5.68304 17.1875 5.02679 16.8705 5.02679 16.8705C4.15625 16.2589 5.02232 16.2411 5.08929 16.2411H5.09375C6.09821 16.3304 6.625 17.3036 6.625 17.3036C7.125 18.1786 7.79464 18.4241 8.39286 18.4241C8.78841 18.4162 9.17784 18.3249 9.53571 18.1562C9.625 17.4955 9.88393 17.0446 10.1696 16.7857C7.95089 16.5268 5.61607 15.6473 5.61607 11.7187C5.61607 10.5982 6.00446 9.68303 6.64286 8.96875C6.54018 8.70982 6.19643 7.66518 6.74107 6.25446C6.81413 6.23698 6.88921 6.22947 6.96429 6.23214C7.32589 6.23214 8.14286 6.37053 9.49107 7.30803C11.1293 6.84969 12.8618 6.84969 14.5 7.30803C15.8482 6.37053 16.6652 6.23214 17.0268 6.23214C17.1019 6.22947 17.1769 6.23698 17.25 6.25446C17.7946 7.66518 17.4509 8.70982 17.3482 8.96875C17.9866 9.6875 18.375 10.6027 18.375 11.7187C18.375 15.6562 16.0357 16.5223 13.808 16.7768C14.1652 17.0937 14.4866 17.7187 14.4866 18.6741C14.4866 20.0446 14.4732 21.1518 14.4732 21.4866C14.4732 21.7277 14.6116 22 14.9821 22C15.0421 22.0003 15.102 21.9943 15.1607 21.9821C19.1384 20.625 22 16.7812 22 12.2545C22 6.59375 17.5223 2 12 2Z"/></svg></a></div></div></aside> <div class="flex flex-wrap-reverse suka w-full md:w-4/5"><div class="w-full xl:w-3/4 py-4 md:pt-8 md:pb-4 dark:border-gray-800"><article class="md:px-8"><div class="nuxt-content"><h1 id="deploying-fabs"><a href="#deploying-fabs" ariahidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Deploying FABs</h1><p>There are two ways to deploy FABs:</p><ul><li><strong>Manually</strong>, by adding a <code>deploy</code> section to your <code>fab.config.json5</code> and calling <code>fab deploy fab.zip</code> on the command line.</li><li><strong>Automatically</strong>, by using a cloud-based service such as <a href="https://linc.sh" rel="nofollow,noopener,noreferrer" target="_blank">Linc</a>.</li></ul><blockquote><p>&#x1F449; Read more about the <a href="/kb/automatic-deploys">advantages of Automatic Deploys</a>, or read on for manual configuration instructions.</p></blockquote><h2 id="assets-vs-server-hosting"><a href="#assets-vs-server-hosting" ariahidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Assets vs Server hosting</h2><p>FABs are <a href="/kb/fab-structure">a combination of a server file and an assets directory</a>, and while some hosts (like the NodeJS-based <code>@fab/server</code>) are capable of serving both, in practice it can be advantageous to have the stored separately.</p><p>For instance, you typically only have one &quot;version&quot; of your FAB deployed at once, i.e. one <code>server.js</code> file online at any one time, but assets from old releases may still need to be accessed. Also, since assets are guaranteed to be fingerprinted they can, and are, served with <code>cache-control: immutable</code>, meaning that they&apos;re readily cached at the edge using a CDN, meaning that the performance requirements of the hosting service itself is quite different.</p><p>With that in mind, these are the currently-supported hosting platforms:</p><h2 id="cloudflare-workers"><a href="#cloudflare-workers" ariahidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Cloudflare Workers</h2><p>The best production FAB hosting environment right now is <a href="https://workers.dev" rel="nofollow,noopener,noreferrer" target="_blank">Cloudflare Workers</a>. To deploy a FAB server component to them, we need the following config:</p><h3 id="for-a-workersdev-subdomain"><a href="#for-a-workersdev-subdomain" ariahidden="true" tabindex="-1"><span class="icon icon-link"></span></a>For a <code>.workers.dev</code> subdomain</h3><p>When you sign up for a Cloudflare account, you can reserve a namespace on the <code>.workers.dev</code> subdomain. This gives you a place to test Cloudflare deployments as you develop your app, before choosing and releasing to a production domain. In order to d
50peloy to a workers.dev subdomain, add the following config:</p><div class="nuxt-content-highlight"><pre class="line-numbers language-json5"><code><span class="token punctuation">{</span>
51  <span class="token comment">//...</span>
52  <span class="token property unquoted">deploy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
53    <span class="token comment">//...</span>
54    <span class="token property">&apos;cf-workers&apos;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
55      <span class="token property unquoted">account_id</span><span class="token operator">:</span> <span class="token string">&apos;@CF_WORKERS_ACCOUNT_ID&apos;</span><span class="token punctuation">,</span>
56      <span class="token property unquoted">api_token</span><span class="token operator">:</span> <span class="token string">&apos;@CF_WORKERS_API_TOKEN&apos;</span><span class="token punctuation">,</span>
57      <span class="token property unquoted">workers_dev</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
58      <span class="token property unquoted">script_name</span><span class="token operator">:</span> <span class="token string">&apos;your-app-name&apos;</span><span class="token punctuation">,</span>
59    <span class="token punctuation">}</span><span class="token punctuation">,</span>
60    <span class="token comment">//...</span>
61  <span class="token punctuation">}</span><span class="token punctuation">,</span>
62<span class="token punctuation">}</span>
63</code></pre></div><p>This will deploy your FAB to <code>your-app-name.&lt;your-account&gt;.workers.dev</code>. For more information about how to get your Account ID and API Token, visit <a href="https://linc.sh/docs/cloudflare-workers" rel="nofollow,noopener,noreferrer" target="_blank">https://linc.sh/docs/cloudflare-workers</a>.</p><h3 id="for-a-production-domain"><a href="#for-a-production-domain" ariahidden="true" tabindex="-1"><span class="icon icon-link"></span></a>For a production domain</h3><p>The only additional requirement is the <code>zone_id</code> for your domain, and to specify any subdomains you want your FAB active using the <code>route</code> property:</p><div class="nuxt-content-highlight"><pre class="line-numbers language-json5"><code><span class="token punctuation">{</span>
64  <span class="token comment">//...</span>
65  <span class="token property unquoted">deploy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
66    <span class="token comment">//...</span>
67    <span class="token property">&apos;cf-workers&apos;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
68      <span class="token property unquoted">account_id</span><span class="token operator">:</span> <span class="token string">&apos;@CF_WORKERS_ACCOUNT_ID&apos;</span><span class="token punctuation">,</span>
69      <span class="token property unquoted">api_token</span><span class="token operator">:</span> <span class="token string">&apos;@CF_WORKERS_API_TOKEN&apos;</span><span class="token punctuation">,</span>
70      <span class="token property unquoted">workers_dev</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
71      <span class="token property unquoted">script_name</span><span class="token operator">:</span> <span class="token string">&apos;unused-but-still-must-be-unique&apos;</span><span class="token punctuation">,</span>
72      <span class="token property unquoted">zone_id</span><span class="token operator">:</span> <span class="token string">&apos;@FAB_DEV_ZONE_ID&apos;</span><span class="token punctuation">,</span>
73      <span class="token property unquoted">route</span><span class="token operator">:</span> <span class="token string">&apos;https://your.domain.com/*&apos;</span><span class="token punctuation">,</span>
74    <span class="token punctuation">}</span><span class="token punctuation">,</span>
75    <span class="token comment">//...</span>
76  <span class="token punctuation">}</span><span class="token punctuation">,</span>
77<span class="token punctuation">}</span>
78</code></pre></div><p>Your <code>zone_id</code> and <code>route</code> must match. For more information about gathering this data, see <a href="https://linc.sh/docs/cloudflare-workers" rel="nofollow,noopener,noreferrer" target="_blank">https://linc.sh/docs/cloudflare-workers</a>.</p><h3 id="with-custom-bindings"><a href="#with-custom-bindings" ariahidden="true" tabindex="-1"><span class="icon icon-link"></span></a>With custom bindings</h3><p>Cloudflare lets you attach additional storage (KV, Durable Objects) through the <a href="https://developers.cloudflare.com/workers/platform/scripts#resource-bindings" rel="nofollow,noopener,noreferrer" target="_blank"><code>bindings</code> property</a> when you upload. You can attach your own using the <code>custom_bindings</code> config key:</p><div class="nuxt-content-highlight"><pre class="line-numbers language-json5"><code><span class="token punctuation">{</span>
79  <span class="token comment">//...</span>
80  <span class="token property unquoted">deploy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
81    <span class="token comment">//...</span>
82    <span class="token property">&apos;cf-workers&apos;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
83      <span class="token property unquoted">account_id</span><span class="token operator">:</span> <span class="token string">&apos;@CF_WORKERS_ACCOUNT_ID&apos;</span><span class="token punctuation">,</span>
84      <span class="token property unquoted">api_token</span><span class="token operator">:</span> <span class="token string">&apos;@CF_WORKERS_API_TOKEN&apos;</span><span class="token punctuation">,</span>
85      <span class="token property unquoted">workers_dev</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
86      <span class="token property unquoted">script_name</span><span class="token operator">:</span> <span class="token string">&apos;your-app-name&apos;</span><span class="token punctuation">,</span>
87      <span class="token property unquoted">custom_bindings</span><span class="token operator">:</span> <span class="token punctuation">[</span>
88        <span class="token punctuation">{</span>
89          <span class="token property unquoted">type</span><span class="token operator">:</span> <span class="token string">&apos;kv_namespace&apos;</span><span class="token punctuation">,</span>
90          <span class="token property unquoted">name</span><span class="token operator">:</span> <span class="token string">&apos;GLOBAL_VAR_NAME&apos;</span><span class="token punctuation">,</span>
91          <span class="token property unquoted">namespace_id</span><span class="token operator">:</span> <span class="token string">&apos;...&apos;</span><span class="token punctuation">,</span> <span class="token comment">// get from Cloudflare dashboard</span>
92        <span class="token punctuation">}</span><span class="token punctuation">,</span>
93      <span class="token punctuation">]</span><span class="token punctuation">,</span>
94    <span class="token punctuation">}</span><span class="token punctuation">,</span>
95    <span class="token comment">//...</span>
96  <span class="token punctuation">}</span><span class="token punctuation">,</span>
97<span class="token punctuation">}</span>
98</code></pre></div><h2 id="aws-s3"><a href="#aws-s3" ariahidden="true" tabindex="-1"><span class="icon icon-link"></span></a>AWS S3</h2><p>AWS S3 is a perfect choice for your asset hosts, since it&apos;s virtually unlimited and extremely cost-effective, and can be set up for public, read-only access, with the FAB server sitting in front of it.</p><p>To configure S3 bucket creation &amp; uploading, add the following section to your <code>fab.config.json5</code>:</p><div class="nuxt-content-highlight"><pre class="line-numbers language-json5"><code><span class="token punctuation">{</span>
99  <span class="token comment">//...</span>
100  <span class="token property unquoted">deploy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
101    <span class="token comment">//...</span>
102    <span class="token property">&apos;aws-s3&apos;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
103      <span class="token property unquoted">access_key</span><span class="token operator">:</span> <span class="token string">&apos;@S3_ACCESS_KEY&apos;</span><span class="token punctuation">,</span>
104      <span class="token property unquoted">secret_key</span><span class="token operator">:</span> <span class="token string">&apos;@S3_SECRET_KEY&apos;</span><span class="token punctuation">,</span>
105      <span class="token property unquoted">region</span><span class="token operator">:</span> <span class="token string">&apos;us-east-1&apos;</span><span class="token punctuation">,</span>
106      <span class="token property unquoted">bucket_name</span><span class="token operator">:</span> <span class="token string">&apos;fab-assets-your-project-name&apos;</span><span class="token punctuation">,</span>
107    <span class="token punctuation">}</span><span class="token punctuation">,</span>
108    <span class="token comment">//...</span>
109  <span class="token punctuation">}</span><span class="token punctuation">,</span>
110<span class="token punctuation">}</span>
111</code></pre></div><p>The two values that you&apos;ll need are an <code>ACCESS KEY</code> and <code>SECRET KEY</code> for your AWS account, with enough permissions to create, set permissions on, and upload to a bucket. You can <a href="https://console.aws.amazon.com/iam/home?region=us-east-1#/users" rel="nofollow,noopener,noreferrer" target="_blank">create an IAM User</a> with the following policy to allow full access to S3 buckets on your account, but only those starting with the name <code>fab-assets-</code>:</p><div class="nuxt-content-highlight"><pre class="line-numbers language-json"><code><span class="token punctuation">{</span>
112  <span class="token property">&quot;Version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2012-10-17&quot;</span><span class="token punctuation">,</span>
113  <span class="token property">&quot;Statement&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
114    <span class="token punctuation">{</span>
115      <span class="token property">&quot;Sid&quot;</span><span class="token operator">:</span> <span class="token string">&quot;CreateFabAssetBuckets&quot;</span><span class="token punctuation">,</span>
116      <span class="token property">&quot;Action&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;s3:*&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
117      <span class="token property">&quot;Effect&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Allow&quot;</span><span class="token punctuation">,</span>
118      <span class="token property">&quot;Resource&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;arn:aws:s3:::fab-assets-*&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;arn:aws:s3:::fab-assets-*/*&quot;</span><span class="token punctuation">]</span>
119    <span class="token punctuation">}</span>
120  <span class="token punctuation">]</span>
121<span class="token punctuation">}</span>
122</code></pre></div><p>Either hard-code the access key &amp; secret into the <code>fab.config.json5</code> file or store them in a <code>.env</code> file in the same directory, where the FAB deployer will automatically pick them up.</p><h2 id="lambdaedge"><a href="#lambdaedge" ariahidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Lambda@Edge</h2><p>For production use-cases that are heavily tied to AWS infrastructure, Lambda@Edge offers the highest-performing hosting environment.</p><p>You require the following config:</p><div class="nuxt-content-highlight"><pre class="line-numbers language-json5"><code><span class="token punctuation">{</span>
123  <span class="token comment">//...</span>
124  <span class="token property unquoted">deploy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
125    <span class="token comment">//...</span>
126    <span class="token property">&apos;aws-lambda-edge&apos;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
127      <span class="token property unquoted">access_key</span><span class="token operator">:</span> <span class="token string">&apos;@AWS_LAMBDA_ACCESS_KEY&apos;</span><span class="token punctuation">,</span>
128      <span class="token property unquoted">cf_distribution_id</span><span class="token operator">:</span> <span class="token string">&apos;@AWS_CF_DISTRIBUTION_ID&apos;</span><span class="token punctuation">,</span>
129      <span class="token property unquoted">lambda_arn</span><span class="token operator">:</span> <span class="token string">&apos;@AWS_LAMBDA_ARN&apos;</span><span class="token punctuation">,</span>
130      <span class="token property unquoted">secret_key</span><span class="token operator">:</span> <span class="token string">&apos;@AWS_LAMBDA_SECRET_KEY&apos;</span><span class="token punctuation">,</span>
131      <span class="token property unquoted">region</span><span class="token operator">:</span> <span class="token string">&apos;us-east-1&apos;</span><span class="token punctuation">,</span>
132    <span class="token punctuation">}</span><span class="token punctuation">,</span>
133    <span class="token comment">//...</span>
134  <span class="token punctuation">}</span><span class="token punctuation">,</span>
135<span class="token punctuation">}</span>
136</code></pre></div><p>For a guided tutorial about setting up this architecture, including a Cloudformation template to speed up configuration, see <a href="https://linc.sh/docs/lambda" rel="nofollow,noopener,noreferrer" target="_blank">https://linc.sh/docs/lambda</a></p><h3 id="limitations"><a href="#limitations" ariahidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Limitations</h3><p>Lambda@Edge cannot stream responses, and is limited to 1MB responses, important for non-immutable assets.</p></div></article> <div class="pt-4 pb-4 md:px-8 flex border-b dark:border-gray-800"><a href="https://github.com/fab-spec/fab/edit/master/docs/content/en/guides/deploying.md" target="_blank" rel="noopener" class="text-gray-600 dark:text-gray-400 text-sm font-medium hover:underline flex items-center">
137    Edit this page on GitHub
138    <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4 ml-1"><path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg></a></div> <div class="flex justify-between items-center md:px-8 mt-4"><a href="/guides/known-project-types" class="text-blue-600 font-bold hover:underline flex items-center p-2 pl-0"><svg fill="currentColor" viewBox="0 0 20 20" class="w-4 h-4 mr-1"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"/></svg>
139    Known Project Types
140  </a> <a href="/guides/adding-server-side-logic" class="text-blue-600 font-bold hover:underline flex items-center p-2 pr-0">
141    Adding Server-Side Logic
142    <svg fill="currentColor" viewBox="0 0 20 20" class="w-4 h-4 ml-1"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"/></svg></a></div></div> <div class="w-full lg:w-1/4 py-4 lg:p-8 hidden xl:block"><div class="lg:sticky lg:top-0 lg:pt-24 lg:-mt-24"><h3 class="mb-3 lg:mb-2 text-gray-500 dark:text-gray-600 uppercase tracking-wide font-bold text-sm lg:text-xs">On this page</h3> <nav><ul class="scrollactive-nav"><li class="text-gray-600 dark:text-gray-500 border-t border-dashed dark:border-gray-800 first:border-t-0 font-semibold"><a href="#assets-vs-server-hosting" class="block text-sm scrollactive-item transition-transform ease-in-out duration-300 transform hover:translate-x-1 py-2">Assets vs Server hosting</a></li><li class="text-gray-600 dark:text-gray-500 border-t border-dashed dark:border-gray-800 first:border-t-0 font-semibold"><a href="#cloudflare-workers" class="block text-sm scrollactive-item transition-transform ease-in-out duration-300 transform hover:translate-x-1 py-2">Cloudflare Workers</a></li><li class="text-gray-600 dark:text-gray-500"><a href="#for-a-workersdev-subdomain" class="block text-sm scrollactive-item transition-transform ease-in-out duration-300 transform hover:translate-x-1 ml-2 pb-2">For a </a></li><li class="text-gray-600 dark:text-gray-500"><a href="#for-a-production-domain" class="block text-sm scrollactive-item transition-transform ease-in-out duration-300 transform hover:translate-x-1 ml-2 pb-2">For a production domain</a></li><li class="text-gray-600 dark:text-gray-500"><a href="#with-custom-bindings" class="block text-sm scrollactive-item transition-transform ease-in-out duration-300 transform hover:translate-x-1 ml-2 pb-2">With custom bindings</a></li><li class="text-gray-600 dark:text-gray-500 border-t border-dashed dark:border-gray-800 first:border-t-0 font-semibold"><a href="#aws-s3" class="block text-sm scrollactive-item transition-transform ease-in-out duration-300 transform hover:translate-x-1 py-2">AWS S3</a></li><li class="text-gray-600 dark:text-gray-500 border-t border-dashed dark:border-gray-800 first:border-t-0 font-semibold"><a href="#lambdaedge" class="block text-sm scrollactive-item transition-transform ease-in-out duration-300 transform hover:translate-x-1 py-2">Lambda@Edge</a></li><li class="text-gray-600 dark:text-gray-500"><a href="#limitations" class="block text-sm scrollactive-item transition-transform ease-in-out duration-300 transform hover:translate-x-1 ml-2 pb-2">Limitations</a></li></ul></nav></div></div></div></div></main></div></div></div>
142<script defer src="/_nuxt/static/1619648227/guides/deploying/state.js"></script>
142<script src="/_nuxt/510eee772fe8f5c11a5b.js" defer></script>
142<script src="/_nuxt/045607e3b74e19b24e55.js" defer></script>
142<script src="/_nuxt/e4f5c1eee4c2fadec90f.js" defer></script>
142<script src="/_nuxt/28e834e1d7f8ba4cedc8.js" defer></script>
142<script src="/_nuxt/759bb7aab0a82df936cc.js" defer></script>
142
143  
144
145<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"5c076cd74dae41029543b8788cedcdd2","r":1,"spa":2}' crossorigin="anonymous"></script>
145
146</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.