Install Docker Desktop
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.
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).
-
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.
- 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.
- 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.
- 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.
- 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.
- 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)