JAMStack + Netlify + Astra + Cassandra 📒

10 minutes, Beginner, Start Building

This is an example React To-Do application using a DataStax Astra free tier 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. The webservice will be available on port 8080 once the application has been deployed.

JAMstack is a big leap forward in how we can write web applications that are 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 future.

Running JAMStack + Netlify + Astra + Cassandra

Follow the instructions below to get started.

Prerequisites

• git installed on your local system
• github account
• node 15 and npm 7 or later

Getting Started

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

1. Login/Register Click the button to login or register with Datastax.

• 
• Show me!

  

Use the following values when creating the database

Field	Value
database name	netlify
keypace	todos
Cloud Provider	Use the one you like, click a cloud provider logo, pick an Area in the list and finally pick a region.

2. Deploy to Netlify

• What does the netlify deploy button do?

  The Netlify deploy button will:

  • Create a new repository for you on Github
  • Create a site on Netlify
  • Link the two together.

• Click the button to deploy:

• Show me!

  

3. Access YOUR GitHub repository

• Click on the GitHub in Deploys from GitHub to get back to your new repository. Scroll to where you were in the README.
  Show me!

  

4. Launch GitPod IDE

• Click the button to launch the GitPod IDE from YOUR repository.

• Supported by Chrome and Firefox

WAIT! Before moving on ensure you are working out of YOUR repository, not the datastaxdevs repository.

If you are still using the datastaxdevs repo please ensure to follow the previous step, step3 to get to your repo.

• Ok, I've got it, just give me the button already

• CLICK HERE to launch GitPod

  

WAIT! Before moving on ensure you are working out of YOUR repository, not the datastaxdevs repository.

• From your GitPod terminal execute the following command

git remote -v

If the result returned from the command displays datastaxdevs then you are not in the correct repository. If this is the case please repeat step 3 above, otherwise just move on to the next step.

5. Install the Netlify CLI (Command Line Interface)

• In the workshop-astra-tik-tok directory run the following command to install the netlify-cli

npm install -g netlify-cli

• Show me!

  

6. Generate application token to securely connect to the database

Following the Documentation create a token with Database Admnistrator roles.

• Go the Organization Settings

• Go to Token Management

• Pick the role Database Admnistrator on the select box

• Click Generate token

• Show me!

  

This is what the token page looks like.

• Click the Download CSV button. You are going to need these values here in a moment.

Notice the clipboard icon at the end of each value.

• Client ID: We will not use this during this workshop

• Client Secret: We will not use this during this workshop

• Token: This is your token! We will use it as a api Key to interact with APIS

This video describes the procedure to generate a token in Astra DB.

7. Configure and connect database

• In the repository directory run the following command to set up your Astra DB environment. This will verify the database you created earlier or create a new one for you if it can't find your database.

npm exec astra-setup tiktok_workshop_db tiktok_keyspace

What does astra-setup do?

To setup your ASTRA instance, you want to run `npm exec astra-setup`

This will do the following:
* Have you go to your [Astra DB instance](https://datastx.io/workshops) to register or login. There is no credit card required to sign up. The 'Pay as you go' option gives you a huge amount of transactions for free:
    * 30 million reads
    * 5 million writes
    * 40 gigabytes of storage
* Give steps to grab a Database Administrator Token and paste it into the input field
* Ask you what database you want to use (default, existing, create)
* Create or access the database
* Create/update an .env file in the project root
* Create/update an .astrarc file in your home directory
    * This can be used by httpie-astra `pip3 install httpie-astra`
    * It can also be used by the @astra/collections and @astra/rest node modules

## Specify the database and keyspace
You can run the script and tell it which database/keyspace to use by using:
`npm exec astra-setup databasename keyspacename`

8. Launch your app

• Run the application

netlify dev

• The application should automatically launch in the GitPod preview pane

9. Connect Netlify to your site

Execute each of the commands below to link your code to your Netlify deployment.

• First thing, we'll need to STOP the netlify dev command we issued a moment ago. In the terminal where you executed the netlify command issue a CTRL-C (control key + the C key) in order to stop the process.
• Then continue with the following commands
• This will pop up a browser to authenticate with netlify

netlify login

Note, when using GitPod the preview pane will not display this properly. You must click the "open in a new window" button in the very top right of the preview pane.

• This will link your workspace to the associated site

netlify link

• This will take the .env file created by astra-setup and upload it to netlify

netlify env:import .env

10. Deploy to production

Now that you've hooked everything up, time to deploy to production.

• Run

netlify build

• Then run

netlify deploy --prod

• Then finally run

netlify open:site

You've deployed your app to Netlify!