⏲️ Duration : 2 hours

🎓 Level Beginner to Intermediate

A simple Tik-Tok clone running on Astra DB that leverages the Document API. You can see the Demo here

🔖 Accessing HANDS-ON

• HouseKeeping
  • 1. Objectives
  • 2. Frequently asked questions
  • 3. Materials for the Session
  • 4. Homework
• LAB 1 - Getting Started with Database
  • 1.1 - Create Astra Account
  • 1.2 - Create Astra Database
• LAB 2 - Document API
  • 2.1 - Using Document API
  • 2.2 - Create Astra Credentials
• LAB 3 - IDE Setup
  • 3.1 - Netlify site setup
  • 3.2 - Launch GitPod
  • 3.3 - Astra CLI Setup
  • 3.4 - Netlify CLI Setup
  • 3.5 - Launch the application
• LAB 4 - Coding Against DB
  • 4.1 - Document API
  • 4.2 - AstraJS Client
  • 4.3 - Serverless configuration
  • 4.4 - React Component
• LAB 5 - Netlify Deployments
  • 5.1 - Connect Netlify to your site
  • 5.2 - Deploy to production

• 🎯 How to build a frontend application using React Components

• 🎯 How to build a backend with Javascript without Express.

• 🎯 Learn how to use the @astrajs document API to quickly and easily interact with JSON documents

• 🎯 Learn what is gitpod and how you can use it in your projects

It doesn't matter if you join our workshop live or you prefer to do at your own pace, we have you covered. In this repository, you'll find everything you need for this workshop:

• Slide deck
• Discord chat
• Questions and Answers
• What is JamStack?
• Video tutorial with Ania Kubow

Don't forget to complete your work and get your verified skill badge! Finish and submit your homework!

1. Complete the practice steps from this repository as described below. Take a screenshot and show us your deployed production TikTok clone up in Netlify.
2. (Optional extra credit) Watch the 2 hour Ania video HERE, build the app yourself, and show us the completed app.
3. Submit your homework here

That's it, you are done! Expect an email next week!

ASTRA is the simplest way to run both Cassandra and Pulsar with zero operations at all - just push the button and get your clusters. No credit card required

↗️ Right Click and select open as a new Tab...

• On the home page spot one of the 3 [Create Database] button. They are all doing the same thing.

• Use the following values when creating the database:

🖥️ Output

• Now click [Create Database button] that became blue.
• The database is initializing, wait for the DB the move from [PENDING] to [ACTIVE]

🖥️ Output

• Click [Go to Database]

Here are some special situations you might encounter.

ℹ️ Hibernated Database:

If the DB workshops already exists but is hibernated (you have not use it for a while):

• Click the [Resume Database] button on the top right-hand corner.

ℹ️ Database already exists, create keyspace tiktok_keyspace

If DB exists and is active but tiktok_keyspace keyspace is not present you need to create the keyspace.

• Click button [Add Keyspace] on the database dashboard (bottom right-hand corner)
• Provide the keyspace name tiktok_keyspace
• Click button [Save]. The database will switch in maintenance mode for a few seconds, you are set.

• (1) - Select your database in the left panel (if needed)
• (2) - Select the tab Connect
• (3) - Select the Document API bloc
• (4) - In Launch Swagger UI right-click on the link to open in a new TAB

• You should access this screen

🖥️ Swagger UI

• (1) - Select the resource GET/v2/namespaces/{namespace-id}/collections

• (2) - Click the [Try It Out] button

• (3) - Populate the form with the following values

• (4) - Click on [Execute] button

The output is empty (expected):

[]

• (1) - Select the resource POST/v2/namespaces/{namespace-id}/collections

• (2) - Click the [Try It Out] button

• (3) - Populate the form with the following values

• (4) - Click on [Execute] button

• (5) - You can see the output with 201 (created) code

• (6) - Following the steps in previous section list collections again, you should get

🖥️ Output

