Giter Site home page Giter Site logo

fastapi-starter's Introduction

Starter repo for FastAPI + React, using Fern

Fern is an open source format for defining REST APIs. Fern makes it easy to:

  1. Define your API
  2. Implement your API on the backend
  3. Consume your API on the frontend

Quick start

Step 1: Fork this repo

Step 2: Clone your fork

Step 3: Generate code

Most of the code for the backend and frontend is auto-generated by Fern!

In a terminal, run:

npm install -g fern-api
fern generate

Step 4: Run the backend

Prerequisite: Install poetry.

Run:

cd backend
poetry install
poetry run start

Step 5: Run the frontend

In a new terminal, run:

cd frontend
yarn install
yarn start

Open http://localhost:5173 to see the frontend!

frontend

Developing the backend

The FastAPI backend lives in the backend directory.

To get started, open a VSCode window for the root of this repo:

code .

Install the recommended MyPy extensions. This will give you type checking in the IDE.

Install dependencies:

cd backend
poetry install

Run the server:

poetry run start

You can edit the server code, and the server will automatically reload.

Auto-generated server code

Nearly all the FastAPI and Pydantic code is generated by Fern when you run fern generate. The generated code lives in backend/src/fern_fastapi_starter/api/generated.

In addition to saving you time, the auto-generated code gives you compile-time safety that your API is implemented correctly. For example, if you forget to define the getMovie endpoint, you'll get a compile error:

backend mypy error

Developing the frontend

The frontend is generated using React, TypeScript and Vite.

To get started, open a new VSCode window for the frontend/ directory:

cd frontend
code .

Install dependencies:

yarn install

Run the frontend:

yarn start

Open http://localhost:5173 to see the frontend!

You can edit the frontend code, and Vite will automatically reload your changes.

Auto-generated API client

The API client is automatically generated by Fern when you run fern generate. The generated client lives in frontend/src/api/generated. You can see it used in frontend/src/App.tsx,

In addition to saving you time, the auto-generated code gives you compile-time safety and autocomplete:

frontend autocomplete

Changing the API

The API is defined using Fern. The definition lives in the fern/ directory. You can edit these YAML files to update the API. Check out the docs to read more about defining APIs.

Most of the server and frontend code in this repo is automatically generated by Fern. You can regenerate the code using the Fern CLI:

npm install -g fern
fern generate

This will output newly generated code:

When you change your API, you'll get compile errors on the backend if you're not implementing the API correctly.

You can always use the command line to run mypy as well:

poetry run mypy

Issues & contributing

If you run into any problems while using this ticket, plesae file an issue. Of course, PRs are welcome and encouraged!

fastapi-starter's People

Contributors

dannysheridan avatar dsinghvi avatar zachkirsch avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

fastapi-starter's Issues

fern generate throwing error

luffy@predator:~/fern/instaclone$ fern generate
/usr/local/lib/node_modules/fern-api/bundle.cjs:6001
            allowUnknownKeys: (opts == null ? void 0 : opts.allowUnknownKeys) ?? false
                                                                               ^

SyntaxError: Unexpected token '?'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/fern-api/cli.cjs:3:1)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.