Toggle Menu

Astra DB and Gatsby.js Starter

Create a React.js, Gatsby application that reads data from DataStax Astra DB using GraphQL.

10 minutesBeginner

Updated


Astra DB and Gatsby.js Starter

30 minutes, Beginner, Start Building

Create a React.js, Gatsby application that reads data from DataStax Astra DB using GraphQL.

image

Objectives

  • Provide a fullstack development example using GraphQL with Astra DB as the storage backend.

How this works

Once the Astra DB credentials are provided, the necessary tables are created in the database. The webservice will be available on port 8080 once the application has been deployed.

This example uses Typescript. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript, and adds optional static typing to the language. It is is designed for development of large applications and transpiles to JavaScript.

Gatsby is a React-based, GraphQL powered, static site generator, with much of the functionality of a modern front-end framework. It brings together the best components of React, webpack, react-router, GraphQL, and other front-end tools. This is used to generate the application.

Get Started

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

Running the Astra DB and Gatsby.js 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:

image

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

image

  1. Locate the Get Started button to continue

image

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

image

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

image

  1. 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.

image

  1. 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.

image

  1. 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.

image

Github

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

image

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

image

  1. Clone the repository:

image

🚀 Getting Started Paths:

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

Running on your local machine

  1. 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(If using npm: npm start)

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

image

Running on GitPod

  1. Click the 'Open in GitPod' link:

Open in IDE

  1. Wait for your GitPod workspace to start:

image

  1. Set your Astra DB details in the GitPod terminal at the bottom of the screen:

image

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

image

  1. View your application:

image

Deploying to Netlify

  1. Click the 'Deploy to Netlify' button:

Deploy to Netlify

  1. Connect your GitHub account:

image

  1. Fill in the Netlify environment variables with information on your Astra DB:

image

  1. Click 'Save and Deploy':

image

  1. Wait for your app to deploy (this will take a minute or two, the screen will auto-refresh when the deployment is complete):

image

  1. Click your Netlify app link to view your live app:

image

  1. You've deployed your app to Netlify!

image

Create your Account and get started!

Let's Go!
View on GitHubDeploy to NetlifyDeploy to Vercel