{
 "data": [
   {
     "name": "story",
     "upgradeAvailable": false
   }
 ]
}

With a document oriented API there is no strict schema to comply with. As such let us decide what a story could look like.

• (1) - Select the resource POST/v2/namespaces/{namespace-id}/collections/{collection-id} Create a new Document

• (2) - Click the [Try It Out] button

• (3) - Populate the form with the following values

body:

{
  "name": "Mo Farooq",
  "username": "mofarooq32",
  "avatar": "https://i.imgur.com/9KYq7VG.png",
  "is_followed": true,
  "video": "https://i.imgur.com/FTBP02Y.mp4",
  "caption": "These ducks are MEGA cute",
  "likes": 10,
  "comments": 2,
  "button_visible": true
}

• (4) - Click on [Execute] button

• (5) - Should get a HTTP 201 (Created) and the output. A unique identifier has been created for our document.

🖥️ Output

{
 "documentId": "8aa07632-4ffb-46e5-9d78-b32e21847221"
}

• (1) - Select the resource GET /v2/namespaces/{namespace-id}/collections/{collection-id} Search documents in a collection

• (2) - Click the [Try It Out] button

• (3) - Populate the form with the following values

• (4) - Click on [Execute] button

• (5) - You should get a result

🖥️ Output

{
 "data": {
   "8aa07632-4ffb-46e5-9d78-b32e21847221": {
     "avatar": "https://i.imgur.com/9KYq7VG.png",
     "button_visible": true,
     "caption": "These ducks are MEGA cute",
     "comments": 2,
     "is_followed": true,
     "likes": 10,
     "name": "Mo Farooq",
     "username": "mofarooq32",
     "video": "https://i.imgur.com/FTBP02Y.mp4"
   }
 }
}

• (1) - Select the resource PUT /v2/namespaces/{namespace-id}/collections/{collection-id}/{document-id} Create or update a document with the provided document-id

• (2) - Click the [Try It Out] button

• (3) - Populate the form with the following values

body:

{
  "name": "New Name",
  "username": "mofarooq32",
  "avatar": "https://i.imgur.com/9KYq7VG.png",
  "is_followed": true,
  "video": "https://i.imgur.com/FTBP02Y.mp4",
  "caption": "These ducks are MEGA cute",
  "likes": 10,
  "comments": 2,
  "button_visible": true
}

• (4) - Click on [Execute] button

• (5) - You should get an updated document

• (1) - Select the resource DELETE /v2/namespaces/{namespace-id}/collections/{collection-id}/{document-id} _ Delete a document_

• (3) - Populate the form with the following values

• (4) - Click on [Execute] button

• (5) - You should get a result code of 204

🖥️ Output

Code 204
access-control-allow-credentials: true 
access-control-allow-origin: https://50b31120-2303-4f45-a9dd-1cfb03e24ff1-us-east1.apps.astra.datastax.com 
access-control-expose-headers: Date 
date: Mon,12 Dec 2022 18:12:43 GMT 
vary: Origin 

When using swagger in the user interface, you are already authenticated against the API. When using a third party application you will need a token.

ℹ️ Skip this step is you already have a token. You can reuse the same token in our other workshops, too.

• (1) - Go the Organization Settings
• (2) - Go to Token Management
• (3) - Pick the role Database Admnistrator on the select box
• (4) - Click Generate token

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

⚠️ Important

The instructor will show you on screen how to create a token 
but will have to destroy to token immediately for security reasons.

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

• (1) Click the button to deploy.

↗️ Right Click and select open as a new Tab...

• (2) - Authenticate with your github Account

• (3) - Select an account and the github repository where to clone

• (4) - In netlify user interface click on Site deploy in progress

• (5) - Click the top deploy link to see the build process.

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

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

• (8) - Click on the GitHub in Deploys from GitHub to get back to your new repository. Scroll to where you were in the README.

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

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

Last time, be certain to click this when you MOVED TO YOUR REPOSITORY (not datastaxdevs)

↗️ Right Click and select open as a new Tab...

