DEV Community: Jovells

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

Jovells — Tue, 03 Sep 2024 04:18:53 +0000

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.js file located in the packages/nextjs directory 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].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;

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

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

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!

My Memorable Experience at the MEST/MASTERCARD Web 3.0 Bootcamp, Facilitated by MOWBLOX

Jovells — Thu, 28 Sep 2023 08:27:58 +0000

In the ever-evolving world of technology, there are moments when a unique opportunity surfaces, beckoning us to embark on a journey that promises to reshape our understanding and ignite our passions. Such was the siren call of the MEST/MASTERCARD Web 3.0 bootcamp, which I discovered through Crypthority, a community of blockchain and web3 explorers. The prospect of deepening my understanding of blockchain technology filled me with excitement. After successfully completing the application process and required tests, I was thrilled to be selected for this incredible opportunity.

The bootcamp commenced with a warm welcome and an introduction to our tutors, members of the Mowblox team. From the very first day, we were immersed in the realm of Web 3.0, commencing with basic lessons on the internet and its evolution. By the end of that week, we were already signing messages with private keys and transmitting them over a network for verification.

By the end of week two, we had begun our journey into Solidity, the programming language for building smart contracts that operate on Ethereum. Remarkably, by the end of the third week, we were already building smart contracts.

Week four introduced us to the impending EthAccra hackathon. Although many of us were relatively new to blockchain development, we mustered the confidence to participate. The hackathon proved to be a formidable challenge, as we were tasked with rapidly building real-world projects. Nevertheless, this experience enriched our understanding, and some participants even earned bounties for their innovative solutions. My team was honored to receive a bounty for building our project with The Graph, a blockchain indexing protocol.

Weeks 5 and 6 brought further enrichment to our learning journey. Our tutors led us to explore advanced concepts such as account abstraction and other Ethereum Improvement Proposals (EIPs). During these weeks, our enriched understanding led to engaging discussions, offering us deeper insights into the evolving landscape of blockchain technology.

In addition to individual assignments we were given throughout the bootcamp, we were organized into groups and assigned mini-projects, each offering bounties for the most exceptional teams. The competitive atmosphere further fueled our determination, and my team's achievement in winning one of those was undoubtedly a highlight of the bootcamp.

Fridays during the bootcamp featured unique one-hour sector talk sessions, during which industry experts shared their invaluable real-world insights.

Aside the enriching lessons, we were treated to delectable dishes for lunch and dinner. This culinary experience was an unexpected delight, adding to the overall enjoyment of the program. Furthermore, we received weekly stipends for transportation, a thoughtful gesture aimed at alleviating the financial burden of commuting to the bootcamp and enabling us to immerse ourselves fully in the learning experience. These stipends were however not handed out freely; they were earned through consistent class attendance (at least 70% of the time) and timely submission of assignments.

As the bootcamp drew to a close, the camaraderie among participants, late-night coding sessions, and shared meals became cherished memories etched in our minds.

The program was brought to a climax with a graduation ceremony held on September 25th. We were tasked with developing real-world solutions and presenting them to industry professionals and business leaders. The rigorous preparation leading up to this moment was a testament to our dedication. As we took turns presenting our ideas, the sense of accomplishment was palpable. Personally, I was honored to receive the award for the best Peer Mentor, an accolade that filled me with a sense of accomplishment.

The MEST/MASTERCARD Web 3.0 bootcamp was an immensely valuable experience. The openness and support of our tutors, the interactive class sessions, and the opportunity to connect with like-minded individuals made it an extraordinary journey. As I reflect upon this experience, I am brimming with gratitude for the knowledge gained, the connections established, and the memories created. This bootcamp has indelibly marked my journey into the world of Web 3.0, and I eagerly anticipate the exciting possibilities that lie ahead in this transformative field.