Weekly GitHub Project: NewsNow - Elegantly Reading Real-Time Trending News

orange cherry — Fri, 25 Oct 2024 17:58:08 +0000

Weekly GitHub Project: NewsNow - Elegantly Reading Real-Time Trending

Project Introduction

This week, we're introducing NewsNow, a news aggregation platform that allows you to elegantly read real-time trending news. NewsNow quickly aggregates real-time news from multiple data sources, offering a smooth reading experience that helps users easily access the latest trending information. This project supports GitHub OAuth login and uses Cloudflare D1 database to manage and store data.

In this guide, I'll walk you through the step-by-step process of deploying this open-source project on Cloudflare Pages. You’ll learn how to set up GitHub OAuth login, configure Cloudflare D1 database, and successfully deploy the project.

Deployment Guide

1. Preparation

1.1 Required Accounts

GitHub Account: To fork and manage the project code.
Cloudflare Account: To deploy and host the project.

1.2 GitHub OAuth Application Setup

To enable GitHub login, you need to create an OAuth application on GitHub.

Log in to GitHub and go to Developer Settings.
Choose OAuth Apps and click New OAuth App.
Fill in the application details:
- Application name: NewsNow (or any name you prefer).
- Homepage URL: Use the URL of your forked GitHub repository for now, e.g., https://github.com/your-username/newsnow. You can change this later to the deployed URL.
- Authorization callback URL: Use the format https://your-cloudflare-pages-url/api/auth/callback, replacing your-cloudflare-pages-url with your Cloudflare Pages URL after deployment.
After registration, save the Client ID and Client Secret.

2. Fork the GitHub Project

Go to the original project page on GitHub: NewsNow Project.
Click the Fork button at the top right to fork the project to your GitHub account.

3. Cloudflare Pages Deployment

3.1 Connect GitHub

Log in to your Cloudflare account.
In the Cloudflare dashboard, go to "Workers & Pages" on the left menu.
Click "Create a Project" and choose “Connect to Git”.
Authorize Cloudflare to access your GitHub account and select the newsnow repository that you forked.

3.2 Configure Cloudflare Pages Project

Choose the newsnow repository and proceed to the build settings page.
Set up the build parameters:
- Framework preset: Choose None.
- Build command: Enter pnpm install && pnpm build.
- Build output directory: Enter dist.

3.3 Configure Environment Variables

On the build settings page, click "Environment variables (advanced)".
Add the following environment variables:
- G_CLIENT_ID: Your GitHub OAuth application's Client ID.
- G_CLIENT_SECRET: Your GitHub OAuth application's Client Secret.
- JWT_SECRET: It's recommended to use the same value as G_CLIENT_SECRET.
- INIT_TABLE: Set to true for the first deployment to initialize the database.

4. Create Cloudflare D1 Database

4.1 Create the Database

In the Cloudflare dashboard, navigate to "Workers & Pages" -> "D1 SQL Database".
Click “Create Database”, and enter a name, e.g., newsnow_db.
Note down the Database ID and Database Name.

4.2 Configure the `wrangler.toml` File

In your GitHub repository, create or edit the wrangler.toml file in the project's root directory.
Add the following configuration to the wrangler.toml file:

   name = "newsnow-project"  # Your project name
   type = "javascript"

   [[d1_databases]]
   binding = "NEWSNOW_DB"
   database_name = "your_database_name"  # Replace with your created database name
   database_id = "your_database_id"      # Replace with your created database ID

Commit the changes to GitHub.

4.3 Redeploy the Project

Go back to the Cloudflare Pages project page.
Click the “Deploy” button to redeploy the project.

5. Deployment Verification

5.1 Access the Project

Wait for the deployment to complete.
Visit the URL provided by Cloudflare Pages to ensure the page loads correctly.

5.2 Adjust Database Initialization Setting

If the project is deployed successfully and data is loading correctly, go back to the Cloudflare Pages project settings.
Change the INIT_TABLE environment variable from true to false to prevent the database from re-initializing on future deployments.

5.3 Test GitHub OAuth Login

Try logging in with your GitHub account.
If the login fails, check if the Authorization callback URL in the GitHub OAuth settings matches the Cloudflare Pages URL.

6. Optional Configuration and Extensions

6.1 Custom Domain

If you have your own domain, you can set up a custom domain in Cloudflare Pages.

6.2 Extend Data Sources

Modify or add new data sources by editing the directories shared/metadata, shared/sources, and server/sources according to your needs.

6.3 Debugging and Logs

Use the debugging and log tools provided by Cloudflare to monitor the project’s performance.

DEV Community: orange cherry