When exporting Webflow code to host it elsewhere, common error messages are usually caused by missing files, incorrect paths, or unsupported functionality. Here's how to troubleshoot and fix them.
1. Check for Missing Assets
- Webflow doesn’t include CMS content, form handling, or dynamic data in exported files.
- If your design uses Webflow CMS, that content won't export. You will need to manually replace CMS placeholders with static content or use a third-party CMS with your exported code.
- Make sure to download all assets (images, scripts, fonts) if referenced externally in Webflow. Otherwise, exported code may link to files that aren’t available on the new host.
2. Update File Paths
- Webflow may generate asset URLs like /images/[filename] or /css/style.css, which require correct folder structure on your server.
- If paths break after uploading, check that the folder structure matches the Webflow export package.
- Most issues arise when folders (like
/images
, /css
, or /js
) are missing or incorrectly placed on the external host.
- Webflow’s built-in form handling does not work outside of Webflow hosting.
- You must integrate a third-party form handler like Formspree, Basin, Netlify Forms, or a custom solution.
- Also remove or modify the Webflow form action URL, as it won't function on external servers.
4. Disable Webflow-Specific Features
- Features like interactions, page load animations, or custom components sometimes rely on Webflow's JavaScript.
- Ensure Webflow.js is included and correctly linked. Without it, animations and interactions won’t work.
- Double-check that the scripts folder and links (typically /js/webflow.js) are not missing or incorrectly referenced.
5. Check Hosting Permissions and MIME Settings
- If you're getting a 403 Forbidden or MIME type error, your server may be misconfigured.
- Ensure that your .htaccess file or server settings allow access to CSS, JS, and font files.
- For example, serve fonts with correct MIME type or the browser may block them.
Summary
To fix errors when exporting Webflow code to another host:
- Manually replace CMS and form features, which are not supported in exported code.
- Ensure correct file paths and keep the export folder structure intact.
- Use outside form handlers and update the form’s action URL.
- Include Webflow.js and all required scripts for animations to work.
- Check your server’s MIME and file access settings for common deployment issues.
By following these steps, you can ensure your Webflow export works smoothly on an external hosting provider.