Git Product home page Git Product logo

du0ngtrunghieu / django-react-postgres-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

This project forked from emilefrey/django-react-postgres-boilerplate

0.0 1.0 0.0 988 KB

A basic Django (DRF) backend & React frontend boilerplate app with token authentication, login/logout, and password reset functionality. The app can be easily spun up using one of the 2 docker-compose files, customized, and repurposed.

Shell 1.65% Dockerfile 1.19% Python 17.08% HTML 2.38% JavaScript 19.42% TypeScript 58.27%

django-react-postgres-boilerplate's Introduction

django-react-postgres-boilerplate

Prerequisites

Install Docker Desktop

Installation

Make sure backend\entrypoint.sh has LF format and not CRLF format

You shouldn't have to make any other changes to get this up and running, but here's some things to note:

  • The default login credentials are admin and admin_password. These can be changed in backend/.env.

  • There are 3 .env files provided. Note in particular the .env files in backend/ and postgres/; there, you can adjust the database credentials, debug mode, secret key, allowed hosts, etc. Things should run just fine without any changes, but just know these files are there.

  • The included sample helloyou django app can be easily removed by removing 'helloyou' from INSTALLED_APPS in django mainapp/settings.py, removing the associated helloyou path in mainapp/urls.py and deleting the entire helloyou folder. There are no database migrations, so you don't need to worry about that. On the frontend, delete/replace the contents of Home.tsx.

Running

NOTE: If you change your database name/credentials, but have already run the steps below, you may need to delete the associated postgres docker image in order to get things to work.

For development mode without NGINX server, run the following command:

docker-compose -f "docker-compose.dev.yml" up -d --build

The react frontend should be available at http://localhost:3000/ and django backend at http://localhost:8000/ (django admin at http://localhost:8000/admin/). This mode supports both react hot reloading and django auto-refresh with changes.

For development with the NGINX server run:

docker-compose -f "docker-compose.yml" up -d --build

The server should be available at http://127.0.0.1/. This mode will not hot reload since it's running a production build (npm build).

Features

Forgot Password:

  • The password reset feature is fully functional. In order to get the password reset url, you will need to open the backend django console. Enter the following in an application like PowerShell:

    $id = $(docker ps -aqf "name=django-react-postgres-boilerplate_backend")
    docker logs --tail 1000 -f $id
  • Upon submitting a valid email, you should get a path like http://localhost:3000/password_reset?token=abcdefgxyz123; paste this in your browser to access the password reset form. The password reset form first validates the token; if the token is valid, it presents the password reset interface and allows the user to provide a new password. If the token is invalid, it will redirect the user to the login page.

    Check out the Django docs starting here in order to update the Email Backend from a console output to an actual SMTP backend.

Left Navigation Bar:

  • The left navigation bar (intially shown on the left with only the Home icon upon login) is auto-generated along with the associated React Router's private routes. These routes can be easily added/modified in routes/Routes.ts.

Subroutes/Params:

  • There is a dummy component called Placeholder that gives an example on how to access parameters passed into the url. This is useful when ensuring the user can access a specific page given say a object's PK...even if the page is refreshed. See routes.ts on how to setup the routes to accept optional parameters in the url path.

Alerts:

  • An alert setter at the context level is also included. An example of TriggerAlert is shown in Home.tsx (variants displayed after successful/failed submit). See AlertContext.tsx for typings.

Modal/Dialog:

  • Similar to the alert setter, a context level modal/dialog is also provided. Use OpenDialog (basic example shown in Home.tsx) to open and set the modal title/contents/footer.

Customization:

  • The app name (shown at login & header) is set by the constant APP_NAME in frontend/src/settings.tsx.
  • The default session duration is set to 5 hours in frontend/src/settings.tsx. The user will be logged out after 5 hours.
  • The Material UI Theme can be adjusted in frontend\src\Theme.tsx

TODO:

  • Readme (setup and how to remove remnants of dummy stuff)
  • Material UI Theme
  • Auto Generation of Left Nav based on Routes?
  • Fix NGINX Docker Compose
  • fix django admin not serving css files on admin page
  • error context
  • show password errors
  • loading icon on login
  • ensure a non-existing route redirects to home
  • email support (for password reset)
  • forgot password functionality (email)
  • Add support for nested sub-routes off the main left-nav routes
  • Ensure match params (i.e. /user/profile/1/) work correctly.
  • Context level modal?
  • Reset session timeout with activity.
  • Swagger API Explorer
  • Backend Testing
  • Frontend Testing (React Testing Library)
  • Auto redirect to login with Failed Request
  • Axios Interface for demo API
  • Update and Pin versions (remove anything unused)

django-react-postgres-boilerplate's People

Contributors

emilefrey avatar

Watchers

 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.