react-ssr-django-jwt-docker

React with server-side rendering and django api on docker

Stars
3
Committers
1

React with server-side rendering and django api on docker

Features

  • Building using razzle
  • Runtime configuration in server and client
  • Webpack hot module reloading in client and server
  • Server-side rendering
  • Suspense server side using react-ssr-prepass
  • Server-side handlers for graceful degradation of registration/ activation/ login/ social views.
  • Code splitting using @loadable/component
  • Babel 7 with fragments
  • React 16.8.6 with hooks
  • Using formik for forms with blueprintjs
  • Registration / activation/ social login and authentication using social-auth-app-django, JWT and graphene
  • Using træfik for routing requests and ssl.

How to use

Download the example or clone:

curl https://codeload.github.com/fivethreeo/react-ssr-django-jwt-docker/tar.gz/master | tar -xz react-ssr-django-jwt-docker-master
cd react-ssr-django-jwt-docker-master

To run using docker

Build images:

sudo docker-compose -f docker-compose.dev.yml build

Run database migrations:

touch db.sqlite3
sudo docker-compose -f docker-compose.dev.yml run djangoapi python manage.py migrate

Run all services (traefik, djangoapi, reactapp):

sudo docker-compose -f docker-compose.dev.yml up

To test registration email

export EMAIL_URL=smtp://username:password@localhost:25
sudo -E docker-compose -f docker-compose.dev.yml up

To test social auth

Go to https://github.com/settings/developers and click New Oauth App.

Set Authorization callback URL to https://localhost/social/github/complete.

export SOCIAL_AUTH_GITHUB_KEY="5137xfvkhv44468bca82e88"
export SOCIAL_AUTH_GITHUB_SECRET="23b3yfifvveeeyhvb0c6ce80bb"
sudo -E docker-compose -f docker-compose.dev.yml up

To add other social backends:

Add more backends to AUTHENTICATION_BACKENDS in djangoapi/settings.py.

Add extra SOCIAL_AUTH_[BACKEND]_[SECRET|KEY] settings in djangoapi/settings.py.

See https://python-social-auth.readthedocs.io/en/latest/configuration/django.html#authentication-backends

Try it out

Go to https://localhost.

To remove https warnings add certs/localhost_https_ca.pem to authorities in your browser.

To make your own certs:

cd certs
rm localhost_https*
bash makecert.sh --dn-c "US" --dn-st "TX" --dn-l "Houston" \
  --dn-o "Your organization" --dn-ou "Your department" \
  --dn-email "[email protected]" \
  --common-name "localhost" --dns "localhost" --ip "127.0.0.1" --https

Teasers

Ideas behind the example