Snaptail v0.0.5

Build React web apps with a single file.

Get Started

I don't have time:

echo 'export const App = () => <div>Hello</div>' > start.tsx
npx snaptail@latest run start.tsx

I want starter file (recommended):

npx snaptail@latest init
npx snaptail@latest run starter.tsx

Or try with shadcn ui library:

npx snaptail@latest init --ui shadcn
npx snaptail@latest run starter.tsx
View Starter Example 
/**
 * Dependencies are auto-detected and installed.
 */
import type { NextApiRequest, NextApiResponse } from "next";
import { useState, useEffect } from "react";
import moment from "moment";
import axios from "axios";

/**
 * Main App component. Feel free to create additional components within this file.
 */
export const App = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
    axios
        .get("https://jsonplaceholder.typicode.com/todos/1")
        .then((res) => res.data)
        .then((data) => setData(data))
        .catch((err) => console.log(err));
    }, []);

    return (
    <div>
        <h1>Today is  {moment().format("DD-MM-YYYY")}</h1>
        {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
    );
};

/**
 * Will auto-generate api routes for you.
 * For route params use :paramName in the path.
 *
 * @warning Typescript types are note allowed in the api routes right now.
 */
export const api = [
    {
    method: "GET",
    path: "/api/v1/form",
        handler: async (req, reply) => {
            return reply.send({ hello: "world!!!" });
        },
    },
];

Roadmap:

  • out of the box ui libraries support (In progress)
  • auth
  • one-click deployments
Github repo

One File Applications

Snaptail hides build system under .snaptail dir and allows you to prototype and experiment with single react file.

Includes:

  • tailwindcss installed by default
  • allows you to define APIs within the file
  • auto-detects packages and installs them
  • typescript support
  • shadcn ui lib support

Why Snaptail?

  • Build something small or try an idea without setting up an entire project
  • Deploy it easily - it's a Next.js app under the hood
  • Works great with LLMs - generate an entire app and paste it into a single file
  • Explores the concept of single source file applications

Usage

The single tsx or jsx file needs to export an App component and may export an api array that defines API routes and handlers.

Check out the starter template to explore it. Use npx snaptail init to get started.

When you use snaptail init, a tsconfig is created by default to help your IDE support TypeScript type hints.