diff --git a/nextjs-vercel/README.md b/nextjs-vercel/README.md index 5a9bd91..55bee0c 100644 --- a/nextjs-vercel/README.md +++ b/nextjs-vercel/README.md @@ -40,7 +40,24 @@ yarn create next-app --example https://github.com/whereby/embedded-examples/tree ## Getting Started -First, run the development server: +We are using [Custom Server](https://nextjs.org/docs/advanced-features/custom-server) to run dev server on HTTPS with SSL certificate in `./server.js`. +Note: A custom server can not be deployed on Vercel. + +1. Follow [this guide](https://web.dev/how-to-use-local-https/#setup) to create a certificate for `whereby.localhost.dev`, +```bash +mkcert -install + +mkcert whereby.localhost.dev +``` +and move the resulting files (which should be named `whereby.localhost.dev-key.pem` and `whereby.localhost.dev.pem`) to `https_cert/`. + +2. Add `127.0.0.1 whereby.localhost.dev` as a new line to your `/etc/hosts` file (`sudo vi /etc/hosts`). So you can have local HTTPS. + +3. Go to your Whereby Embedded dashboard and allow the `https://whereby.localhost.dev:3000` domain. + +4. Create a `.env.local` file and add your Whereby Embedded environment variables `WHEREBY_API_KEY=eyJhb...` and `WHEREBY_WEBHOOK_SECRET=3bag9...`. + +5. Run the development server: ```bash npm run dev @@ -48,10 +65,11 @@ npm run dev yarn dev ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +6. Open [https://whereby.localhost.dev:3000](https://whereby.localhost.dev:3000) with your browser to see the result. You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/whereby/meetings](http://localhost:3000/api/whereby/meetings). This endpoint can be edited in `pages/api/whereby/meetings/index.js`. +[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [https://whereby.localhost.dev:3000/api/whereby/meetings](https://whereby.localhost.dev:3000/api/whereby/meetings). +This endpoint can be edited in `pages/api/whereby/meetings/index.js`. The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. diff --git a/nextjs-vercel/components/CreateMeetingAPI/useCreateMeetingAPI.js b/nextjs-vercel/components/CreateMeetingAPI/useCreateMeetingAPI.js index 39107da..d8e7679 100644 --- a/nextjs-vercel/components/CreateMeetingAPI/useCreateMeetingAPI.js +++ b/nextjs-vercel/components/CreateMeetingAPI/useCreateMeetingAPI.js @@ -20,7 +20,6 @@ const text2Array = (_currentValue, originalValue) => { return originalValue.length > 0 ? originalValue.split(",") : []; }; - const now = new Date(); const schema = yup.object().shape({ @@ -31,9 +30,17 @@ const schema = yup.object().shape({ .max(40), roomNamePattern: yup.string().oneOf(["uuid", "human-short"]), roomMode: yup.string().oneOf(["group", "normal"]), - startDate: yup.date().transform(dateInput2Date).min(new Date(now.toDateString())).required(), + startDate: yup + .date() + .transform(dateInput2Date) + .min(new Date(now.toDateString())) + .required(), startTime: yup.date().transform(timeInput2Date).required(), - endDate: yup.date().transform(dateInput2Date).min(new Date(now.toDateString())).required(), + endDate: yup + .date() + .transform(dateInput2Date) + .min(new Date(now.toDateString())) + .required(), endTime: yup.date().transform(timeInput2Date).required(), fields: yup .array() @@ -48,8 +55,8 @@ const defaultValues = { roomMode: "normal", startDate: format(now, "yyyy-LL-dd"), startTime: format(now, "HH:mm"), - endDate: format(add(now, {hours: 1}), "yyyy-LL-dd"), - endTime: format(add(now, {hours: 1}), "HH:mm"), + endDate: format(add(now, { hours: 1 }), "yyyy-LL-dd"), + endTime: format(add(now, { hours: 1 }), "HH:mm"), fields: "", }; diff --git a/nextjs-vercel/components/DeleteMeetingAPI/index.js b/nextjs-vercel/components/DeleteMeetingAPI/index.js index ba5d960..807c761 100644 --- a/nextjs-vercel/components/DeleteMeetingAPI/index.js +++ b/nextjs-vercel/components/DeleteMeetingAPI/index.js @@ -38,7 +38,7 @@ const DeleteMeetingAPI = ({ defaultMeetingId, onMeetingDeleted }) => { setMeetingId(v)} - value={meetingId || defaultMeetingId} + defaultValue={defaultMeetingId} /> diff --git a/nextjs-vercel/components/GetMeetingAPI/index.js b/nextjs-vercel/components/GetMeetingAPI/index.js index 9e9076c..8bb4b47 100644 --- a/nextjs-vercel/components/GetMeetingAPI/index.js +++ b/nextjs-vercel/components/GetMeetingAPI/index.js @@ -35,7 +35,7 @@ const GetMeetingAPI = ({ defaultMeetingId }) => { setMeetingId(v)} - value={meetingId || defaultMeetingId} + defaultValue={defaultMeetingId} /> diff --git a/nextjs-vercel/components/JoinMeeting/index.js b/nextjs-vercel/components/JoinMeeting/index.js new file mode 100644 index 0000000..a4ceafa --- /dev/null +++ b/nextjs-vercel/components/JoinMeeting/index.js @@ -0,0 +1,33 @@ +import React from "react"; + +const JoinMeeting = ({ roomUrl }) => { + const [showRoom, setShowRoom] = React.useState(false); + + return ( +
+ + {showRoom && roomUrl && ( +
+ `, + }} + /> + )} +
+ ); +}; + +export default JoinMeeting; diff --git a/nextjs-vercel/package.json b/nextjs-vercel/package.json index 8a8b91b..b59f119 100644 --- a/nextjs-vercel/package.json +++ b/nextjs-vercel/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev", + "dev": "node server.js", "build": "next build", "start": "next start", "lint": "next lint" diff --git a/nextjs-vercel/pages/index.js b/nextjs-vercel/pages/index.js index bbabb3c..243c18d 100644 --- a/nextjs-vercel/pages/index.js +++ b/nextjs-vercel/pages/index.js @@ -5,6 +5,7 @@ import CreateMeetingAPI from "../components/CreateMeetingAPI"; import GetMeetingAPI from "../components/GetMeetingAPI"; import DeleteMeetingAPI from "../components/DeleteMeetingAPI"; import WherebyLogo from "../components/WherebyLogo"; +import JoinMeeting from "../components/JoinMeeting"; export default function Home() { const [createdMeetingInfo, setCreatedMeetingInfo] = React.useState(null); @@ -36,15 +37,10 @@ export default function Home() { onMeetingCreated={(info) => setCreatedMeetingInfo(info)} createdMeetingInfo={createdMeetingInfo} /> - + + setCreatedMeetingInfo(null)} /> diff --git a/nextjs-vercel/server.js b/nextjs-vercel/server.js new file mode 100644 index 0000000..8f4b6ad --- /dev/null +++ b/nextjs-vercel/server.js @@ -0,0 +1,25 @@ +const { createServer } = require("https"); +const { parse } = require("url"); +const next = require("next"); +const fs = require("fs"); +const port = 3000; +const dev = process.env.NODE_ENV !== "production"; +const app = next({ dev }); +const handle = app.getRequestHandler(); + +const httpsOptions = { + // Mkcert generated SSL certificate path + // Add `whereby.localhost.dev` as `127.0.0.1` alias in `/etc/hosts` + key: fs.readFileSync("./https_cert/whereby.localhost.dev-key.pem"), + cert: fs.readFileSync("./https_cert/whereby.localhost.dev.pem"), +}; + +app.prepare().then(() => { + createServer(httpsOptions, (req, res) => { + const parsedUrl = parse(req.url, true); + handle(req, res, parsedUrl); + }).listen(port, (err) => { + if (err) throw err; + console.log("ready - started server on url: https://localhost:" + port); + }); +}); diff --git a/nextjs-vercel/tailwind.config.js b/nextjs-vercel/tailwind.config.js index 4548ed7..93e80ed 100644 --- a/nextjs-vercel/tailwind.config.js +++ b/nextjs-vercel/tailwind.config.js @@ -26,7 +26,9 @@ module.exports = { }, }, variants: { - extend: {}, + extend: { + opacity: ["disabled"], + }, }, plugins: [require("@tailwindcss/forms")], };