Tutorial: Deploying a Scaffold-ETH 2 App on Fleek.xyz

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.

1. Open the next.config.js file located in the packages/nextjs directory of your Scaffold-ETH 2 project.

2. 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:

1. Change the file from [id].js to a regular post.js file:

   // 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;
   

2. 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.

1. Set the build command to:

   yarn && yarn next:build
   

2. The output directory should 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 your next.config.js file.

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.

1. Run the following command in your local environment:

   yarn run next:build
   

2. 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.

1. Log in to your Fleek account: Navigate to Fleek and log in.

2. Create a New Site: Click on “Create New Site” and connect your GitHub repository.

3. Configure Build Settings:

   • Build Command: Set this to yarn && yarn next:build.
   • Publish Directory: Set this to packages/nextjs/out.

4. Deploy: Click on “Deploy Site.” Fleek will start building and deploying your app. The process may take a few minutes.

5. 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 out directory.
• “Dist Folder Not Found” Error: This error typically occurs due to incorrect build configuration. Ensure that output: "export" is correctly configured in your next.config.js file.

Resources

For further reading and additional help, refer to the following resources:

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!