Jeffrey Carpenter

This issue edited by Séan Bogaard, Developer Learning @ DataStax

We’re seeing more and more interest in accessing Apache Cassandra from JavaScript applications. This is accelerating with the launch of Astra, our Cassandra as-a-service offering,&nbsp; as well as the increasing popularity of applications using the <a href="https://jamstack.org/">JAM Stack</a> (JavaScript, APIs and Markup). JAM Stack is an innovative approach that makes web applications easy to write, deploy, scale, and also maintain. Using this approach means that newly created content is rendered from a content API, while a static render of it is being built into the site for the future.

In this edition, we’ll focus on a sample JAM Stack application - it’s a “Todo List” app that uses ReactJS and the free tier of Astra. You can deploy your own copy to Netlify or Gitpod in just a few clicks, or run a local copy on your desktop. Access the example at: <a href="https://github.com/DataStax-Examples/todo-astra-jamstack-netlify">https://github.com/DataStax-Examples/todo-astra-jamstack-netlify</a>.

How does it work?

To set up the application you’ll need a <a href="https://astra.datastax.com/register">DataStax Astra account</a> and free-tier Cassandra database. When you deploy the application, you’ll provide your Astra credentials and the application will create the necessary tables in the database. The web service will be available on port 8080 once the application has been deployed. You have three options for deploying which we’ll describe below, or watch our <a href="https://www.youtube.com/watch?v=-CkHnVOiUN0">walkthrough video</a>:

Option 1: Running on Gitpod

<ol>
	<li>Once you have created both an Astra account and database, click the 'Open in Gitpod' link: <a href="https://gitpod.io/#https://github.com/DataStax-Examples/todo-astra-jamstack-netlify">&nbsp;“Open in Gitpod”</a></li>
	<li>Wait for your Gitpod workspace to start</li>
	<li>Set your Astra database details in the Gitpod terminal at the bottom of the screen</li>
	<li>Click the 'Open browser' button in the bottom right of the screen</li>
	<li>View your application</li>
</ol>

Option 2: Deploying to Netlify

<ol>
	<li>Once you have created both an Astra account and database, click the 'Deploy to Netlify' button:<a href="https://app.netlify.com/start/deploy?repository=https://github.com/DataStax-Examples/todo-astra-jamstack-netlify"> “Deploy in Netlify”</a></li>
	<li>Connect your GitHub account</li>
	<li>Fill in the Netlify environment variables with information on your Astra database</li>
	<li>Click 'Save and Deploy'</li>
	<li>Wait for your app to deploy (this will take a minute or two, the screen will auto-refresh when the deployment is complete)</li>
	<li>Click your Netlify app link to view your live app</li>
	<li>You've deployed your app to Netlify!&nbsp;</li>
</ol>

Option 3: Running on your local machine

<ol>
	<li>Click 'Use this template' at the top of the README</li>
	<li>Enter a repository name and click 'Create repository from template'</li>
	<li>Clone the repository on your local machine</li>
	<li>cd to the cloned repository and install Node dependencies: npm install.</li>
	<li>Find the values for the Astra variables from the Astra database dashboard. One exception is the ASTRA_DB_ID variable. It is the string in the URL after https://astra.datastax.com/org/. Set ASTRA_DB_USERNAME, ASTRA_DB_PASSWORD, ASTRA_DB_KEYSPACE, ASTRA_DB_ID, and ASTRA_DB_REGION environment variables using the shell command export &lt;ENV_VAR_NAME&gt;=&lt;value&gt;.</li>
	<li>In the cloned repository, build the app: npm start.</li>
	<li>Open <a href="http://localhost:8080">http://localhost:8080</a> to view your application</li>
</ol>

With the steps listed here, you can take this example and apply it to your personal application development. Our goal is to speed up your development lifecycle and showcase how to leverage Astra as an asset in your day to day focus.

<h4>Learning Updates&nbsp;</h4>

<ul>
	<li><a href="https://datastax.com/dev">DataStax for Developers</a> - as you may recall, we launched our new developer site a few weeks back and we’re continuing to add content. Check out our new hands-on learning series on <a href="https://www.datastax.com/learning-series/cassandra-fundamentals">Cassandra Fundamentals</a> and new pages on accessing Astra using <a href="https://www.datastax.com/dev/rest">REST</a> and <a href="https://www.datastax.com/dev/graphql">GraphQL</a> APIs.&nbsp;</li>
	<li>We’ve also been working to modernize our DataStax Academy site and to streamline our certification process. Check out the developer site for more details, and email us at <a href="mailto:academy@datastax.com">academy@datastax.com</a> with any questions or issues.&nbsp;</li>
</ul>

<h4>Upcoming Events&nbsp;</h4>

<ul>
	<li><a href="https://www.eventbrite.com/e/cassandra-workshop-series-your-path-to-becoming-a-cassandra-expert-tickets-110114461318?aff=DevNews">Cassandra Workshop series</a> - We’re in the homestretch of our 8 week series including&nbsp; Cassandra basics, Cassandra data modeling, and application development with Cassandra. If you want to catch up on sessions from prior weeks, check out the recordings on the <a href="https://www.youtube.com/datastaxdevs">DataStax Devs YouTube</a> channel.</li>
</ul>

<h4>Community Highlights from <a href="https://cassandra.link/">Cassandra.Link</a></h4>

<ul>
	<li><a href="https://cassandra.link/jobs">New Cassandra.Link Jobs Section</a> - Brand new section which aggregates and classifies jobs that ONLY relate to Cassandra. Give it a go!&nbsp;</li>
	<li><a href="https://cassandra.link/post/data-engineering-programs-become-a-data-engineer">Data Engineering Nanodegree by Udacity</a> - A very popular course on Udacity which covers several topics such as data modeling for Cassandra, Python, and Apache Spark.&nbsp;</li>
	<li><a href="https://cassandra.link/post/ritchieng-deep-learning-wizard">Deep Learning Wizard</a> - Soup to nuts, everything you need to build scalable deep learning applications, with a special section on using Cassandra.&nbsp;</li>
</ul>

 
Do you have a cool demo to share or a topic to suggest? We’d love your feedback: <a href="mailto:developer@datastax.com">developer@datastax.com</a> | <a href="https://twitter.com/datastaxdevs?lang=en">@DataStaxDevs</a>.&nbsp;

Developer Newsletter: Run this new JAM Stack + Cassandra Demo in a few clicks

Jeffrey CarpenterSoftware Engineer - Stargate

Share

Share

Learning Updates

Upcoming Events

Community Highlights from Cassandra.Link

More Company

DataStax Acquires Langflow to Accelerate Generative AI Development

The Top 5 DataStax Stories from 2023

2023 Recap: Data = AI

DataStax Astra DB Nabs Three Prestigious 2023 TrustRadius “Best of” Awards, Dominates the Vector Databases Category

One-stop Data API for Production GenAI