/netlify-astra-example-2

Primary LanguageJavaScript

JAMStack + Netlify + Astra + Cassandra 📒

10 minutes, Beginner, Start Building

This is an example React To-Do application using a DataStax Astra free tier database.

image

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

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.
  1. 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: Deploy to Netlify
  • Show me!

This will take a few minutes.

  • Click on Site deploy in progress,

    Show me!

  • Click the top deploy link to see the build process.

    Show me!

  • Wait until the build complete Netlify Build Complete, When you see Pushing to repository you're ready to move on.

    Show me!

  • Scroll up to the top and click on the site name (it'll be after {yourlogin}'s Team next to the Netlify button).

    Show me!
  1. Clone 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!

  • Clone this repository to your local system by clicking the Code button,

    Show me!

  • Copying the link, and running in a terminal

    git clone {repo_link}
    Show me!

  • Change into your repository directory

cd netlify-astra-example
  1. In the repository directory
npm install
npm install -g netlify-cli
  1. In the repository directory run the following command to set up your Astra environment. Note that this does require Node 15 and NPM 7 to work. You can install a node version manager like nvm or n to use multiple versions on your system.
npm exec astra-setup netlify todos
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 Database](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`
  1. Next you will run some commands to connect netlify to your site.
    • npm install -g netlify-cli
    • netlify login - this will pop up a browser to authenticate with netlify.
    • netlify link - this will link your workspace to the associated site
    • netlify env:import .env - this will take the .env file created by astra-setup and upload it to netlify.
    • Run the application netlify dev and open http://localhost:8080 to view your application:
    • netlify deploy
    • netlify open:site - will launch a browser with your new site on Netlify

Things to Note: