Illustration Image

Cassandra.Link

The best knowledge base on Apache Cassandra®

Helping platform leaders, architects, engineers, and operators build scalable real time data platforms.

9/17/2020

Reading time:2 min

DataStax-Examples/astra-gatsbyjs-starter

by John Doe

30 minutes, BeginnerCreate a React.js, Gatsby application that reads data from DataStax Astra using GraphQL.Contributor: Alex LeventerObjectivesProvide a fullstack development example using GraphQL with Astra as the storage backend.How this worksOnce the Astra 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 transcompiles 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.🚀 Getting Started Paths:Run the app locallyRun the app on GitpodDeploy the app to NetlifyRunning on your local machineCreate a DataStax Astra account and free-tier Cassandra database:Click 'Use this template' at the top of the README:Enter a repository name and click 'Create repository from template':Clone the repository:Install Node dependencies with Yarn: yarn install (Alternatively, use npm: npm install)Run the set up script: . ./gitpod-setup.shStart your app by running: yarn start(If using npm: npm start)You can view your app at http://localhost:8000/:Running on GitpodCreate a DataStax Astra account and free-tier Cassandra database:Once you have created both an Astra account and database, click the 'Open in Gitpod' link:Wait for your Gitpod workspace to start:Set your Astra database details in the Gitpod terminal at the bottom of the screen:You can find your database id here in the Astra user-interface here:Click the 'Open browser' button in the bottom right of the screen:View your application:Deploying to NetlifyCreate a DataStax Astra account and free-tier Cassandra database:Once you have created both an Astra account and database, click the 'Deploy to Netlify' button:Connect your GitHub account:Fill in the Netlify environment variables with information on your Astra database:You can find your database id here in the Astra user-interface here:Click 'Save and Deploy':Wait for your app to deploy (this will take a minute or two, the screen will auto-refresh when the deployment is complete):Click your Netlify app link to view your live app:You've deployed your app to Netlify!

Illustration Image

30 minutes, Beginner

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

image

Contributor: Alex Leventer

Objectives

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

How this works

Once the Astra 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 transcompiles 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.

🚀 Getting Started Paths:

  1. Run the app locally
  2. Run the app on Gitpod
  3. Deploy the app to Netlify

Running on your local machine

  1. Create a DataStax Astra account and free-tier Cassandra database: image
  2. Click 'Use this template' at the top of the README: image
  3. Enter a repository name and click 'Create repository from template': image
  4. Clone the repository: image
  5. Install Node dependencies with Yarn: yarn install (Alternatively, use npm: npm install)
  6. Run the set up script: . ./gitpod-setup.sh
  7. Start your app by running: yarn start(If using npm: npm start)
  8. You can view your app at http://localhost:8000/: image

Running on Gitpod

  1. Create a DataStax Astra account and free-tier Cassandra database: image
  2. Once you have created both an Astra account and database, click the 'Open in Gitpod' link:

Open in Gitpod

  1. Wait for your Gitpod workspace to start: image
  2. Set your Astra database details in the Gitpod terminal at the bottom of the screen: image You can find your database id here in the Astra user-interface here: image
  3. Click the 'Open browser' button in the bottom right of the screen: image
  4. View your application: image

Deploying to Netlify

  1. Create a DataStax Astra account and free-tier Cassandra database: image
  2. Once you have created both an Astra account and database, click the 'Deploy to Netlify' button:

Deploy to Netlify

  1. Connect your GitHub account: image
  2. Fill in the Netlify environment variables with information on your Astra database: image You can find your database id here in the Astra user-interface here: image
  3. Click 'Save and Deploy': image
  4. Wait for your app to deploy (this will take a minute or two, the screen will auto-refresh when the deployment is complete): image
  5. Click your Netlify app link to view your live app: image
  6. You've deployed your app to Netlify! image

Related Articles

cluster
troubleshooting
datastax

GitHub - arodrime/Montecristo: Datastax Cluster Health Check Tooling

arodrime

4/3/2024

Checkout Planet Cassandra

Claim Your Free Planet Cassandra Contributor T-shirt!

Make your contribution and score a FREE Planet Cassandra Contributor T-Shirt! 
We value our incredible Cassandra community, and we want to express our gratitude by sending an exclusive Planet Cassandra Contributor T-Shirt you can wear with pride.

Join Our Newsletter!

Sign up below to receive email updates and see what's going on with our company

Explore Related Topics

AllKafkaSparkScyllaSStableKubernetesApiGithubGraphQl

Explore Further

gatsby