No More Backend Setup: Launch Your App with Skapi in Minutes

#webdev #programming #database #api

When starting a new project, the initial excitement often dies when you hit the wall of backend setup. Figuring out databases, authentication, file storage, access control, deployment… suddenly you’re deep into weeks or months of boring work before you can start to develop the actual features of your project.

That’s where Skapi comes in. It’s a ready-to-use, fully managed backend that you can connect to in minutes. With just a few API calls, you get secure data storage, user authentication, file uploads and much more.

You don’t need complicated setup steps like other SDK’s. There is no need to build your own database like Supabase does or setting each feature individually like in Firebase. Skapi provides all you need from the start, with only a simple copy-paste setup.

In this article, we’ll guide you step-by-step on your way to creating your very first Skapi service, connecting your project and verifying your connection.

Create a service

Sign up to create an account at skapi.com
Log in and navigate to the My Services page.
Click on Create New Service.

Initialize the Skapi Library

After creating a Service, you will be redirected to its starting page where you can get your service’s credentials. These are essential to setting up Skapi on your project.

Using Skapi with Plain HTML

For those who prefer vanilla HTML and JavaScript evangelizers, you can import Skapi directly using a <script> tag. Just make sure that the Skapi class is initialized in the HTML header of all pages as follows:


<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/skapi-js@latest/dist/skapi.js"></script>
<script>
    const skapi = new Skapi('service_id', 'owner_id');
</script>

For SPA Projects

To use Skapi on a SPA framework such as React, Angular or Vue, you can install skapi-js via npm by simply executing the command $ npm i skapi-js

Then, import the library into your main JavaScript file:


// main.js
import { Skapi } from 'skapi-js';
const skapi = new Skapi('service_id', 'owner_id');

export { skapi }

// You can now import Skapi from anywhere in your project.

Test your connection

When your client is successfully connected, you can use the getConmnectionInfo() method to retrieve your connection information.

For HTML


<!-- index.html -->
<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/skapi-js@latest/dist/skapi.js"></script>
<script>
    const skapi = new Skapi('service_id', 'owner_id');
</script>
<script>
skapi.getConnectionInfo().then(info => {
    console.log(info);
    /*
    Returns:
    {
        service_name: "Your Service Name",
        user_ip: "Connected user's IP address",
        user_agent: "Connected user agent",
        user_location: "Connected user's country code",
        version: 'x.x.x' // Skapi library version
    }
    */
   window.alert(`Connected to ${info.service_name}`);
});
</script>

For SPA frameworks


import { skapi } from '../location/of/your/main.js';
skapi.getConnectionInfo().then(info => {
    console.log(info);
    /*
    Returns:
    {
        service_name: "Your Service Name",
        user_ip: "Connected user's IP address",
        user_agent: "Connected user agent",
        user_location: "Connected user's country code",
        version: 'x.x.x' // Skapi library version
    }
    */
   window.alert(`Connected to ${info.service_name}`);
});

Now you’re set to use all the features Skapi provides, including:

Authentication: A fully fledged user authentication flow.
Realtime Connection: Notifications, WebRTC for streaming or video chats and WebSocket data exchange to transfer JSON data such as in text chats.
A ready-to-use relational Database: Save and retrieve your data with our high performance database.

All that and more without the headache of developing it yourself, allowing you to focus on your main features that are unique to your project.

For example, you can build a language learning app that lets users save vocabulary, upload images, and track their progress, all without writing a single line of backend code. Skapi is going to handle the authentication, data storage, and file uploads flawlessly. You can check our tutorial of a Translation tool.

Also recently we made an AI-powered To-Do List that stores everything through Skapi's database API. It's amazing how quickly you can iterate without getting bogged down in backend setup.

In future articles we’ll be diving into specific functions to bring you easy-to-follow instructions on how to use our service to its fullest. But if you can’t wait, you can visit our documentation right now on docs.skapi.com.

DEV Community

No More Backend Setup: Launch Your App with Skapi in Minutes

Create a service

Initialize the Skapi Library

Test your connection

Top comments (0)