• From your GitPod terminal execute the following command

git remote -v

🖥️ Output

origin  https://github.com/clun/workshop-astra-tik-tok.git (fetch)
origin  https://github.com/clun/workshop-astra-tik-tok.git (push)
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](#3-access-your-github-repository), otherwise just move on to the next step.

Locate an open terminal and enter the following command replacing <YOUR_TOKEN> by the one we created before starting with AstraCS:.. it should be in the CSV we download before

astra setup -t <YOUR_TOKEN>

• In the terminal panel in gitpod enter the following command:

astra user list

🖥️ Output

gitpod /workspace/workshop-astra-tik-tok (master) $ astra user list
+--------------------------------------+-----------------------------+---------------------+
| User Id                              | User Email                  | Status              |
+--------------------------------------+-----------------------------+---------------------+
| b665658a-ae6a-4f30-a740-2342a7fb469c | cedrick.lunven@datastax.com | active              |
+--------------------------------------+-----------------------------+---------------------+

• In the terminal panel in gitpod enter the following command:

astra db list

🖥️ Output

+---------------------+--------------------------------------+---------------------+----------------+
| Name                | id                                   | Default Region      | Status         |
+---------------------+--------------------------------------+---------------------+----------------+
| mtg                 | dde308f5-a8b0-474d-afd6-81e5689e3e25 | eu-central-1        | ACTIVE         |
| workshops           | 50b31120-2303-4f45-a9dd-1cfb03e24ff1 | us-east1            | ACTIVE         |
+---------------------+--------------------------------------+---------------------+----------------+

• In the terminal panel in gitpod enter the following command:

astra db get workshops

🖥️ Output

gitpod /workspace/workshop-astra-tik-tok (master) $ astra db get workshops
+------------------------+-----------------------------------------+
| Attribute              | Value                                   |
+------------------------+-----------------------------------------+
| Name                   | workshops                               |
| id                     | 50b31120-2303-4f45-a9dd-1cfb03e24ff1    |
| Status                 | ACTIVE                                  |
| Default Cloud Provider | GCP                                     |
| Default Region         | us-east1                                |
| Default Keyspace       | tiktok_keyspace                         |
| Creation Time          | 2022-12-12T11:14:58Z                    |
|                        |                                         |
| Keyspaces              | [0] tiktok_keyspace                     |
|                        |                                         |
|                        |                                         |
| Regions                | [0] us-east1                            |
|                        |                                         |
+------------------------+-----------------------------------------+

• Create .env file

astra db create-dotenv workshops -k tiktok_keyspace -r us-east1

• Show content

cat .env

🖥️ Output

ASTRA_DB_APPLICATION_TOKEN="AstraCS:gfYSGwpaFNGmUZnZTvaCp......"
ASTRA_DB_GRAPHQL_URL="https://.....-us-east1.apps.astra.datastax.com/api/graphql/tiktok_keyspace"
ASTRA_DB_GRAPHQL_URL_ADMIN="https://.....-us-east1.apps.astra.datastax.com/api/graphql-admin"
ASTRA_DB_GRAPHQL_URL_PLAYGROUND="https://.....-us-east1.apps.astra.datastax.com/api/playground"
ASTRA_DB_GRAPHQL_URL_SCHEMA="https://.....-us-east1.apps.astra.datastax.com/api/graphql-schema"
ASTRA_DB_ID="....."
ASTRA_DB_KEYSPACE="tiktok_keyspace"
ASTRA_DB_REGION="us-east1"
ASTRA_DB_REST_URL="https://.....-us-east1.apps.astra.datastax.com/api/rest"
ASTRA_DB_REST_URL_SWAGGER="https://.....-us-east1.apps.astra.datastax.com/api/rest/swagger-ui/"
ASTRA_DB_SECURE_BUNDLE_PATH="/home/gitpod/.astra/scb/scb_....._us-east1.zip"
ASTRA_DB_SECURE_BUNDLE_URL="secured_url"
ASTRA_ORG_ID="f9460f14-9879-4ebe-83f2-48d3f3dce13c"
ASTRA_ORG_NAME="cedrick.lunven@datastax.com"
ASTRA_ORG_TOKEN="AstraCS:gfYSGwpaFNGmUZnZT....."

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

npm install -g netlify-cli

🖥️ Output

netlify dev

The application should automatically launch in the GitPod preview pane. You might see an error in the log for this firt launch, some data is inserted to the database.

🖥️ Output

◈ Netlify Dev ◈
◈ Ignored general context env var: LANG (defined in process)
◈ Injected .env file env var: ASTRA_DB_APPLICATION_TOKEN
◈ Injected .env file env var: ASTRA_DB_GRAPHQL_URL
◈ Injected .env file env var: ASTRA_DB_GRAPHQL_URL_ADMIN
◈ Injected .env file env var: ASTRA_DB_GRAPHQL_URL_PLAYGROUND
◈ Injected .env file env var: ASTRA_DB_GRAPHQL_URL_SCHEMA
◈ Injected .env file env var: ASTRA_DB_ID
◈ Injected .env file env var: ASTRA_DB_KEYSPACE
◈ Injected .env file env var: ASTRA_DB_REGION
◈ Injected .env file env var: ASTRA_DB_REST_URL
◈ Injected .env file env var: ASTRA_DB_REST_URL_SWAGGER
◈ Injected .env file env var: ASTRA_DB_SECURE_BUNDLE_PATH
◈ Injected .env file env var: ASTRA_DB_SECURE_BUNDLE_URL
◈ Injected .env file env var: ASTRA_ORG_ID
◈ Injected .env file env var: ASTRA_ORG_NAME
◈ Injected .env file env var: ASTRA_ORG_TOKEN
◈ Loaded function add http://localhost:8888/.netlify/functions/add.
◈ Loaded function addData http://localhost:8888/.netlify/functions/addData.
◈ Loaded function edit http://localhost:8888/.netlify/functions/edit.
◈ Loaded function posts http://localhost:8888/.netlify/functions/posts.
◈ Functions server is listening on 36661
◈ Setting up local development server

────────────────────────────────────────────────────────────────
  Netlify Build                                                 
────────────────────────────────────────────────────────────────

❯ Version
  @netlify/build 28.4.5

❯ Flags
  {}

❯ Current directory
  /workspace/workshop-astra-tik-tok

❯ Config file
  /workspace/workshop-astra-tik-tok/netlify.toml

❯ Context
  dev

────────────────────────────────────────────────────────────────
  1. Run command for local development                          
────────────────────────────────────────────────────────────────

◈ Starting Netlify Dev with Create React App

> tik-tok-stargate@0.1.0 start
> react-scripts start

ℹ ｢wds｣: Project is running at http://10.0.5.2/
ℹ ｢wds｣: webpack output is served from 
ℹ ｢wds｣: Content not from webpack is served from /workspace/workshop-astra-tik-tok/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...

Compiled successfully!

You can now view tik-tok-stargate in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.5.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

✔ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml

(dev.command completed in 9.4s)

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:8888   │
   │                                                 │
   └─────────────────────────────────────────────────┘

⠦ Setting up the Edge Functions environment. This may take a couple of minutes.Request from ::ffff:192.168.9.75: POST /.netlify/functions/addData
⠧ Setting up the Edge Functions environment. This may take a couple of minutes.Request from ::ffff:192.168.9.75: GET /.netlify/functions/posts
⠙ Setting up the Edge Functions environment. This may take a couple of minutes.Response with status 200 in 341 ms.
⠦ Setting up the Edge Functions environment. This may take a couple of minutes.Response with status 200 in 1609 ms.
✔ Setting up the Edge Functions environment. This may take a couple of minutes.

Using same instruction as #2.1 execute the following operation with the Document Api using swagger UI.

Now that we have locally deployed our TikTok app, let's take a look at this in our database. Head to your Astra DB dashboard and click the Connect button next to your database ('workshops').

Then scroll down to the section called 'Launching SwaggerUI' and click the link. We'll be using SwaggerUI to make api calls to our database and see the results.

Open up the first section labelled "List collections in namespace" and click the button "Try it out".

• Execture with [Execute] button

🖥️ Output

{
  "data": [
    {
      "name": "story",
      "upgradeAvailable": false
    },
    {
      "name": "tktkposts",
      "upgradeAvailable": false
    }
  ]
}

• Open resource GET /v2/namespaces/{namespace-id}/collections/{collection-id} Search documents in a collection

• Populate the form with the following values

Let the rest of the fields untouched. You can see that every query is paged and default page size is 3.And we see all of the documents stored in our database.

🖥️ Output

{
  "pageState": "ATIA8H_____wf____w==",
  "data": {
    "0": {
      "avatar": "https://i.imgur.com/jONHmE5.png",
      "button_visible": true,
      "caption": "Art is for everyone",
      "comments": 20,
      "id": 0,
      "is_followed": true,
      "likes": 231,
      "name": "Lana Del Mont",
      "timestamp": "2020-09-10T09:08:31.020Z",
      "username": "lana_del_away",
      "video": "https://i.imgur.com/H9UX0Jm.mp4"
    },
    "2": {
      "avatar": "https://i.imgur.com/eX3hkoc.png",
      "button_visible": true,
      "caption": "Happiest of Birthdays my Angel",
      "comments": 4,
      "id": 2,
      "is_followed": true,
      "likes": 2,
      "name": "Angela Lee",
      "timestamp": "2020-04-10T09:08:31.020Z",
      "username": "angiecakes",
      "video": "https://i.imgur.com/al6MLay.mp4"
    },
    "3": {
      "avatar": "https://i.imgur.com/IigY4Hm.png",
      "button_visible": true,
      "caption": "The new normal",
      "comments": 2,
      "id": 3,
      "is_followed": false,
      "likes": 10,
      "name": "Nina Xen",
      "timestamp": "2020-05-10T09:08:31.020Z",
      "username": "nina_lina",
      "video": "https://i.imgur.com/Kzvbeup.mp4"
    }
  }
}

We are using the @astrajs/collections library to make the connection using the Document API. To do so, we start by creating a client.

(See: functions/utils/astraClient.js)

const { createClient } = require("@astrajs/collections");

let astraClient = null;

const getAstraClient = async () => {
  if (astraClient === null) {
    astraClient = await createClient(
      {
        astraDatabaseId: process.env.ASTRA_DB_ID,
        astraDatabaseRegion: process.env.ASTRA_DB_REGION,
        applicationToken: process.env.ASTRA_DB_APPLICATION_TOKEN,
      },
      30000
    );
  }
  return astraClient;
};

Here we are defining a new method called getAstraClient that uses the createClient method from our astrajs library to create a connection to our database. We then provide it the needed database credentials we added to our environment variables earlier;

• ASTRA_DB_ID (unique identifier for a db)
• ASTRA_DB_REGION (cloud region, here us-east1)
• ASTRA_DB_APPLICATION_TOKEN (credentials)

Then we return the astraClient we can then use in our API calls.

We also need to create a document collection to store our data.

const getCollection = async () => {
  const documentClient = await getAstraClient();
  return documentClient
    .namespace(process.env.ASTRA_DB_KEYSPACE)
    .collection("tktkposts");
};

In this method, we are using our previously created getAstraClient method to initialize the database connection, and then create a collection in the keyspace we defined in our environment variables;

• ASTRA_DB_KEYSPACE (for us tiktok_keyspace)

We will call the collection tktkposts.

For our TikTok app, we will not be dealing with the Document API directly. Instead @astrajs/collections does that for us, and provides us with easy to use methods.

If you want a comprehensive list of the capabilities of @astrajs/collections, check out this documentation: AstraJS Collections

The create method is used when we want to add documents to our collection. For example, in functions/add.js we get our collection from the database using our getCollection method.

const users = await getCollection();

Then we use the create method to create a document, providing the id and body of the document.

try {
    const user = await users.create(id, event.body);
    return {
      statusCode: 200,
      body: JSON.stringify(user),
    };
}

The update method is used to update portions of existing documents. Take a look at functions/edit.js. Again we use getCollection() to get our collection from the database, then we use the update method, provide it with an id for the document we want to edit, and the data that needs updating.

try {
    users.update(body.userId, body.data);
    return {
      statusCode: 200,
    };
  }

And finally the find method is used to retrieve documents. In functions/posts.js we are again using getCollections() and using the find method on the result.

try {
    const res = await users.find({});
    return {
      statusCode: 200,
      body: JSON.stringify(Object.keys(res).map((i) => res[i])),
    };
  }

In this case, we are passing an empty object to retrieve all documents. In a real-world scenario, we would pass a qualifier to get only the documents relevant to a specific user.

Take a look at netlify.toml.

[build]
command = "npm run build"
functions = "functions"
publish = "build"

This is the configuration file we include in our codebase that tells Netlify how to build our app. In our case it's really simple. First we give the build command to build our app: npm run build. Then we tell Netlify where to find our serverless functions, and finally where to find the resulting app after build.

So Netlify will create endpoints for our serverless functions based on the files it finds in our functions folder.

For example, we have a function called posts.js. As we saw before, this function returns all of the current posts in our database. Netlify will see that file in our functions directory and dynamically create an endpoint at /.netlify/functions/posts

// Declaring 'getCollection'
const { getCollection } = require("./utils/astraClient");

// Function exported as a REST API
exports.handler = async function () {
  // Accessing the collection tkt
  const tktkpostsCollection = await getCollection();
  try {
    // Access POST
    const res = await tktkpostsCollection.find({});
    return {
      // Return POSTS in the body
      statusCode: 200,
      body: JSON.stringify(Object.keys(res).map((i) => res[i])),
      
[...]

✅ We can see these functions in our Netlify account.

• Go to netlify.com and sign in.
• Select your site from the list.
• Select the "Functions" tab at the top.

From here we can see all our functions and get direct links as well as watch real time logs.

We can also see this in action by manually going to the endpoint on our Netlify site: [your-site-url]/.netlify/functions/posts.

The front end leverages on React. The code is organized in pages and each pages import a list of components.

There are 2 pages updload and Home and describe in index.js

<Switch>
  <Route path= "/upload" component={Upload}/>
  <Route path= "/" component={Home}/>
</Switch>

Access through the cloud icon of directly on /upload it is a static HTML form to create new posts.

As you can see Upload.js there are no component used.

<form onSubmit={handleSubmit}>
    <div className='section'>
<!-- rest is omitted --> 

• Function to post to backend

 const handleSubmit = async (e) => {
 e.preventDefault()
 // Create payload
 const data =  {
        id: id,
        name: name,
        username: username,
        avatar: avatar,
        is_followed: false,
        video: video,
        caption: caption,
        likes: 0,
        comments: 0,
        timestamp: timestamp,
        button_visible: false  
  }
  // Post Payload to Netlify functions
  axios.post('/.netlify/functions/add', data)
       .then((response) => { console.log(response)})
       .catch((err) => { console.error(err)})

The page load data coming from the collection in Astra and push the information to multiple components that renders sections of the page.

More on Home.js.

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.

🖥️ Output

Logging into your Netlify account...
Opening https://app.netlify.com/authorize?response_type=ticket&ticket=774701161c326912e718b3a86096f375
You are now logged into your Netlify account!
Run netlify status for account details
To see all available commands run: netlify help

• Link your workspace to the associated site with the command Below

netlify link

• It will display a MENU where you can move UP and DOWN with arrows. Pick first choice

> Use current git remote origin (https://github ...`

🖥️ Output

netlify link will connect this folder to a site on Netlify
? How do you want to link this folder to a site? Use current git remote origin (https://github.com/clun/workshop-astra-tik-tok)
Looking for sites connected to 'https://github.com/clun/workshop-astra-tik-tok'...
Directory Linked
Admin url: https://app.netlify.com/sites/fanciful-licorice-ea1437
Site url:  https://fanciful-licorice-ea1437.netlify.app
You can now run other `netlify` cli commands in this directory

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

netlify env:import .env

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

• Run

netlify build

🖥️ Output

────────────────────────────────────────────────────────────────
  Netlify Build                                                 
────────────────────────────────────────────────────────────────

❯ Version
  @netlify/build 28.4.5

❯ Flags
  dry: false
  offline: false

❯ Current directory
  /workspace/workshop-astra-tik-tok

❯ Config file
  /workspace/workshop-astra-tik-tok/netlify.toml

❯ Context
  production

────────────────────────────────────────────────────────────────
  1. build.command from netlify.toml                            
────────────────────────────────────────────────────────────────

$ npm run build

tik-tok-stargate@0.1.0 build
react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  616.87 KB  build/static/js/2.82b8325c.chunk.js
  2.32 KB    build/static/js/main.fd7c93f3.chunk.js
  966 B      build/static/css/main.9d8c5499.chunk.css
  780 B      build/static/js/runtime-main.f09b770f.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

 npm install -g serve
 serve -s build

Find out more about deployment here:

  https://cra.link/deployment


(build.command completed in 35.1s)

────────────────────────────────────────────────────────────────
  2. Functions bundling                                         
────────────────────────────────────────────────────────────────

Packaging Functions from functions directory:
 - add.js
 - addData.js
 - edit.js
 - posts.js


(Functions bundling completed in 6.1s)

────────────────────────────────────────────────────────────────
  Netlify Build Complete                                        
────────────────────────────────────────────────────────────────

(Netlify Build completed in 41.3s)

• Then run

netlify deploy --prod

🖥️ Output

Deploy path:        /workspace/workshop-astra-tik-tok/build
Functions path:     /workspace/workshop-astra-tik-tok/functions
Configuration path: /workspace/workshop-astra-tik-tok/netlify.toml
Deploying to main site URL...
✔ Deploying functions from cache (use --skip-functions-cache to override)
✔ Finished hashing 17 files and 4 functions
✔ CDN requesting 0 files and 4 functions
✔ Finished uploading 4 assets
✔ Deploy is live!

Logs:              https://app.netlify.com/sites/fanciful-licorice-ea1437/deploys/63974804721fc334dc247455
Unique Deploy URL: https://63974804721fc334dc247455--fanciful-licorice-ea1437.netlify.app
Website URL:       https://fanciful-licorice-ea1437.netlify.app
gitpod /workspace/workshop-astra-tik-tok (master) $ 

- Then finally run

netlify open:site

> 🖥️ `Output`
> ```
> Opening "fanciful-licorice-ea1437" site url:
> https://fanciful-licorice-ea1437.netlify.app
> ```

## Extra Resources

#### Video tutorial with Ania Kubow

Thank you to our wonderful friend Ania Kubow for producing the TikTok clone. If you are not aware of Ania and love learning about coding you should absolutely check out her YouTube channel listed below.

While we focused on getting you up and running to production with Astra DB and Netlify, Ania's video will dig into more details on the app itself. Check it out to dig in more.

#### Running Astra DB Tik-Tok
We're using Create-React-App and the Astra DB Document API to create a simple Tik-Tok clone.  Follow along in this video tutorial: [https://youtu.be/IATOicvih5A](https://youtu.be/IATOicvih5A).

Follow the instructions below to get started.

#### If you did like this video, please hit the Like and Subscribe button so I know to make more!
- Twitter: https://twitter.com/ania_kubow
- YouTube: https://youtube.com/aniakubow
- Instagram: https://instagram.com/aniakubow