Merge pull request #7 from ably-labs/refactor/implement-ts-and-general-overhaul

Refactor: Refactor to use ts and netlify functions

Author: carolcarriazo

.env.example

@@ -0,0 +1 @@
+ABLY_API_KEY=

.eslintrc.json

@@ -1,3 +1,26 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:react/recommended"
+  ],
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2021,
+    "sourceType": "module"
+  }
 }

.gitignore

@@ -29,3 +29,6 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+
+# local Netlify folder
+.netlify

.tool-versions

@@ -0,0 +1 @@
+nodejs 20.10.0

README.md

@@ -1,4 +1,4 @@
-# Building a Realtime Chat App with Next.js, Ably, and Vercel
+# Building a Realtime Chat App with Next.js, Ably, and Netlify
 
 Live example at: <https://next-js-chat-app.vercel.app>
 
@@ -18,20 +18,22 @@ It demonstrates the use of:
 
 The project uses the following components:
 
-- [Next.js](https://nextjs.org/) is a React framework from [Vercel](https://vercel.com/). It is used to build static web applications with server side rendering, serverless functions and seamless hosting. It's a framework that takes the React knowledge you already have, and puts some structure and conventions in place.
+- [Next.js](https://nextjs.org/) is a React framework used to build static web applications with server side rendering, serverless functions and seamless hosting. It's a framework that takes the React knowledge you already have, and puts some structure and conventions in place.
 
 - [Ably](https://ably.com/) is realtime, pub/sub messaging platform with a suite of integrated services to deliver complete realtime functionality directly to end-users.
 
-- [Vercel](https://vercel.com/) is a hosting platform, built from the ground up to host Next.js apps, and Serverless Functions with them.
+- [Netlify](https://netlify.com/) is a hosting platform that provides continuous deployment, serverless functions, and a global CDN for modern web projects.
 
 - [React](https://reactjs.org/) is a JavaScript library for building user interfaces with encapsulated components that manage their own state.
 
+- [TypeScript](https://www.typescriptlang.org/) is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
+
 ## What are we going to build?
 
-![The UI of the chat app we'll build. It is a window with speech bubbles for text.](https://cdn.glitch.com/0cb30add-c9ef-4c00-983c-e12deb0d4080%2Fchatapp.png?v=1612279601157)  
-*The UI of the app we'll build with this walkthrough*  
+![The UI of the chat app we'll build. It is a window with speech bubbles for text.](https://cdn.glitch.com/0cb30add-c9ef-4c00-983c-e12deb0d4080%2Fchatapp.png?v=1612279601157)
+*The UI of the app we'll build with this walkthrough*
 
-We'll build a realtime chat app that runs in the browser. It will be built upon the Next.js [create-next-app](https://nextjs.org/docs/api-reference/create-next-app) template, it will contain a React component which will use Ably to send and receive messages. We'll also write a Next.js serverless function which will be used to connect to Ably.
+We'll build a realtime chat app that runs in the browser. It will be built upon the Next.js [create-next-app](https://nextjs.org/docs/api-reference/create-next-app) template, it will contain a React component which will use Ably to send and receive messages. We'll also write a serverless function which will be used to authenticate the client with Ably.
 
 ## Building & running locally
 
@@ -40,8 +42,8 @@ We'll build a realtime chat app that runs in the browser. It will be built upon
 In order to build and deploy this app, you will need:
 
 - **An Ably account** for sending messages: [Create an account with Ably for free](https://ably.com/signup).
-- **A Vercel Account** for hosting on production: [Create an account with Vercel for free](https://vercel.com/signup).
-- **Node 16** or greater: [Install Node](https://nodejs.org/en/).
+- **A Netlify Account** for hosting on production: [Create an account with Netlify for free](https://netlify.com/signup).
+- **Node 20** or greater: [Install Node](https://nodejs.org/en/).
 
 You'll also need an API key from Ably to authenticate with the Ably Service. To get an API key, once you have [created an Ably account](https://ably.com/signup):
 
@@ -58,24 +60,35 @@ ABLY_API_KEY=your-ably-api-key:goes-here
 ```
 
 2. Run `npm install`.
-3. Run `npm run dev`.
+3. Run `npm run netlify:dev` to start the Netlify development server.
+
+The Netlify development server will spin up and you'll see a demo chat application.
+
+> Note: You can also use `npm run dev` to run just the Next.js development server without Netlify functions, but for the full experience with serverless functions, use `npm run netlify:dev`.
+
+### TypeScript Support
+
+This project uses TypeScript for type safety. Here are some useful commands for TypeScript development:
+
+- `npm run type-check`: Run TypeScript's type checker without emitting files
+- `npm run dev`: The Next.js development server automatically type-checks your code as you develop
 
-The Next.js dev server will spin up and you'll see a demo chat application.
+When creating new components or functions, use the `.tsx` extension for React components and `.ts` for plain TypeScript files. The project is configured with a `tsconfig.json` file that provides sensible defaults for Next.js TypeScript projects.
 
-## Hosting on Vercel
+## Hosting on Netlify
 
-We're using `Vercel` as our development server and build pipeline.
+We're using `Netlify` as our development server and build pipeline.
 
-> The easiest way to deploy Next.js to production is to use the Vercel platform from the creators of Next.js. Vercel is an all-in-one platform with Global CDN supporting static & Jamstack deployment and Serverless Functions.
-<cite>-- [The Next.js documentation](https://nextjs.org/docs/deployment)</cive>
+> Netlify is a powerful platform for building, deploying, and managing modern web projects. It provides continuous deployment, serverless functions, and a global CDN.
+<cite>-- [The Netlify documentation](https://docs.netlify.com/)</cite>
 
-In order to deploy your new chat app to Vercel you'll need to:
+In order to deploy your new chat app to Netlify you'll need to:
 
 1. Create a [GitHub account](https://github.com/) (if you don't already have one)
 2. [Push your app to a GitHub repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository)
-3. [Create a Vercel account](https://vercel.com/signup)
-4. Create a new Vercel app and import your app from your GitHub repository. (This will require you to authorise Vercel to use your GitHub account)
-5. Add your `ABLY_API_KEY` as an environment variable
+3. [Create a Netlify account](https://netlify.com/signup)
+4. Create a new Netlify site and import your app from your GitHub repository. (This will require you to authorize Netlify to use your GitHub account)
+5. Add your `ABLY_API_KEY` as an environment variable in the Netlify site settings
 6. Watch your app deploy
 7. Visit the newly created URL in your browser!
 

app/layout.js

@@ -0,0 +1,16 @@
+import './globals.css';
+import React from 'react';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

app/layout.tsx

@@ -1,17 +1,8 @@
-import Head from 'next/head';
-import dynamic from 'next/dynamic';
-
-const Chat = dynamic(() => import('../components/Chat'), {
-  ssr: false,
-});
+import Chat from '@/components/Chat';
 
 export default function Home() {
   return (
     <div className="container">
-      <Head>
-        <title>Realtime Chat App with Ably Chat, Next.js and Netlify</title>
-        <link rel="icon" href="https://static.ably.dev/motif-red.svg?nextjs-netlify" type="image/svg+xml" />
-      </Head>
       <main>
         <h1 className="title">Ably Chat Demo</h1>
         <Chat />

app/page.js renamed to app/page.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import * as Ably from 'ably';
+import { ChatClient } from '@ably/chat';
+import { ChatClientProvider, ChatRoomProvider } from '@ably/chat/react';
+import ChatBox from './ChatBox';
+import React, { useEffect, useState } from 'react';
+
+export default function Chat() {
+  const [chatClient, setChatClient] = useState<ChatClient | null>(null);
+
+  useEffect(() => {
+    const clientId = `ably-chat-demo-user-${Math.random().toString(36).substring(2, 10)}`;
+    const realtimeClient = new Ably.Realtime({ authUrl: `/api/auth?clientId=${clientId}`, clientId });
+    const ablyChatClient = new ChatClient(realtimeClient);
+
+    setChatClient(ablyChatClient);
+    return () => {
+      realtimeClient.close();
+    };
+  }, []);
+
+  if (!chatClient) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <ChatClientProvider client={chatClient}>
+      <ChatRoomProvider id="chat-demo">
+        <ChatBox />
+      </ChatRoomProvider>
+    </ChatClientProvider>
+  );
+}