Flask Website Project Template

This project was created as a base for a portfolio website to promote a personal brand. If you use this template I would ask that you give credit where it is due and link back to the repo please!

Project Setup

website/app/static directory:

1. Replace Profile.jpg with your profile picture.
2. Replace cool-pattern.svg with a background pattern svg. You can create one here.

Phone Testing

• Ctrl + Shift + M to simulate a phone screen in a browser
  • can also choose specific phone model for testing

Configuration Files

You will need to create three files (same directory as the examples):

• .env
  • This holds SMTP info, Google Analytics info, and Flask Secret Key
• .flaskenv
  • This does not go into the image, used for development only
• nginx.conf
  • Look at the example conf files. HTTPS is the final conf, only need to replace localhost with your domains (ex. example.com www.example.com;). Make sure to put both www and without like shown.

Set Flask Secret

You can use the below command to create a 128 bit SECRET_KEY to add to your .env file

python -c "import secrets; print(secrets.token_hex(16))"

HTTPS Setup

First you need to comment out the ENTRYPOINT ["/bin/bash", "docker-entrypoint.sh"] line in the nginx Dockerfile as it only works if there is an issued cert.

1. Create self-signed certificate first, the nginx/cert/ssl directory will hold both the cert and privkey. This is a good fallback to ensure Nginx can at least run if something goes wrong with the 443 server. Need for testing.

openssl req -x509 -nodes -newkey rsa:4096 -days 3650 -keyout nginx/certs/ssl/privkey.pem -out nginx/certs/ssl/cert.pem -subj "/C=US/ST=NE/L=NE/O=NA/CN=localhost"

2. Create a dhparam.pem file to used for any certificates. This is highly recommended for security reasons. This goes in the nginx/certs/ssl directory.

openssl dhparam -out nginx/certs/ssl/dhparam.pem 4096

3. Request a staging certificate within the nginx container using the certbot package (already installed). Do this with the web app exposed to the internet.

certbot --nginx --staging -d example.com -d www.example.com --agree-tos -m [email protected] --non-interactive

4. Verify the test certificates are there and the nginx conf (located etc/nginx/conf.d/nginx.conf in the nginx container) has been modified for HTTPS, Port 443, with the correct paths for the pem files

5. Request the first certificate from LetsEncrypt

certbot --nginx -d example.com -d www.example.com --agree-tos -m [email protected] --non-interactive --force-renewal

6. Uncomment the ENTRYPOINT ["/bin/bash", "docker-entrypoint.sh"] line in the nginx Dockerfile. The script creates a cron job that runs every night in the Nginx container to renew the certificate (if needed and available for renewal)

Google Analytics Setup

The GA script is already present in the base html template. You just need to supply the GA ID in the .env file for it to work! You can sign up for a Google Analytics account here.

HCaptcha Setup

If you have a contact form it is a good idea to protect it using a captcha guard. I recommend HCaptcha since its free and respects your privacy.

Dev Operations

There is a hierarchy of testing to ensure your website is working. (I have powershell scripts, but you can easily convert them to Bash.)

1. Utilize docker_build.ps1 to build the docker image and remove dangling images
2. Running docker_dev_run.ps1 (while in the website directory)
   • This runs a Flask development server
   • Mounted on working repo
   • Gives you valuable error feedback when in debug mode
   • Reloads app if a file is changed/saved in repo
3. Running docker_prod_run.ps1 (while in the website directory)
   • This runs a Gunicorn prod server
   • Mounted on working repo
   • Can check the web server
   • Reloads app if a file changed/saved in repo
4. Running docker-compose (in the repo directory)
   • This runs a Gunicorn prod server with a reverse proxy Nginx server as the main access point.
   • Emulates live web, everything goes through Nginx
   • Allows tests for things such as HTTPS, Caching, Load Balancing, etc.

Gotchas

1. Make sure to nuke the Nginx conf docker volume if you change the conf and want it imported during the build. Otherwise exec in and use nano to edit the conf at /etc/nginx/conf.d/nginx.conf
2. The project structure is designed for expansion if you want to grow the website, but you probably won't need to. Feel free to simplify the structure if you want.