Next.js demo reference

The Next.js demo source is on GitHub. fly launch will provide a Dockerfile and a fly.toml config file. When you make changes to your application, you can run npx @flydotio/dockerfile to produce updated Dockerfiles.

How the pieces are put together:

• The original web-dictaphone app is placed in the Next.js app directory:
  • app/dictaphone.js contains the JavaScript.
  • app/globals.css contains the stylesheets.
  • app/page.js contains the HTML
• server.js and app/audio/[name]/route.js contain the server implementation.
• The pg module is used to access PostgreSQL. Access to the database is through the DATABASE_URL secret. This module is low level which is sufficient for this demo, but most modern Node.js applications use an ORM.
• The AWS SDK for JavaScript is used to access Tigris. The following secrets are used to establish the connection: AWS_ACCESS_KEY_ID, AWS_ENDPOINT_URL_S3, AWS_REGION, AWS_SECRET_ACCESS_KEY, and BUCKET_NAME.
• The express-ws module is used for WebSocket support.
• The redis module is used to access Redis. The REDIS_URL secret is used to access the database.

Key points of logic:

• app/page.js contains the home page. All of the clip data comes from web sockets.
• app/dictaphone.js has been modified to make server requests at various points using the Fetch API; the delete and rename actions are split out so that they can be referenced by the React JSX Home page view.
• server.js contains the WebSocket code, and delegates to Next.js to render the rest.
• pubsub.js contains the interface to Redis. It is split out from the server to avoid circular dependencies.
• app/audio/[name]/route.js contains the logic to build responses to requests to GET, PUT, and DELETE audio clips.
• app/page.js contains the client implementation of web sockets.
• When the WHISPER_URL secret is set, PUT requests will cause the audio clips to be passed to the Whisper server, and responses will be used to update the PostgreSQL database. The code for this is in app/audio/[name]/route.js.