Maayan/aeither nextjs framework

.github/workflows/build-aptos-next-template.yml

@@ -0,0 +1,31 @@
+name: Build Aptos Next Template Frontend
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    concurrency: ci-${{ github.ref }}-${{ github.workflow }}
+    defaults:
+      run:
+        working-directory: ./templates/nextjs-boilerplate-template
+    steps:
+      - uses: actions/checkout@v3
+
+      # Install pnpm
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.6.1
+          run_install: false
+
+      # Install deps and build.
+      - run: pnpm install
+      - run: CI= pnpm build
+
+      # Verify that the format is correct
+      - run: npm run _fmt -- --check
+        shell: bash

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to the create-aptos-dapp tool will be captured in this file. This changelog is written by hand for now. It adheres to the format set out by [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+# 0.0.25 (2024-09-04)
+
+- Support Nextjs framework for Boilerplate template
+
 # 0.0.24 (2024-09-04)
 
 - Code cleanup, always use env var from constants

src/generateDapp.ts

@@ -1,15 +1,15 @@
-import { green, bold, blue } from "kolorist";
-import path from "path";
-import { fileURLToPath } from "node:url";
 import fs from "fs/promises";
+import { blue, bold, green } from "kolorist";
+import { fileURLToPath } from "node:url";
 import type { Ora } from "ora";
 import ora from "ora";
-// internal files
-import { Selections } from "./types.js";
+import path from "path";
 import { recordTelemetry } from "./telemetry.js";
+// internal files
+import type { Selections } from "./types.js";
+import { context } from "./utils/context.js";
 import { copy } from "./utils/helpers.js";
 import { installDependencies } from "./utils/installDependencies.js";
-import { context } from "./utils/context.js";
 
 const spinner = (text) => ora({ text, stream: process.stdout, color: "green" });
 let currentSpinner: Ora | null = null;
@@ -82,7 +82,15 @@ export async function generateDapp(selection: Selections) {
 
     // create .env file
     const generateEnvFile = async (additionalContent?: string) => {
-      const content = `PROJECT_NAME=${selection.projectName}\nVITE_APP_NETWORK=${selection.network}`;
+      let content = `PROJECT_NAME=${selection.projectName}`;
+
+      if (selection.framework === "vite") {
+        content += `\nVITE_APP_NETWORK=${selection.network}`;
+      } else if (selection.framework === "nextjs") {
+        content += `\nNEXT_APP_NETWORK=${selection.network}`;
+      } else {
+        throw new Error(`Framework ${selection.framework} not supported`);
+      }
 
       await write(
         ".env",
@@ -111,6 +119,9 @@ export async function generateDapp(selection: Selections) {
       case "boilerplate-template":
         await generateEnvFile();
         break;
+      case "nextjs-boilerplate-template":
+        await generateEnvFile();
+        break;
       default:
         throw new Error("Unsupported template to generate an .env file for");
     }
@@ -140,6 +151,7 @@ export async function generateDapp(selection: Selections) {
         command: "npx create-aptos-dapp",
         project_name: selection.projectName,
         template: selection.template.name,
+        framework: selection.framework,
         network: selection.network,
       });
     }

src/types.ts

@@ -1,4 +1,4 @@
-import prompts from "prompts";
+import type prompts from "prompts";
 
 // constants.ts
 
@@ -12,19 +12,22 @@ export type Template = {
 };
 
 export type Network = "mainnet" | "testnet";
+export type Framework = "vite" | "nextjs";
 
 export type Selections = {
   projectName: string;
   template: Template;
   network: Network;
   telemetry: boolean;
+  framework: Framework;
 };
 
 export type TemplateTelemetryData = {
   command: string;
   project_name: string;
   template: string;
   network: string;
+  framework: Framework;
 };
 
 export type ExampleTelemetryData = {

src/workflow.ts

@@ -1,7 +1,7 @@
 import { red } from "kolorist";
 import prompts from "prompts";
-import { Selections, Result } from "./types.js";
 import { rechoseWorkflow } from "./rechoseWorkflow.js";
+import type { Result, Selections } from "./types.js";
 import { workflowOptions } from "./workflowOptions.js";
 
 export async function startWorkflow() {
@@ -15,6 +15,7 @@ export async function startWorkflow() {
           initial: "my-aptos-dapp",
         },
         workflowOptions.template,
+        workflowOptions.framework,
         workflowOptions.network,
         workflowOptions.analytics,
       ],
@@ -30,7 +31,7 @@ export async function startWorkflow() {
   }
 
   // copy the initialResults
-  let result = { ...initialResult };
+  const result = { ...initialResult };
 
   try {
     // A boolean variable that keeps track on whether the user wants to change their initial choices
@@ -57,7 +58,7 @@ export async function startWorkflow() {
       );
 
       if (confirm) {
-        // a seperate function for selecting the prompt you want to edit
+        // a separate function for selecting the prompt you want to edit
         await rechoseWorkflow(result);
       } else {
         confirmOptions = false;
@@ -68,10 +69,14 @@ export async function startWorkflow() {
     process.exit(0);
   }
 
-  const { projectName, template, network, telemetry } = result;
+  const { projectName, template, framework, network, telemetry } = result;
   return {
     projectName,
-    template,
+    template:
+      template && framework === "nextjs"
+        ? { ...template, path: "nextjs-boilerplate-template" }
+        : template,
+    framework,
     network,
     telemetry,
   } as Selections;

src/workflowOptions.ts

@@ -58,20 +58,35 @@ export const workflowOptions = {
     ],
     initial: 0,
   },
+  framework: {
+    type: "select",
+    name: "framework",
+    message: "Choose your framework",
+    choices(prev, values) {
+      if (values.template.path === "boilerplate-template") {
+        return [
+          { title: "Client-side (Vite app)", value: "vite" },
+          { title: "Server-side (Next.js app)", value: "nextjs" },
+        ];
+      }
+      return [{ title: "Client-side (Vite app)", value: "vite" }];
+    },
+    initial: 0,
+  },
   network: {
     type: "select",
     name: "network",
     message: "Choose your network",
-    choices(prev) {
+    choices(prev, values) {
       /**
        * We don't support devnet for NFT and Token minting dapps because
        * 1. Both templates depend on Irys to upload files, but Irys does not support Aptos devnet yet
        * 2. NFT minting dapp depends on token-minter contract and token-minter contract is not
        * deployed on devnet because devnet is reset frequently
        */
       if (
-        prev.path === "nft-minting-dapp-template" ||
-        prev.path === "token-minting-dapp-template"
+        values.template.path === "nft-minting-dapp-template" ||
+        values.template.path === "token-minting-dapp-template"
       ) {
         return [
           { title: "Mainnet", value: "mainnet" },

templates/nextjs-boilerplate-template/.prettierignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

templates/nextjs-boilerplate-template/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "trailingComma": "all",
+  "printWidth": 120
+}