Comment on page
Deploy Frontity on Layer0
Layer0 is an all-in-one platform to develop, deploy, preview, experiment on, monitor, and run your headless frontend. It is focused on large, dynamic sites and best-in-class performance through EdgeJS (a JavaScript-based Content Delivery Network), predictive prefetching, and performance monitoring.
For the full details on deploying Frontity on Layer0 refer to the Frontity on Layer0 guide in the developer documentation.
npm i -g @layer0/cli
Run the
init command in the directory of your Frontity project:cd my-frontity-app
layer0 init
This will automatically configure your app for deployment on Layer0.
You can simulate your app running on Layer0 using the
dev command:layer0 dev
In particular, the
--cache option will emulate Edge caching rules locally so that you can test easily test edge behavior during development without having to do a deploy to the cloud:layer0 dev --cache
Once you have installed the CLI and created an account, you should login from the terminal by running the
login command:layer0 login
Once you have an account and have logged in to the CLI, you can deploy to the Layer0 by running the following in the root folder of your project:
layer0 deploy
Layer0 improves the performance of your site by bundling an integrated server worker that will predictively prefetch cached pages from the edge. To add the Layer0 service worker to your app, call the
install function from @layer0/prefetch/window in a useEffect hook when the app first loads. For example, you can alter the Header component in your theme as follows:// mars-theme/src/components/header.js
import { useEffect } from 'react'
const Header = ({ state }) => {
useEffect(() => {
if (process.env.NODE_ENV === 'production') {
install()
}
}, [])
/* ... */
}
To prefetch data into the browser cache using the service worker, use the Prefetch component from @layer0/react. This component prefetches a specific URL from the Layer0 edge when it becomes visible in the viewport. You typically wrap it around links. For example:
import { Prefetch } from '@layer0/react'
function MyComponent() {
return (
<Prefetch url="/some/data/url.json">
{/* When this link is scrolled into view, /some/data/url.json in JSON will be fetched in the background and put in the browser cache */}
<a href="/link/to/page">My Page</a>
</Prefetch>
)
}
Last modified 2yr ago