Git Product home page Git Product logo

jkcsitetemplate's Introduction

JediKnight's web-site template: Django + Vue.js (CoreUI) + Nginx

This is a website template where backend is handled by Django Rest framework, frontend is written in Vue.js (using CoreUI as a template), Nginx provides high-level route management and handles static files.

Docker Compose is used for containerization and maintenance of Postgres database. Celery is used for running long and scheduled tasks inside Django and is working along with Redis. Gitlab CI/CD allows to automatically deploy new commits to master on the server (if repo is holden on Gitlab, ofc).

In this template the most valuable thing is the setup of all the things mentioned above.

Backend

With Django Rest site has an authentication system (based on JWT tokens, also validating Recaptcha V3) and a simple blog api.

  • Model
  • Serializer
  • View Set
  • Permission policy with drf-access-policy (you can specify groups of users who have access to each view of a view set)
  • Optional filtering with django-filter: 2 "datetime in range" fields, filter blog post by user field

An example celery task is present which is scheduled to run every 3 hours.

Frontend

CoreUI gives a good looking site landing for dashboard, in my opinion. Vue.js meanwhile seems to be the fastest frontend framework to learn out of the 3. Frontend includes pages for login, 404, viewing blog posts.

  • Authentication is done via Vuex Store for global state
  • Two useful mixins are present for interacting with "List" and "Retrieve" views of Django Rest. List mixin can handle on-scroll pagination.

This favicon generator was used.

Nginx

Nginx has 2 configs for running in https-only mode and in http mode. Additional security features like strict MIME type, XSS protection headers are included.

Easiest way to get SSL certificate:

  • Get certificate first time (make sure port 80 is free): sudo /usr/bin/docker run -it --rm --name certbot -v "/etc/letsencrypt:/etc/letsencrypt" -v "/var/lib/letsencrypt:/var/lib/letsencrypt" -p 80:80 certbot/certbot certonly
  • Update it: sudo /usr/bin/docker run -it --rm --name certbot -v "/etc/letsencrypt:/etc/letsencrypt" -v "/var/lib/letsencrypt:/var/lib/letsencrypt" -v "/var/www/html/.well-known:/var/www/html/.well-known" certbot/certbot renew --webroot --webroot-path /var/www/html

Setup

After creating .env files and sudo docker-compose up --build or sudo docker-compose -f docker-compose.dev.yml up --build (for dev and http server) some additional setup is required (executing commands on 'web' container).

  1. Migrating database: sudo docker exec <container_id> python manage.py migrate
  2. Collecting static: sudo docker exec <container_id> python manage.py collectstatic
  3. Creating superuser: sudo docker exec -it <container_id> python manage.py createsuperuser

For the setup of Gitlab Runner for CI/CD see their docs for installing and registering runner. Basically:

  1. export arch=$(dpkg --print-architecture)
  2. curl -LJO "https://gitlab-runner-downloads.s3.amazonaws.com/latest/deb/gitlab-runner_${arch}.deb"
  3. sudo dpkg -i gitlab-runner_${arch}.deb
  4. sudo gitlab-runner register
  5. sudo gitlab-runner start

Tips

  • Make sure to check out env-files branch to see env. files examples. Without proper environmental setup it won't be working (eg, declined login as can't validate Recaptcha).

jkcsitetemplate's People

Contributors

jediknightchan avatar

Watchers

James Cloos avatar  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.