/netlify-astra-example

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

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. Define a database name, keyspace name and select a database region, then click create database. Use what you like, the setup will create the correct database and keyspace.

  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.

Deploy to Netlify

This will take a few minutes.

  • Click on "Site deploy in progress", then the top deploy link to see the build process.

  • When you see "Pushing to repository " you're ready to move on. Scroll up to the top and click on the site name (it'll be after {yourlogin}'s Team next to the Netlify button).

  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.

  • Clone this repository to your local system by clicking the "Code" button, copying the link, and running git clone {repo}

  • Change into your repository directory cd {repo}

  1. In the repository directory, run npm install

  2. In the repository directory, run astra-setup to set up your Astra environment

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`

npm exec astra-setup netlify todos

  1. Next you will run some commands to connect netlify to your site.

    • 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 - this will take the .env file created by astra-setup and upload it to netlify.
    • netlify sites:list - will be used to allow you to execute npm exec netlify-open

  2. Run the application netlify dev and open http://localhost:8080 to view your application:

  3. Run npm exec netlify-open. You've deployed your app to Netlify! image

Things to Note: