Skip to content

ReactJS + Flask + Docker (+K8S) boilerplate using an LDAP and token-based authentication.

Notifications You must be signed in to change notification settings

flavienbwk/reactjs-flask-ldap-boilerplate

Repository files navigation

Dockerized ReactJS, Flask & LDAP boilerplate

codebeat badge

ReactJS + Flask + Docker (+ K8S)
boilerplate using a token-based LDAP authentication

Features

API documentation

We've chosen Swagger to document the API. Run the API following the steps below and go to http://localhost:5000.

Here you can take a look at the database architecture scheme :

Reminder : there is no password field because we use LDAP for authentication.

Why using LDAP authentication ?

LDAP services are used in a lot of companies and institutions around the world to manage their user accounts and rights in a central place.

With this boilerplate, you will be able to develop corporate-ready services AND avoid yourself the troubles of developing registration / password forgotten / change password / profile update code.

Getting started (development)

This section will explain how to properly run this project and set-up the LDAP server with one user.

  1. Copy the .env.example file to .env

    cp .env.example .env

    This is a good practice so your .env can't be committed along with your modifications (is in .gitignore)

  2. Start the authentication services

    docker-compose up ldap phpldapadmin database adminer -d
    • phpLDAPAdmin (LDAP management) will be available at https://localhost:8081
    • adminer (PostgreSQL management) will be available at http://localhost:8082

    Create your first user by accessing phpLDAPAdmin at https://localhost:8081 and following the LDAP user creation guide.

  3. NGINX reverse-proxy

    This boilerplate includes NGINX as a reverse proxy so we can have a unique endpoint for our app and API. Else, we would have to open two endpoints : one for the app, the other for the API.

    docker-compose up --build -d nginx

    NGINX will auto restart until you have started the app and API below.

  4. Run the API

    The database will be automatically set-up thanks to Flask Migrate and any future modification brought to models will be automatically applied when the API is restarted.

    You might wait some time before the database get updated after starting the API :

    docker-compose up --build -d api

    For development, go to http://localhost:5000 to access the API documentation

  5. Run the web app

    # Expect several minutes for first launch (npm install)
    docker-compose up --build -d app

    ℹ️ If you want to add a NPM package, just stop & re-launch docker-compose up app.

    Enjoy the app on http://localhost:8080

Deploy to production

  1. Prepare environment configuration

    Copy .env.example to .env and edit the passwords, keys and credentials

    Use the provided Docker LDAP server or edit the config to use your own.

    cp .env.example .env
  2. Build the application for production

    docker-compose -f prod.docker-compose.yml build
  3. Start the authentication services

    docker-compose up ldap phpldapadmin database adminer -d

    Create your first user by accessing phpLDAPAdmin at https://localhost:8081 and following the LDAP user creation guide.

    ℹ️ We recommend you to hide this service behind a firewall

  4. Run the application

    docker-compose -f prod.docker-compose.yml up nginx api app -d

    Access the UI at https://localhost:8080

Deploy to K8S

I pretend you have here your K8S instance configured to be accessed by your kubectl CLI.

I've used Scaleway Kapsule to perform my tests. This is an easy way to have a Kubernetes cluster quickly ready.

  1. Building production images (optional)

    Images are tagged flavienb/reactjs-flask-ldap-boilerplate-{api,app,nginx}:latest by default. Edit it in prod.docker-compose.yml before building.

    ℹ️ You might be interested in pushing your images in a private registry (e.g: Scaleway's Container Registry service).

    docker-compose -f prod.docker-compose.yml build

    Finally, docker push the 3 images and edit K8S' configurations :

  2. Add a new reactjs-flask-ldap-boilerplate namespace

    kubectl create namespace my-app
  3. Configure your Ingress app endpoint

    Deploy with :

    kubectl apply -f ./k8s
  4. Configure the first user

    Create your first user by accessing phpLDAPAdmin at endpoint defined and following the LDAP user creation guide.

😃 Suggestions and feedbacks are highly appreciated