Beam Internal Blog

Beam Internal Blog
Type: Code
Framework: Next.js
CSS: Tailwind
Database: PlanetScale

Beam is a simple tool designed for sharing posts within your organization, similar to a lightweight internal blog. It comes with several features including a Markdown-based editor, image drag-and-drop, comments and likes, search functionality, a responsive layout with dark mode support, and an admin role for hiding posts. Here’s how to set up and run Beam:

Setup:

  1. Install Dependencies: Use pnpm to install the necessary dependencies.
  2. Create a Database:
    • Create a PlanetScale database.
    • Generate a connection string for your database in Prisma format.

      Alternatively, you can create the PlanetScale database and connection string using the pscale CLI or GitHub Actions (view instructions on how to do this).

  3. Set up Environment Variables:
    • Copy the provided .env.example to create a new .env file.
    • Open the .env file and set the DATABASE_URL variable with the connection string from PlanetScale.
  4. Create Database Schema: Use Prisma to create the database schema.
  5. Configure Authentication:
    • Beam supports GitHub and Okta authentication settings by default. You can also configure it with other common authentication providers thanks to NextAuth.js.
    • To configure GitHub authentication, follow the provided instructions.
    • To configure Okta authentication, follow the provided instructions.
    • If you want to use a different authentication provider supported by NextAuth.js, you can customize it by updating the lib/auth.ts file.
  6. Enable Image Uploads (Optional):
    • To enable image uploads, set the environment variable NEXT_PUBLIC_ENABLE_IMAGE_UPLOAD to true.
    • Beam uses Cloudinary for storing uploaded images. You can sign up for a free Cloudinary account.
    • Obtain your Cloudinary account details (Cloud Name, API Key, API Secret).
    • Update the .env file with the following variables:
      • CLOUDINARY_CLOUD_NAME: Your Cloud Name
      • CLOUDINARY_API_KEY: Your API Key
      • CLOUDINARY_API_SECRET: Your API Secret
  7. Configure Slack Notifications (Optional):
    • If you want to have new Beam posts published to a Slack channel, follow the provided instructions.

Running the App Locally:

To run the Beam app locally, use the following command:

pnpm dev

Then, open http://localhost:3000 in your web browser to access the app.

Authenticating with GitHub:

The app supports GitHub authentication. You can authenticate using your GitHub credentials.

Deploying to Vercel:

To deploy Beam to Vercel, you can use the one-click deploy option. However, make sure to update your callback URLs after deploying to ensure proper authentication and functionality.

Sign In

Register

Reset Password

Please enter your username or email address, you will receive a link to create a new password via email.