Webflow Cloud enables you to deploy full-stack web applications directly under your Webflow-hosted domain. It can also be leveraged to serve assets from the same domain, which is especially useful for scenarios where assets must reside under the primary domain rather than Webflow’s default asset CDN path. Below is an overview of how to set this up, along with key considerations.
Example live paths:
- https://wf-cloud-test-5650e8.webflow.io/assets/bird.jpg
- https://wf-cloud-test-5650e8.webflow.io/assets/images/forest.jpg
By default, Webflow hosts assets (e.g., images, documents, etc) via a standardized CDN URL (cdn.prod.website-files.com/...). However, certain use cases may require that assets be accessible directly under the custom domain (e.g., https://yourdomain.com/assets/image.png).
Webflow Cloud enables this with a structured approach using Next.js’s/Astro's public folder.
Add your static assets (images, documents, etc.) into the public directory of your Next.js project. You can organize them with subfolders or have them at the root like:
/public/photo.png/public/images/logo.png/public/files/whitepaper.pdf
This structure allows access via routes like:
/assets/photo.png/assets/images/logo.png/assets/files/whitepaper.pdf
Note: /assets is the mount path for the Webflow Cloud app and is required. You will have the option to customize this mount path when creating the Webflow Cloud app. See Webflow Cloud docs.
To use these custom-hosted assets inside the Webflow Designer, use the Custom Element.
For example, use the <img> tag and reference the hosted asset with the src attribute:
<img src="https://yourdomain.com/assets/images/logo.png" loading="lazy" alt="Logo" />
Note: Use the loading attribute for performance optimization. For example, loading="lazy" for below-the-fold images and loading="eager" for above-the-fold content like hero banners.
While this method provides flexibility, do not rely on it as your primary asset management strategy. Limitations include:
- No responsive variants
- No native compression options i.e., convert JPG/PNG to WEBP/AVIF
- No native asset management
- Not scalable for large asset libraries or marketing teams
- Bandwidth usage impact as caching is not supported in this scenario (headers will be stripped)
For most use cases, Webflow's built-in Asset Panel should be the preferred choice.
If your Webflow Cloud project is only used to serve assets, consider redirecting the root or other unused paths back to the main Webflow site and prevent users from landing on empty or incorrect pages.
This can be done by defining a page like...
// src/app/page.tsx
"use client";
import { redirect } from "next/navigation";
export default function AssetsRootRedirect() {
redirect("https://wf-cloud-test-5650e8.webflow.io");
}Or define redirects in the Next JS config like...
module.exports = {
async redirects() {
return [
{
source: "/",
destination: "https://main-webflow-site.com",
permanent: false,
},
{
source: "/invalid-path",
destination: "https://main-webflow-site.com",
permanent: false,
},
];
},
};