Merge pull request #102 from smebberson/cloudflare-pages

Cloudflare pages
smebberson · Mar 15, 2024 · a0034cb · a0034cb
2 parents 2e9831a + b3f0e25
commit a0034cb
Show file tree

Hide file tree

Showing 10 changed files with 2,282 additions and 35 deletions.
diff --git a/.gitignore b/.gitignore
@@ -77,6 +77,7 @@ typings/
 
 # Next.js build output
 .next
+.vercel
 
 # Nuxt.js build / generate output
 .nuxt

diff --git a/.npmrc.pages b/.npmrc.pages
@@ -0,0 +1,2 @@
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${TOKEN_FOR_FONTAWESOME}
diff --git a/README.md b/README.md
@@ -1,3 +1,56 @@
 # next-tailwind-fontawesome
 
 An example setup using Next.js, Tailwind CSS and Font Awesome.
+
+# Development
+
+To get started with development, follow these steps.
+
+Install dependencies:
+
+```bash
+yarn
+```
+
+Start the development server:
+
+```bash
+yarn dev
+```
+
+Open a browser to http://localhost:3000. As you make changes to the code, the browser will automatically update.
+
+# Cloudflare
+
+This project is configured to deploy to Cloudflare Pages Site.
+
+## Testing
+
+To test the production build locally, follow these steps.
+
+Build the website:
+
+```bash
+yarn build:ci
+```
+
+Run wrangler to browser the website:
+
+```bash
+yarn dev:ci
+```
+
+Open a browser to http://127.0.0.1:8788.
+
+# Template
+
+To use this repository as a template, after creating a new repository, complete the following steps.
+
+Configure the repository secrets, by going to Settings > Secrets and variables > Actions and adding the `FONTAWESOME_NPM_AUTH_TOKEN` secret.
+
+Follow the steps at [Cloudflare Docs > Pages > Deploy a Next.js site > Use the Edge Runtime](https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-the-edge-runtime), with the following considerations:
+
+-   The Edge Runtime has already been setup on `app/api/features` and `app/ssr`.
+-   Yarn has been pinned to v1.22.19 using `packageManager` in `package.json`.
+-   You'll need to ensure `.npmrc.pages` is copied across and that you setup a `TOKEN_FOR_FONTAWESOME` environment variable.
+-   You'll need to ensure you [add the `nodejs_compat` flag](https://developers.cloudflare.com/workers/runtime-apis/nodejs#enable-nodejs-from-the-cloudflare-dashboard).
diff --git a/app/api/features/route.js b/app/api/features/route.js
@@ -0,0 +1,30 @@
+import { NextResponse } from 'next/server';
+
+import { faCode } from '@fortawesome/free-solid-svg-icons/faCode';
+import { faSwatchbook } from '@fortawesome/free-solid-svg-icons/faSwatchbook';
+import { faRocket } from '@fortawesome/free-solid-svg-icons/faRocket';
+
+export const runtime = 'edge';
+
+export const GET = () =>
+    NextResponse.json([
+        {
+            description:
+                'Comes pre-installed with Font Awesome, Next.js, Prettier and Tailwind CSS.',
+            icon: faCode,
+            title: 'Development made-easy',
+        },
+        {
+            description:
+                'Combine Font Awesome and Tailwind CSS to create great looking pages.',
+            icon: faSwatchbook,
+            title: 'Stylish looks',
+        },
+
+        {
+            description:
+                'Take advantage of Next.js for lightning fast pages out of the box.',
+            icon: faRocket,
+            title: 'Fast performance',
+        },
+    ]);
diff --git a/app/client/page.jsx b/app/client/page.jsx
@@ -0,0 +1,5 @@
+import Client from 'components/client';
+
+export default function ClientPage() {
+    return <Client />;
+}
diff --git a/app/layout.jsx b/app/layout.jsx
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import './globals.css';
 
 export const metadata = {
@@ -8,7 +9,27 @@ export const metadata = {
 export default function RootLayout({ children }) {
     return (
         <html lang="en">
-            <body>{children}</body>
+            <body>
+                <div className="flex flex-col min-h-screen">
+                    <div className="flex-grow">{children}</div>
+                </div>
+
+                <div className="bg-emerald-700 w-full text-white p-4 border-t fixed bottom-0 flex justify-center">
+                    <footer>
+                        <ul className="flex gap-2">
+                            <li>
+                                <Link href="/">Homepage</Link>
+                            </li>
+                            <li>
+                                <Link href="/ssr">SSR rendering</Link>
+                            </li>
+                            <li>
+                                <Link href="/client">Client rendering</Link>
+                            </li>
+                        </ul>
+                    </footer>
+                </div>
+            </body>
         </html>
     );
 }
diff --git a/app/ssr/page.jsx b/app/ssr/page.jsx
@@ -0,0 +1,95 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCode } from '@fortawesome/free-solid-svg-icons/faCode';
+import { faSwatchbook } from '@fortawesome/free-solid-svg-icons/faSwatchbook';
+import { faRocket } from '@fortawesome/free-solid-svg-icons/faRocket';
+
+export const runtime = 'edge';
+
+const getData = async () => {
+    return [
+        {
+            description:
+                'Comes pre-installed with Font Awesome, Next.js, Prettier and Tailwind CSS.',
+            icon: faCode,
+            title: 'Development made-easy',
+        },
+        {
+            description:
+                'Combine Font Awesome and Tailwind CSS to create great looking pages.',
+            icon: faSwatchbook,
+            title: 'Stylish looks',
+        },
+
+        {
+            description:
+                'Take advantage of Next.js for lightning fast pages out of the box.',
+            icon: faRocket,
+            title: 'Fast performance',
+        },
+    ];
+};
+
+export default async function SSR() {
+    const features = await getData();
+
+    return (
+        <div className="bg-white">
+            <div className="relative pb-32 bg-emerald-500">
+                <div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
+                    <div className="text-center">
+                        <h2 className="text-base font-semibold text-emerald-900 tracking-wide uppercase">
+                            Start strong
+                        </h2>
+                        <p className="mt-1 text-4xl font-extrabold text-white sm:text-5xl sm:tracking-tight lg:text-6xl">
+                            Start with a strong foundation.
+                        </p>
+                        <p className="max-w-xl mt-5 mx-auto text-xl text-emerald-50">
+                            Use this as a starting point for building websites
+                            with Next.js, Tailwind CSS and Font Awesome. Build
+                            whatever you like.
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <section className="-mt-32 max-w-7xl mx-auto relative z-10 pb-32 px-4 sm:px-6 lg:px-8">
+                <h2 className="sr-only" id="features-heading">
+                    Features
+                </h2>
+                <div className="grid grid-cols-1 gap-y-20 lg:grid-cols-3 lg:gap-y-0 lg:gap-x-8">
+                    {features.map((feature, index) => (
+                        <div
+                            className="flex flex-col bg-white rounded-2xl shadow-xl"
+                            key={index}
+                        >
+                            <div className="flex-1 relative pt-16 px-6 pb-8 md:px-8">
+                                <div className="absolute top-0 p-5 inline-block bg-emerald-900 rounded-xl shadow-lg transform -translate-y-1/2">
+                                    <FontAwesomeIcon
+                                        icon={feature.icon}
+                                        className="h-6 w-6 text-white"
+                                        aria-hidden="true"
+                                    />
+                                </div>
+                                <h3 className="text-xl font-medium text-gray-900">
+                                    {feature.title}
+                                </h3>
+                                <p className="mt-4 text-base text-gray-500">
+                                    {feature.description}
+                                </p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </section>
+            <div className="flex align-center justify-center">
+                <a
+                    className="bg-emerald-500 rounded-md p-4 text-xl text-white font-bold shadow-xl"
+                    href="https://github.com/smebberson/next-tailwind-fontawesome"
+                    rel="noreferrer"
+                    target="_blank"
+                >
+                    Get Started
+                </a>
+            </div>
+        </div>
+    );
+}
diff --git a/components/client.jsx b/components/client.jsx
@@ -0,0 +1,81 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export default function Client() {
+    const [features, setFeatures] = useState([]);
+
+    useEffect(() => {
+        const fetchFeatures = async (url) => {
+            const response = await fetch(url);
+            const data = await response.json();
+            setFeatures(data);
+        };
+
+        fetchFeatures('/api/features');
+    }, []);
+
+    return (
+        <div className="bg-white">
+            <div className="relative pb-32 bg-emerald-500">
+                <div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
+                    <div className="text-center">
+                        <h2 className="text-base font-semibold text-emerald-900 tracking-wide uppercase">
+                            Start strong
+                        </h2>
+                        <p className="mt-1 text-4xl font-extrabold text-white sm:text-5xl sm:tracking-tight lg:text-6xl">
+                            Start with a strong foundation.
+                        </p>
+                        <p className="max-w-xl mt-5 mx-auto text-xl text-emerald-50">
+                            Use this as a starting point for building websites
+                            with Next.js, Tailwind CSS and Font Awesome. Build
+                            whatever you like.
+                        </p>
+                    </div>
+                </div>
+            </div>
+            {features.length > 0 && (
+                <section className="-mt-32 max-w-7xl mx-auto relative z-10 pb-32 px-4 sm:px-6 lg:px-8">
+                    <h2 className="sr-only" id="features-heading">
+                        Features
+                    </h2>
+                    <div className="grid grid-cols-1 gap-y-20 lg:grid-cols-3 lg:gap-y-0 lg:gap-x-8">
+                        {features.map((feature, index) => (
+                            <div
+                                className="flex flex-col bg-white rounded-2xl shadow-xl"
+                                key={index}
+                            >
+                                <div className="flex-1 relative pt-16 px-6 pb-8 md:px-8">
+                                    <div className="absolute top-0 p-5 inline-block bg-emerald-900 rounded-xl shadow-lg transform -translate-y-1/2">
+                                        <FontAwesomeIcon
+                                            icon={feature.icon}
+                                            className="h-6 w-6 text-white"
+                                            aria-hidden="true"
+                                        />
+                                    </div>
+                                    <h3 className="text-xl font-medium text-gray-900">
+                                        {feature.title}
+                                    </h3>
+                                    <p className="mt-4 text-base text-gray-500">
+                                        {feature.description}
+                                    </p>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </section>
+            )}
+            <div className="flex align-center justify-center">
+                <a
+                    className="bg-emerald-500 rounded-md p-4 text-xl text-white font-bold shadow-xl"
+                    href="https://github.com/smebberson/next-tailwind-fontawesome"
+                    rel="noreferrer"
+                    target="_blank"
+                >
+                    Get Started
+                </a>
+            </div>
+        </div>
+    );
+}
diff --git a/package.json b/package.json
@@ -17,17 +17,22 @@
     "postcss": "8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tailwindcss": "3.1.6"
+    "tailwindcss": "3.1.6",
+    "vercel": "32.4.1",
+    "wrangler": "3.13.1"
   },
   "scripts": {
     "build": "next build",
+    "build:ci": "yarn next-on-pages",
     "dev": "next dev",
+    "dev:ci": "npx wrangler pages dev .vercel/output/static --compatibility-flag=nodejs_compat",
     "lint": "next lint",
     "pre-commit": "next lint",
     "prepare": "husky install",
     "start": "next start"
   },
   "devDependencies": {
+    "@cloudflare/next-on-pages": "1.6.3",
     "eslint": "8.36.0",
     "eslint-config-next": "13.5.5",
     "husky": "8.0.1",
@@ -36,5 +41,6 @@
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
-  }
+  },
+  "packageManager": "yarn@1.22.19"
 }