This content originally appeared on DEV Community and was authored by Jovells
Deploying a Scaffold-ETH 2 app on Fleek can be a bit tricky due to its specific requirements for static site generation. This tutorial will walk you through the entire process, ensuring a successful deployment by exporting your app as a Single Page Application (SPA). We'll cover necessary configurations, tips for handling dynamic routes, and a step-by-step guide on how to deploy the app on Fleek.
Prerequisites
- Basic understanding of Next.js and Scaffold-ETH 2.
- Node.js and Yarn installed on your local machine.
- A Fleek account for deployment.
Step 1: Configure next.config.js for SPA Export
By default, Next.js apps do not export as SPAs, but you can configure this in the next.config.js file. This is essential because Fleek requires the app to be an SPA for successful deployment.
Open the
next.config.jsfile located in thepackages/nextjsdirectory of your Scaffold-ETH 2 project.-
Add the following configuration to export the app as an SPA:
module.exports = { output: "export", // Other configurations if needed };
This configuration ensures that Next.js exports a static version of your app suitable for deployment on Fleek.
Step 2: Handle Dynamic Routes
Next.js dynamic routes ([param].js) are not supported in static exports because they cannot be resolved at build time. You need to refactor your app to use query parameters instead of dynamic routes.
Example: Converting Dynamic Routes to Query Params
Suppose you have a dynamic route like this:
// pages/post/[id].js
import { useRouter } from 'next/router';
const Post = () => {
const router = useRouter();
const { id } = router.query;
return <div>Post ID: {id}</div>;
};
export default Post;
You can convert this into a standard route using query parameters:
-
Change the file from
[id].jsto a regularpost.jsfile:
// pages/post.js import { useRouter } from 'next/router'; const Post = () => { const router = useRouter(); const { id } = router.query; return <div>Post ID: {id}</div>; }; export default Post; -
Update any links pointing to the dynamic route to use query parameters:
import Link from 'next/link'; const Home = () => { return ( <div> <Link href="/post?id=1">Post 1</Link> <Link href="/post?id=2">Post 2</Link> </div> ); }; export default Home;
This approach ensures compatibility with static site export since all routes are now resolved at build time.
Step 3: Modify the Build Command
Fleek uses the build command to compile your app before deploying. Since Scaffold-ETH 2 uses a monorepo structure, you'll need to specify the correct build command and output directory.
-
Set the build command to:
yarn && yarn next:build -
The
output directoryshould be set to:
packages/nextjs/out
This configuration ensures that Fleek correctly builds and exports the static files needed for deployment.
Note: If you misconfigure the build settings, you may encounter a "dist folder not found" error. Ensure that
output: "export"is correctly configured in yournext.config.jsfile.
Step 4: Test the Build Locally
Before deploying your app to Fleek, it's crucial to ensure that the build process works locally. This helps catch any build issues early on.
-
Run the following command in your local environment:
yarn run next:build Fix any build issues that arise. This may include resolving errors related to dynamic imports, static asset paths, or route configurations.
By testing the build locally, you can ensure that the deployment to Fleek will proceed smoothly without unexpected errors.
Step 5: Deploy on Fleek
Now that your app is configured correctly and the build process has been tested locally, you can proceed with deploying it on Fleek.
Log in to your Fleek account: Navigate to Fleek and log in.
Create a New Site: Click on "Create New Site" and connect your GitHub repository.
-
Configure Build Settings:
-
Build Command: Set this to
yarn && yarn next:build. -
Publish Directory: Set this to
packages/nextjs/out.
-
Build Command: Set this to
Deploy: Click on "Deploy Site." Fleek will start building and deploying your app. The process may take a few minutes.
Check Deployment: Once the deployment is complete, you can view your live site using the provided URL.
Troubleshooting Tips
- Build Errors: Ensure that all routes are resolvable at build time. Dynamic routes should be converted to use query parameters as shown above.
-
Missing Assets: Ensure that all static assets are correctly referenced and included in the
outdirectory. -
"Dist Folder Not Found" Error: This error typically occurs due to incorrect build configuration. Ensure that
output: "export"is correctly configured in yournext.config.jsfile.
Resources
For further reading and additional help, refer to the following resources:
- Next.js Documentation: Static Exports: Official documentation on how to configure your Next.js application for static export.
- Fleek Documentation: Deployments: Official guide on deploying apps on Fleek, including how to set up your build and publish settings.
- Fleek Tutorials: Additional tutorials and guides provided by Fleek for deploying different types of web applications.
Conclusion
Deploying a Scaffold-ETH 2 app on Fleek requires careful configuration, especially when dealing with dynamic routes and static exports. By following this tutorial, you should be able to successfully deploy your app as a SPA on Fleek. Remember to test your app locally before deployment to ensure all routes and assets are correctly handled.
Feel free to reach out for any questions or issues during your deployment process!
This content originally appeared on DEV Community and was authored by Jovells
Jovells | Sciencx (2024-09-03T04:18:53+00:00) Tutorial: Deploying a Scaffold-ETH 2 App on Fleek.xyz. Retrieved from https://www.scien.cx/2024/09/03/tutorial-deploying-a-scaffold-eth-2-app-on-fleek-xyz/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.