Overview

Why Nokkio?

Nokkio is an all-in-one platform for writing and deploying React applications. Start out with the basics–a config-free dev environment for a simple React app–then Nokkio grows with your application, with built-in solutions for authentication, data, serverless functions, secrets management, image resizing, scheduled jobs, and more. And when you're ready, deploy your application to our custom-fit infrastructure in just a few seconds.

Day 1: A config-free React development environment

You have an idea for a new application. The first step is often to prototype a client-only solution to make the theoretical into something practical. With Nokkio, you install the CLI and use nokkio create to boot up a fresh new project in seconds, then nokkio dev to start your development environment. There are no bundlers to configure or any other setup to worry about, your sole focus is the project itself.

Once you are up and running, you'll find familiar ergonomics to other React frameworks like file-based routing, page metadata management, support for CSS modules or TailwindCSS, and TypeScript support. Otherwise it feels like any other React project.

When you're ready to share your prototype with others, use nokkio deploy --preview to share a private link to your project, hosted on Nokkio's production-grade cloud infrastructure.

Day 2: Introducing data

On Day 1, perhaps you used client-side state to simulate how your application manages data, but now you need to persist that data to a real database, create backend endpoints to use as an API, and finally create the glue code on the client in order to shuttle data back and forth with the server. Many projects lose momentum at this moment. Where will you store the data? How will you manage backups? How do you ensure client data updates at the right time?

Nokkio's data abstraction is designed to maintain your momentum. You define a schema in JavaScript, and Nokkio takes care of the rest: creating and managing the database, backend endpoints, and client code.

You start by defining a schema in your project's schema.js file. For example, a simple Todo application might start like this:

/** @type {import('@nokkio/schema').Config} */
module.exports = function ({ defineModel, types }) {
  const Todo = defineModel('Todo', {
    title: types.string(),
    isCompleted: types.bool(false),
  });

  return { Todo };
}

Then immediately begin using your data in your page component using the Page Module API and @nokkio/forms:

import { Todo } from '@nokkio/magic';
import { usePageData } from '@nokkio/router';
import { Input, useForm } from '@nokkio/forms';

export function getPageData() {
  return Todo.find();
}

export default function IndexPage() {
  const todos = usePageData();
  const { Form } = useForm(Todo);

  return (
    <div>
      <Form>
        <Input name="title" />
        <button>Create todo</button>
      </Form>

      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              onChange={(e) =>
                todo.update({
                  isCompleted: e.currentTarget.checked,
                })
              }
            />
            <label>{todo.title}</label>
          </li>
        ))}
      </ul>
    </div>
  );
}

That's it! This example does not omit any steps, the above code will persist data without any other setup. Behind the scenes, Nokkio manages database migrations, backend endpoints, and other necessary boilerplate so that you can begin using your data right away. It also tracks changes and refreshes data on the page in response, no matter where it lives within your application's React tree.

Read the Data documentation to learn more.

Day 3: Authentication

You are making progress on your new app, but now realize you need another common component of web applications: authentication. Nokkio has native authentication that is integrated with other features like routing and data. It begins with a new model in your application's schema to represent a user or account:

/** @type {import('@nokkio/schema').Config} */
module.exports = function ({ defineModel, types }) {
  const User = defineModel('User', {
    username: types.string().unique(),
    password: types.password(),
  });

  const Todo = defineModel('Todo', {
    title: types.string(),
    isCompleted: types.bool(false),
  });

  User.hasMany(Todo);
  User.actAsAuth();

  return { User, Todo };
}

Then use Nokkio's routing convention to mark pages as auth-only. If a user tries to access an authenticated route, Nokkio will redirect them to your login page.

pages
├── index.auth.js
└── login.js

Nokkio also provides helpers for setting up login and registration forms. Learn more at the Authentication documentation.

Day 4: Full stack

While Nokkio reduces the amount of backend code you need to write, there still may be times when you need to run logic server-side. Setting up a backend endpoint involves defining a function using the same file-based routing as the frontend.

import OpenAI from 'npm:openai';

import { getSecret, json } from '@nokkio/endpoints';

const openai = new OpenAI({
  apiKey: getSecret('openAIApiKey'),
});

// accessible via GET /_/endpoints/generate-image
export async function get() {
  const image = await openai.images.generate({
    model: 'dall-e-3',
    prompt: 'A cute baby sea otter',
  });

  return json(image);
}

Nokkio includes secret management, securely storing your credentials and providing them at runtime in both development and production. Nokkio endpoints also have access to your data models and support all HTTP methods. Read more on how to use Endpoints.

Onward

You're off to the races with your new app. Nokkio stays with you and has many other features that may prove useful as you grow:

• Live subscriptions: Pass the live: true when using a @nokkio/magic hook to retreive your data, and Nokkio will deliver instant updates anytime that data is updated from any other client (documentation).
• Image uploads and resizing: Nokkio's data abstraction supports an image type that automates uploads and serves optimized and resized versions via @nokkio/image (documentation).
• Model events: Need to perform an action in response to your data changing? Use Model Events to run async tasks when an item is created, updated, or deleted.
• Scheduled functions: Run server-side functions at a set time each day, each hour, or even every minute (documentation).
• GitHub integration: Connect your Nokkio project to GitHub and get automatic preview deploys for every PR, and instant deploys whenever changes are pushed to your main branch.
• Bring your own domain: By default, new projects are served from a nokk.io subdomain. Connect your own domain for free when you upgrade to a paid plan.