Build a Full Stack App with SvelteKit and Astra DB

Author: Pieter Humphrey

Published in

Building Real-World, Real-Time AI

7 min readMar 28, 2022

With the powerful combination of SvelteKit and DataStax Astra DB, the open-source NoSQL database built on Apache Cassandra®, it’s now easier and faster to create full stack applications from scratch. This is an exciting opportunity for you to build a full stack application using only open-source tools!

DataStax recently collaborated with Eddie Jaoude, the founder of the inclusive open-source community, EddieHub, to develop a workshop for building full stack applications with SvelteKit and DataStax Astra DB.

SvelteKit is a framework built on top of Svelte (similar to how NextJS is to React). It builds web applications of all sizes, with flexible file system-based routing.

Unlike other single-page apps, SvelteKit does not compromise on SEO, progressive enhancement, or the initial load experience–but unlike traditional server-rendered apps, navigation is instantaneous for that app-like feel.

SvelteKit and Astra DB make a dynamic duo. Astra DB is the multi-cloud database-as-a-service (DBaaS) built upon Apache Cassandra – the distributed NoSQL database engine that powers global enterprises like Netflix, Instagram, and Uber.

Astra DB simplifies the process to build and deploy cloud-native applications on Cassandra, reducing deployment time from weeks to minutes. You can now build apps faster with REST, GraphQL, CQL and JSON/Document APIs, as well as deploy multi-tenant or dedicated databases on AWS, Azure, or GCP.

We used Astra DB and SvelteKit together for two main reasons:

SvelteKit is a site generator for JAMStack sites, which can make your app globally available via a content delivery network (CDN) or edge network in seconds. You’ll go from desktop to cloud worldwide deployment.
Astra DB is the perfect companion to JAMStack sites as it brings data to your app at a commercial internet level of scale, reliability, and performance on any cloud, and uses straightforward JavaScript. The DataStax website provides a wealth of examples on different libraries and tooling frameworks.

Read on to get an overview of the build, or check out Eddie’s in-depth step-by-step instructions on his blog or on YouTube.

What you will be building: a community platform

In this tutorial, you’ll create a full stack application using:

SvelteKit to build the application
Astra DB to store and retrieve data in a cloud database
Stargate Astra Document API to modify and query data stored as unstructured JSON documents in collections
Astra’s JavaScript Library to connect your app to Astra DB
Bootstrap to design and customize your frontend app

Through these open-source tools, you’ll gain the foundation for making apps without scale limits and transform your ideas into real projects.

Figure 1. A community platform for developers profiles.

The features of the application are part of a community platform demo project. The main goal of the app is to discover and easily find community members and their GitHub profiles, with the ability to:

List developers
Add / delete developer
Filter developers

The web application will be a single page app with a search bar at the top, followed by a form to add the developer. Below the form we’ll put a list of the saved developers and their information.

The web application loads the list of developers over RESTful API using a GET request. The same applies to the search form. When submitting a new developer via the form, it sends a RESTful POST request to the API, which will save the body of the POST request in Astra DB.

Here’s what you need to get started:

Install the latest version, or anything above version 12 of NodeJS.
Create an Astra DB account with your Google or GitHub accounts. Then, choose the free tier to get up to 80GB of storage and/or 20 million operations per month—no credit card required.

Building the full stack application

Let’s start building a full stack application without the database yet. Click on each link and follow the process in Eddie Jaoude’s YouTube workshop.

1. Create a SvelteKit project. The first step is to create a SvelteKit project by running the command here and answering the questions when prompted. Then, navigate into the newly created project and install dependencies before running the project.

2. Double-check your codes. Open Visual Studio Code and make some changes to the codes to make sure they’re working. We showed you a simple way to edit the codes in the video, but we recommend that you make your own changes in the future so you can remember the process better and learn a lot faster.

3. Make a list of developers. Hard code a simple list of developers using the basic HTML ‘ul’ (unordered list), and ‘li’ (the list item). Later on, you’ll style this up using Bootstrap.

4. Create an API. Create the same list of developers in the API to move the hard-coded data from the user interface (UI) to the API. This ensures that the UI is updated dynamically from the API.

If you’re using Svelte standalone, you could use ExpressJS, but SvelteKit already comes with a built-in lightweight web API framework.

5. Connect the hardcoded data in the UI to the API. We’ve already hard coded data in the UI layer but we need to connect it to the API. Even though the data is hardcoded in the API, the frontend won’t know the difference when refactoring the API to connect to the database. This is because the API will return the same data structure.

A benefit of starting with hard-coded data in the UI is that we receive immediate feedback that the app is working. And when we build the API layer, you can check that it works independently. This gives us confidence that the app works as expected when we connect the two layers. Independently building and testing layers reduce bugs and save time.

You now have a full stack application–let’s connect it to Astra DB! (For more detailed steps, follow along in this blog post or on YouTube.)

Integrating your full stack application with Astra DB

That was straightforward, wasn’t it? But adding a database is where it gets tough. Click on the links to follow along with our video tutorial.

Create Astra DB database. Manually insert some data so that Astra DB will return results when you query for it in your code. If you already have an Astra DB database, jump to step 2. If not, log into Astra DB and set up a database and grant access to a user.
Insert data into Astra DB. As we haven’t created the form to insert data yet, we can manually insert data using the curl command.
Connect your app to the Astra DB database. This is to remove the hard-coded data and have the data be fully dynamic. Install the Astra DB JS Collection and set up your environment. Add the same credentials you used in the curl commands to insert data, which can now be saved to environment variables. Refresh the application so it loads the new environment variables.
Retrieve data. Now, go back to the API in your application and replace the hard-coded data with live dynamic data from the database. You can read more about this process here. This is the result:

Figure 3. The application web page with developers’ data.

Styling and optimizing your full stack application

Right now your application isn’t looking very pretty: there’s duplicated data, and we can’t search or filter developers yet. Let’s change that.

Style your web page using Bootstrap. Bootstrap has a variety of pre-built styles so you won’t need to build everything from scratch, which you can easily add with Svelte-add. You can choose other styling tools too.
Add a form to the web application. This is so you can save data in the database from the form instead of using curl commands.
Clean up. If you have duplicated data, you can now delete them by adding the delete button. You can also add images to your developers. Your application should look like this after styling and cleaning up:

Figure 4. The application webpage after styling and optimization.

4. Send this data to Astra DB. This is so it can receive the data and create a new document in the database. Getting started with Astra DB is straightforward: you only need one line of code! Then, you’ll be able to click on “More info” of each developer and the app will take you to the right GitHub profile of the developer.

5. Set up database operators. As the list of developers gets longer, you’ll want to do some advanced searching. You can add an extra form above the current form in the application and use the operators from Astra DB. You can find a list of the available operators here.

Conclusion

Congratulations! You’ve now created a full stack application using SvelteKit, Astra DB, DocumentAPI, and Bootstrap. The app displays a list of developers and allows users to create new developers, as well as filter from the list and delete as necessary.

Going forward, you can move some of these sections into components or add an edit button to edit the data. Don’t forget to share what applications you’ve built with these technologies on DataStax Community and EddieHub Community.

Follow the DataStax Tech Blog for more developer stories. Check out our YouTube channel for tutorials and DataStax Developers on Twitter for the latest news about our developer community.