A starter kit for building websites with
Django 🐍 and React ⚛️

Default Tools

These are the default tools used in this starter kit:

Backend

• Django - Backend Web Framework
• Django REST Framework - RESTful Web API Framework
• WhiteNoise - Serving Static Files
• Gunicorn - HTTP Server
• Pipenv - Dependency Management

Frontend

• React - Frontend Web Framework
• Redux - Store and Manage State
• TypeScript - Typechecking for JavaScript
• Create React App - Starter Kit for React Apps
• Redux Starter Kit - Starter Kit for Redux Apps
• React Router - Navigate Single-Page Apps
• Redux Thunk - Async Redux Actions
• Jest - JavaScript Testing Framework
• Enzyme - Framework for Testing React Components
• Storybook - Build Components in Isolation
• Styled Components - Style Components with CSS
• Yarn - Dependency Management

Getting Started

1. Clone this repository:

    git clone https://github.com/mkolodny/django-react-starter-kit <your-project-name>
   

2. Install Pipenv

3. Install the backend dependencies:

    cd <your-project-directory>
    pipenv install
   

4. Install Yarn

5. Install the frontend dependencies:

    cd <your-project-directory>/frontend
    yarn install
   

6. (Optional) If you don't want to release your project under the MIT License, change or remove the LICENSE file at the root of this repository.

Directory Structure

This is the starter kit's high-level directory structure:

manage.py
Pipfile
backend/
  urls.py
  settings.py
  app/
    views.py
    models.py
    serializers.py
    tests.py
frontend/
  package.json
  src/
    index.tsx
    index.css  # Your global styles
    components/
      Router/
        RouterComponent.tsx  # Your app's routes
      Example/
        index.ts  # So that you can import from 'components/Example'
        ExampleComponent.tsx
        ExampleComponent.test.tsx
        ExampleComponent.stories.tsx  # Your Storybook stories
    store/
      store.ts
      rootReducer.ts
      Example/
        exampleReducer.ts
        exampleReducer.test.ts
        exampleActions.ts

Running the App

Development

In one terminal window/tab, run the frontend:

cd <your-project-directory>/frontend
yarn start 

Then, in another terminal window/tab, run the backend:

cd <your-project-directory>
pipenv shell
./manage.py runserver

Production

I usually use Heroku to get apps running in production. To get this starter kit running in production using Heroku, (after signing up for Heroku and installing the command-line tool) run:

heroku apps:create
heroku buildpacks:add --index 1 heroku/nodejs
heroku buildpacks:add --index 2 heroku/python
git push heroku master

Thank you to Aatish Neupane for this great blog post about getting Django and React playing nicely together on Heroku.

Unit Testing

Backend

To run your backend unit tests, run:

cd <your-project-directory>
./manage.py test

Frontend

To run your frontend unit tests, run:

cd <your-project-directory>/frontend
yarn test

Creating React Components

To create a new component, you can just run:

cd <your-project-directory>/frontend
yarn create-component <your-component-name>` // or `yarn cc <your-component-name>`

That will create a new directory inside of <your-project-directory>/frontend/src/components/ with this file structure:

<your-component-name>/
  index.tsx
  <your-component-name>.tsx
  <your-component-name>.test.tsx
  <your-component-name>.stories.tsx

Building Components in Isolation

This starter kit includes Storybook to make it easy to build components in isolation. That way you don't need to run your app and go through a complex flow to see what your components look like with different props.

To see what your components look like in isolation, run:

cd <your-project-directory>/frontend
yarn storybook

Creating Redux Reducers

To create a new reducer, you can just run:

cd <your-project-directory>/frontend
yarn create-reducer <your-reducer-name>` // or `yarn cr <your-reducer-name>`

That will create a new directory inside of <your-project-directory>/frontend/src/store/ with this file structure:

<your-reducer-name>/
  <your-reducer-name>Reducer.ts
  <your-reducer-name>Reducer.test.ts
  <your-reducer-name>Actions.ts

License

This starter kit is released under the MIT License.

Note: If you don't want to release your project under the MIT License, change or remove the LICENSE file at the root of this repo before publishing it.