Skip to content
ProofKit CLI

Getting Started

This guide walks you through how to get up and running with a new ProofKit project.

Prerequisites

If you’re brand new to web development, you’ll want to make sure these basics are installed on your system

  • Node
    • To check if you have already have Node installed, run node -v in your terminal. It will return the version number if already installed.
    • If not, download and install here: nodejs.org
  • Visual Studio Code (or similar IDE)
  • git (download GitHub Desktop if you’ve never used git before)
    • To check if you have git installed, run git -v in your terminal. It will return the version number if already installed.
  • (suggested) pnpm
    • If you skip this step, just follow the guides for npm instead, which comes with Node
    • To check if you already have pnpm installed, run pnpm -v in your terminal. It will return the version number if already installed.

Data Sources

Additional prerequisites apply depending on which data source you intend to connect to.

FileMaker

To connect to FileMaker data, you’ll need a FileMaker server (19.6+) running OttoFMS (4.7+). Your server should be accessible via port 443

Your hosted FileMaker file must have an account with the fmrest priviledge set enabled. During setup, you’ll be asked for either the account name and password for that file, or select a Data API key previously generated from OttoFMS. (If you provide credentials, a Data API key will be created for you)

FileMaker Web Viewer

If you intend to build for the FileMaker Web Viewer, the same requirements apply for FileMaker Server and OttoFMS as above. You will also need to make sure that your Full Access account has the fmurlscript priviledge enabled so the web code can trigger FileMaker scripts, making development a lot easier. For more details, see the WebViewer Getting Started Guide.

Supabase

Coming Soon

Creating a ProofKit Project

Now you can scaffold a new ProofKit project! Follow the prompts to setup your project and connect to your own database.

Terminal window
pnpm create proofkit@latest

Project Name - must be lowercase letters, numbers, _ and - characters only. This will also be the folder name where your project will get created.

Project Type - Either a Web App for Browsers or FileMaker Web Viewer. This section of the docs focuses mostly on the browser-based projects using Next.js. For more details about the WebViewer option, see the WebViewer Getting Started Guide.

Server URL - Enter the URL of your FileMaker server. It must start with https:// but can be any path on the server (such as https://myserver.com/otto/app) to make it easier to copy/paste

Next you’ll be asked to select a file from your server. If your solution contains multiple files, select the file where the data lives. You’ll be able to add more files and/or layouts later.

If you’ve already created a Data API key for the selected file, you can select it. Alternatively you can enter a FileMaker username and password and a Data API key will be created for you.

Now you can select a layout to load data from, and a name for the schema that will be created. This is a friendly name that you can use in your code whenever you want to access the data on this layout. Schema names must be valid JavaScript variable names and unique within each data source (FileMaker file).

For FileMaker developers, “layout” and “schema” are effectively interchangeable. What you may see referred to as “schemas” is just a more generic term for a specific set of fields (and/or related fields)

Launching Your Web App

Once your project is created, you’ll see a few next steps printed to the console.

  1. Open your project folder. The rest of the commands should be run in the context of the project

    cd <projectName>

    If you’re not already in your code editor, you’ll probably find it easier to switch to it now. You can open your project folder in Visual Studio Code and run the following commands from the integrated terminal (which by default opens with the context of the project folder, so you don’t need the cd command)

  2. Make your first git commit. A ton of files were added to your project, so now is a great time to commit them to source control so we can revert back to this point in the project if we ever need to.

    git commit -m "initial commit"

    You can also do this with the graphical interface of VSCode (tutorial)

  3. Start your dev server. This command builds your web app on-the-fly so you can view it in a browser on your local computer.

    pnpm dev

    The result of this command will display a localhost URL in your console, such as http://localhost:3000, where you can view your ProofKit app.

    This is a long-running command, so sometimes you’ll want to stop the dev server using ctrl+C so that you can enter another terminal command.

Your ProofKit app is now up and running! Now you’ll want to learn how to add more pieces to your project, or check out the motivations page to learn more about the tech stack used here so you can learn more about each underlying framework that you’ll come across.