This repository contains an example of a Bocadillo server used in conjunction with a React frontend.

To see an example with GraphQL and Apollo integration see the react-apollo branch.

The frontend for this example repository was bootstrapped with the popular and convenient create-react-app. It has lots of excellent documentation, so if you want to do something not documented in this repository, they will have you covered. React applications not built with create-react-app will also work fine with Bocadillo!

Getting Started

First clone this repository, then install dependencies.

Let's install the Python dependencies first. You might want to do this inside a virtual environment.

pip install -r requirements.txt

Next, install the JavaScript dependencies:

cd react-app
yarn install  # or npm install

Development Instructions

Now that you have dependencies installed, you can start development.

Run the Server

In one terminal, run the Bocadillo app with the uvicorn server. This will run on port 8000 and expose its API endpoints to the React app. Pass the --reload flag so that changes made to the Python code automatically reload and are available to the React app.

uvicorn server.asgi:app --reload

Run the React Application

In another terminal, run React's development server on its default port of 3000:

cd react-app
yarn start  # or npm start

Now open http://localhost:3000 to see your React app.

It should look like this:

Proxy to Bocadillo in Development

Any requests that do not have text/html in their Accept header will be proxied to Bocadillo. To learn more about how requests are proxied with create-react-app, see its documentation.

Hot Reloading

Any changes to the frontend code will cause the browser to reload immediately. Changes to the server code will be available immediately, but you may have to refresh the browser yourself depending on when your React App makes requests to the Bocadillo server.

Building

create-react-app can build production ready code, which compiles and minifies the html, JavaScript, and css:

cd react-app
yarn build  # or npm run build

To learn more, see create-react-app's documentation.

You can now serve the whole React app and all of its static assets with Bocadillo:

uvicorn server.asgi:app

Now open http://localhost:8000 to see your production-ready app!