qnxdev/astra-next.js-starter

⚡️ A sample Next.js + DataStax Astra starter app that leverages the AstraDB REST API to manage a character database.

Next.js/Astra Starter

10 minutes, Beginner, Start Building

A sample Next.js + DataStax Astra starter app that leverages the AstraDB REST API to manage a character database.

Objectives

• Provide a fullstack development example using Astra as the storage backend

How this works

Once the Astra credentials are provided, the necessary tables are created in the database and sample data is inserted. The webservice will be available on port 3000 once the application has been deployed. Once the application is running, you can begin to make changes to your app by editing pages/index.js.

Next.js is an open-source JavaScript framework that lets you build server-side rendering and static web applications using React. It is not nescessary to configuration of webpack or similar to start using Next.js, as it comes with its configuration. This make it very simple to start a project, as we only need to execute simple commands and the project is ready.

Vercel is a cloud platform for static sites and Serverless Functions, it enables developers to host Jamstack websites and web services that deploy instantly. You also have the option to deloy this app in Vercel.

Get Started

To build and play with this app, follow the build instructions that are located here: https://github.com/DataStax-Examples/astra-next.js-starter

Running Next.js/Astra Starter

Follow the instructions below to get started.

Prerequisites

Let's do some initial setup by creating a serverless(!) database.

DataStax Astra

1. Create a DataStax Astra account if you don't already have one:

2. On the home page. Locate the button Create Database

3. Locate the Get Started button to continue

4. Define a database name, keyspace name and select a database region, then click create database.

5. Your Astra DB will be ready when the status will change from Pending to Active 💥💥💥

6. After your database is provisioned, we need to generate an Application Token for our App. Go to the Settings tab in the database home screen.

7. Select Admin User for the role for this Sample App and then generate the token. Download the CSV so that we can use the credentials we need later.

8. After you have your Application Token, head to the database connect screen and copy the connection information that we'll need later. We'll replace ASTRA_DB_APPLICATION_TOKEN with the Token value that is part of your Application Token.

Github

1. Click Use this template at the top of the GitHub Repository:

2. Enter a repository name and click 'Create repository from template':

3. Clone the repository:

🚀 Getting Started Paths:

Make sure you've completed the prerequisites before starting this step

• Running on your local machine
• Running on GitPod
• Deploying to Vercel

Running on your local machine

1. cd into the cloned repository. Install Node dependencies with Yarn: yarn install (Alternatively, use npm: npm install)

2. Run the set up script: . ./gitpod-setup.sh

3. Start your app by running: yarn start or npm start

4. You can view your app at http://localhost:3000/:

Running on GitPod

1. Click the 'Open in GitPod' link:

2. Wait for your GitPod workspace to start:

3. Set your Astra credentials (from prerequisites) in the GitPod terminal at the bottom of the screen:

4. Click the 'Open browser' button in the bottom right of the screen:

5. View your application:

Deploying to Vercel

1. Click the 'Deploy' button:

2. Click continue:

3. Install Vercel for Github:

4. Enter your Astra database details and click deploy:

5. Click visit to view your live app: