Code Monkey home page Code Monkey logo

fastapi-and-react-example's Introduction

FastAPI and React Exampel

FastAPIとReactで作られたサンプルページです。 ローカルに保存されたJSONデータを渡し、Webページにて表示します。

ポケモン情報の取得先: https://github.com/fanzeyi/pokemon.json.git

.
├── README.md
├── api                             # FastAPIで作られたWebAPI
│   ├── README.md
│   ├── api                         # pythonプログラム
│   ├── poetry.lock
│   ├── pokemon.json
│   ├── pyproject.toml
│   └── tests
└── sample-spa                      # reactで作られたサンプルページ
    ├── README.md
    ├── package.json
    ├── public
    ├── src                         # typescriptプログラム
    ├── tsconfig.eslint.json
    ├── tsconfig.json
    └── yarn.lock

開発

Dev Continer　もしくは　Github codespaces(vscode)を使用し、開発環境を構築します。

リポジトリのクローン(api/pokemon.jsonを含む)

git clone --recursive https://github.com/Mizunanari/fastapi-and-react-example.git

または

git clone https://github.com/Mizunanari/fastapi-and-react-example.git
cd fastapi-and-react-example
git submodule update --init --recursive

実行コマンド

ターミナル1

uvicorn api.main:app --host 0.0.0.0

ターミナル2

cd sample-spa
yarn start

デバック機能から実行するとデバックが可能です。

fastapi-and-react-example's People

Contributors

mizunanari avatar satakujp avatar

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.