DEV Community: Peiwen Li

Configure A Fresh VPS To Host A Website

Peiwen Li — Sun, 17 Jul 2022 03:25:24 +0000

Got a new VPS (Ubuntu 20.04) on Namecheap. It seems that the basic VPS tier on Namecheap offers double CPU, RAM and storage than that of my old basic tier on AWS lightsail.

This journal concisely notes: How to configurate a fresh VPS to host my new website peiwen.me.

Reminder:

Just run these commands once ssh into remote server

apt update
apt install curl

Notes:

apt is a Linux package management system
'fun' fact: apt cmd was introduced in 2014, partly replaced apt-get after the release of Ubuntu 16.04, for being faster, friendlier, easier to use

Firstly! `SSH`

mosh is a good mobile shell - highly responsive, gotta be installed both locally and remotely.
local ssh config for convenience:

  # add info to local file: ~/.ssh/config
  Host <name_your_remote>
    HostName <static_IP>
    User <remote_username>
    IdentityFile <path_to_local_id_rsa>
    IdentitiesOnly yes

remote ssh config:

  # local shell
  ssh <user>@<static_IP>

  # remote shell
  mkdir .ssh
  touch authorized_keys
  apt-get install nano # just in case
  apt-get install mosh # just in case
  nano authorized_keys
  # paste the content of the local file 'id_rsa.pub' to this file, save and exit

NOW! YOU CAN~

  # local shell
  mosh <name_your_remote>
  ssh <name_your_remote>

NodeJS

`nvm`

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# might need to reconnect remote for `nvm` command to work properly

Note: check the latest nvm installation script here

`node`

nvm list-remote
nvm install stable # or pick one from the list
nvm list
node -v
npm -v
npm install --global yarn # recommended

Note: if "nvm 'command' not found" - check 'Troubleshooting on Linux Section'

MongoDB

Problems with installing v5.0

🔥 This exact problem encountered when I installed v5.0 - mongod service won't start. The reason might be:

> the VM’s CPU does not support instructions required by MongoDB 5.0 (such as AVX and SSE) which should be listed in the CPU flags:
> flags : fpu vme de pse tsc msr pae mce cx8 apic sep mtrr pge mca cmov pat pse36 clflush mmx fxsr

Similar issues found:

You might need to install apt install procinfo to run cat /proc/cpuinfo to checkout your CPU type.

Install MongoDB v4.4 Community Edition

wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list

sudo apt-get update

sudo apt-get install -y mongodb-org=4.4.15 mongodb-org-server=4.4.15 mongodb-org-shell=4.4.15 mongodb-org-mongos=4.4.15 mongodb-org-tools=4.4.15

Start and config

sudo systemctl start mongod
sudo systemctl status mongod
sudo systemctl enable mongod
mongo
mongosh

Note: sudo can be omitted if you are the root superuser

Uninstall MongoDB

sudo service mongod stop
sudo apt-get purge mongodb-org*
sudo rm -fr /var/log/mongodb
sudo rm -fr /var/lib/mongodb

Security Checklist

MongoDB Guide

IP Binding to create a replica backup

Mongo

Git

Installation

apt update
apt install git
git --version

Setup

To setup username if push to source is needed

git config --global user.name <username>
git config --global user.email <email>
git config --list # or ↓ directly check gitconfig file
nano ~/.gitconfig

This is NOT enough anyway if you were to edit code and push to source, for only SSH communication is allowed with github repos since 2021.

Clone repo

Clone web repo to ~/web/, install the deps

git clone <repo_address>
cd <project>

yarn
# OR
npm i

Configure `.env.local`

touch .env.local
nano .env.local

.env.local content ↓

MONGODB_URI=<get_this by typing mongosh>
MONGODB_DB=journal

PASS=<some_password>
NEXT_PUBLIC_PASS_TOKEN=<some_JWT_like_token>

NEXT_PUBLIC_REVAL_TOKEN=<some_token_for_revalidation_token>

Build

yarn build
yarn global add pm2
pm2 start yarn --name "peiwen.me" -- start
pm2 ls

# to start on startup
pm2 startup
# to freeze/save the processes
pm2 save

Nginx

1. Install, config firewall and enable nginx

apt install nginx

# firewall
ufw app list

# returns
Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH
  mosh

# enable firewall
ufw allow 'Nginx Full'
ufw allow OpenSSH # important
ufw allow mosh
ufw enable
ufw status

# returns
Status: active
To                         Action      From
--                         ------      ----
Nginx Full                 ALLOW       Anywhere
OpenSSH                    ALLOW       Anywhere
mosh                       ALLOW       Anywhere
Nginx Full (v6)            ALLOW       Anywhere (v6)
OpenSSH (v6)               ALLOW       Anywhere (v6)
mosh (v6)                  ALLOW       Anywhere (v6)

# check your nginx server
systemctl status nginx

# get your IP if you don't already know for some reason
curl -4 icanhazip.com
<IP_address>

# enter this <IP_address> into the browser, you should be able to see the landing page of nginx

# lastely, enable it on every boot
systemctl enable nginx

2. Setting Up Server Blocks

An nginx server block is a file inside folder /etc/nginx/sites-available/

cd /etc/nginx/sites-available
touch <new_domain> # optional
nano <new_domain>

Insert content:

server {
  # the name of your domain
  server_name <new_domain> www.<new_domain>;

  location / {
    # this must stay localhost. The port must be the same as your Next.js project
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }

  # simple headers
  add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
  add_header X-XSS-Protection          "1; mode=block" always;
  add_header X-Frame-Options DENY always;

  # this will serve the project on port 80
  listen 80;
}

3. Verify and reload nginx for it to take effect

# check all working
nginx -t

ln -s /etc/nginx/sites-available/<new_domain> /etc/nginx/sites-enabled/

systemctl reload nginx

PS. Do NOT forget

UPDATE host records: point to server IP (which record type to choose)

Refs:

SSL

1. Install `certbot` and some preparation

apt install certbot python3-certbot-nginx

# firewall settings
ufw allow 'Nginx Full'
ufw allow 'Nginx HTTPS'
ufw deny 'Nginx HTTP'
ufw status

# check if the <server_name> is exactly the format "example.com www.example.com"
nano /etc/nginx/sites-available/example.com

2. Obtain the SSL/TLS Certificate

# do not forget the '-d' before www.example.com
certbot --nginx -d example.com -d www.example.com
# enter your email...

Once you configure HTTPS, Certbot completes generating the certificate and reloads Nginx with the new settings.

Finally, the output displays that you have successfully generated a certificate and specifies the location of the certificate on your server. /etc/letsencrypt/live/example.com/fullchain.pem (success)

Ref: How to Secure Nginx with Let's Encrypt On Ubuntu 20.04

If you open your nginx file now nano /etc/nginx/sites-available/example.com, you'll find the extra info has been added:

server {
  server_name <new_domain> www.<new_domain>;

  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }

  add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
  add_header X-XSS-Protection          "1; mode=block" always;
  add_header X-Frame-Options DENY always;

  # ↓ the following lines are added by Certbot

  listen 443 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
    if ($host = www.example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    if ($host = example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

  server_name example.com www.example.com;
  listen 80;
    return 404; # managed by Certbot
}
} # an extra for some reason...

# check certificate's auto-renewal
certbot renew --dry-run

3. Setup Cronjob to Enable Automatic Certificate Renewal

# open Crontab
crontab -e

Add a line:

# Schedule it to run daily at a specified time (in this example, it does so at 05:00 a.m.)
0 5 * * * /usr/bin/certbot renew --quiet

Maintain

# in remote <site_folder>
git pull && yarn build && pm2 restart peiwen.me

Useful articles 😄

Django Retail Website Deployment

Peiwen Li — Sat, 16 Jul 2022 15:02:27 +0000

After a month of development of this retail website, this is the note on how to deploy this django app on VPS ubuntu 18

Finally the Deployment on Ubuntu 18.04

Before:
Don't forget the official checklist before your deployment. And delete all migrations files in migrations folder except for __init__.py for a clean start. And do not forget to pip freeze > requirements.txt before commiting your project to be cloned to the server.

Initialisation:

connect to the server with SSH: setting up SSH
update apt package index

   $ sudo apt-get update && sudo apt-get upgrade

install python: Ubuntu 18.04 came with python 3.6, you can verify this by typing:

   $ python3 -V
   Python 3.6.9

other files to install: pip, the Python development files needed to build Gunicorn later, the Postgres database system and the libraries needed to interact with it, and the Nginx web server:

   $ sudo apt install python3-pip python3-dev libpq-dev postgresql postgresql-contrib nginx curl

upgrade pip and install virtual env

   $ sudo -H pip3 install --upgrade pip
   $ sudo -H pip3 install virtualenv

add root user and grant privilege: (more about initial server setup with Ubuntu 18.4)

   $ adduser username
   ......
   $ usermod -aG sudo username
   # privilege granted for this user

### in Ubuntu, 'root' directory and 'user home' directory are different
root@0-0-0-0:/root$ command under root directory with ultimate root user signed in
### 'user home' directory is
username@0-0-0-0:/root$ command under root directory using 'user' signed in
username@0-0-0-0:~$ command under user's home directory, and it's usually in /root/home/username/ directory

Creating PostgreSQL Database and User:

# Log into an interactive Postgres session by typing:
$ sudo -u postgres psql

# create a database for the project:
postgres=> CREATE DATABASE myproject;
# careful here, if you need utf-8 encoding, you have to specify it:
postgres=> CREATE DATABASE new_db_name WITH ENCODING='UTF8' LC_CTYPE='ru_RU.UTF-8' LC_COLLATE='ru_RU.UTF-8' OWNER=postgres TEMPLATE=template0

# create a db user for the project:
postgres=> CREATE USER myprojectuser WITH PASSWORD 'password';


# modify a few connection parameters for the user created

# 1. setting the default encoding to UTF-8
postgres=> ALTER ROLE myprojectuser SET client_encoding TO 'utf8';

# 2. setting the default transaction isolation scheme to “read committed”, which blocks reads from uncommitted transactions
postgres=> ALTER ROLE myprojectuser SET default_transaction_isolation TO 'read committed';

# 3. setting the timezone. By default, our Django projects will be set to use UTC
postgres=> ALTER ROLE myprojectuser SET timezone TO 'UTC';

# give our new user access to administer our new database:
postgres=> GRANT ALL PRIVILEGES ON DATABASE myproject TO myprojectuser;

# quit PostgresSQL prompt:
postgres=> \q

# useful command - see list of roles:
postgres=> \du

# to delete a database
postgres=> DROP DATABASE database_name;

Some useful sql commands here

Note: it doesn't matter whether you set your database name to capital letters or not when you setting up, they will convert uppercase to lowercase anyway... However, the password is case sensitive...

Host a project on server
Do not forget to pip freeze > requirements.txt before commiting your project to be cloned to the server

cloning:

$ su username Switch to a User which you just created and have the root privilege
$ cd ~/ go to the user's home directory
if you haven't installed git: $ sudo apt install git
$ git clone repo/HTTP/address CLONE the repo
$ cd project_directory go to this project's directory
$ virtualenv venv create the virtual environment
$ source venv/bin/activate activate the virtual environment Note: in venv, you can use pip instead of pip3, python instead of python3
(venv)$ pip install -r requirements.txt install all packages
(venv)$ nano project/foler/settings.py adjust a few things in settings:

Note: Of course you can choose to edit the file locally and commit to GitHub, then pull it to your server, the important things are the following:
STATIC_ROOT = os.path.join(BASE_DIR, 'static/') Normally you wouldn't have to set this up locally when developing
change the database from sqlite3 to postgres

   DATABASES = {
       'default': {
           'ENGINE': 'django.db.backends.postgresql_psycopg2',
           'NAME': 'myproject_database_name',
           'USER': 'myproject_database_user',
           'PASSWORD': 'myproject_database_user_password',
           'HOST': 'localhost',
           'PORT': '',
       }
   }

ALLOWED_HOSTS = ['your_server_domain_or_IP', 'second_domain_or_IP', . . ., 'localhost'] be careful here, at the end, include 'localhost' as you'll be proxying connections through a local Nginx instance, whatever that is...

setting up SECRET_KEY (followed this blog)

- `$ pip install python-dotenv` or simply included in your `requirements.txt` file: `echo python-doctenv >> requirements.txt` before pulling the repo
- on server:

  ```bash
  $ cd ~/project_directory/`
  $ echo "export SECRET_KEY=seekratevalue" > .env
  ```

  You can edit `.env` file and adding more environment variable, or you can use commandline like so:

  ```bash
  # you can also directly export one-off environment variable directly on commandline
  $ export CAPITAL_NAME=true
  # it doesn't matter whether you add quotation marks for the value when you export, even when they are strings, the value 'true' will always be a string

  # if you export directly in command, be careful of ! as it needs to be excaped \!
  $ export PASSWD_DB = something\!and@#others
  ```

  But I would recommand to use `.env` file if you set it up already. Keep everything in one place.

- in `wsgi.py` file in the same directory of `settings.py`, as well as `manage.py` file

  ```python
  import os
  from dotenv import load_dotenv
  project_folder = os.path.expanduser('~/my-project-dir')  # adjust as appropriate
  load_dotenv(os.path.join(project_folder, '.env'))
  ```

  Be very careful the path of the folder, or you won't get the correct env variable. A way to check whether you have the variable in your environment is go to `python manage.py shell` and `import os`, like below:

- finally in `settings.py`

  ```python
  import os
  SECRET_KEY = os.getenv("SECRET_KEY")
  ```

$ python manage.py migrate no need to make migrations in production
$ python manage.py collectstatic to collect static files
Allow port 8000 to test locally: $ sudo ufw allow 8000
$ python manage.py runserver 0.0.0.0:8000, then you should be able to visit the site through 'your_ip:8000' port.
$ gunicorn --bind 0.0.0.0:8000 myproject.wsgi to bind it with unicorn, testing Gunicorn's ability to serve the project. You would still be able to visit the site through the same port just this time, it would be served by gunicorn (Note: myproject in myproject.wsgi is the folder where wsgi.py file exists)
$ deactivate now we can exit the virtual environment

Gunicorn: Creating systems Socket and Service Files

$ sudo nano /etc/systemd/system/gunicorn.socket system socket creation

   # /etc/systemd/system/gunicorn.socket
   [Unit]
   Description=gunicorn socket

   [Socket]
   ListenStream=/run/gunicorn.sock

   [Install]
   WantedBy=sockets.target
   # save and close

$ sudo nano /etc/systemd/system/gunicorn.service system service file for Gunicorn:

   [Unit]
   Description=gunicorn daemon
   Requires=gunicorn.socket
   After=network.target

   [Service]
   User=sammy
   Group=www-data
   WorkingDirectory=/home/sammy/myprojectdir
   ExecStart=/home/sammy/myprojectdir/myprojectenv/bin/gunicorn \
             --access-logfile - \
             --workers 3 \
             --bind unix:/run/gunicorn.sock \
             myproject.wsgi:application

   [Install]
   WantedBy=multi-user.target

   # Note: User is the system user with writing privilege, so change that, also change 'WorkingDirectory' and 'ExecStart', DO NOT forget 'project_folder_contains_wsgi.wsgi:application'

Start and enable Gunicorn socket, so that connections can be handled by gunicorn.service:

   $ sudo systemctl start gunicorn.socket
   $ sudo systemctl enable gunicorn.socket

Status Check:

   $ sudo systemctl status gunicorn.socket
   # Check the status of the process to find out whether it was able to start

   $ file /run/gunicorn.sock
   /run/gunicorn.sock: socket
   # check for the existence of the gunicorn.sock file within the /run directory

   $ sudo journalctl -u gunicorn.socket
   # Check the Gunicorn socket’s logs by typing for debugging

Test Socket Activation:

   $ sudo systemctl status gunicorn
   # gunicorn.service won't be active since there's no connections made, so this output should be 'Active: inactive (dead)'

   $ curl --unix-socket /run/gunicorn.sock localhost
   # To test the socket activation mechanism, we can send a connection to the socket through curl by typing the above, and you should be able to see the HTML output, meaning that Gunicorn is serving your Django app

   $ sudo systemctl status gunicorn
   # You can verify that the Gunicorn service is running by typing the above

   # check the logs for additional details:
   $ sudo journalctl -u gunicorn

   # Check your /etc/systemd/system/gunicorn.service file for problems. If you make changes to the /etc/systemd/system/gunicorn.service file, reload the daemon to reread the service definition and restart the Gunicorn process by typing:
   $ sudo systemctl daemon-reload
   $ sudo systemctl restart gunicorn

Note: Make sure everything above is debugged before continue

Nginx: Configuration to Proxy Pass to Gunicorn

After Gunicorn is set, Nginx is to be configured to pass traffic to the process

$ sudo nano /etc/nginx/sites-available/myproject create a server block for Nginx (myproject name is case sensitive)
Inside: open a new server block; to ignore problems with finding a favicon; tell Nginx to find static assets and media assets:

   server {
       listen 80;
       server_name server_domain_or_IP;

       location = /favicon.ico { access_log off; log_not_found off; }
       location /static/ {
           root /home/sammy/myprojectdir;
       }
       location /media/ {
           root /home/sammy/myprojectdir;
       }

       location / {
           include proxy_params;
           proxy_pass http://unix:/run/gunicorn.sock;
       }
   }

   # save and close the file

Afterwards:

   $ sudo ln -s /etc/nginx/sites-available/myproject /etc/nginx/sites-enabled
   # Enable the file by linking it to the `sites-enabled` directory

   $ sudo nginx -t
   # Test your Nginx configuration for syntax errors by typing the above

   # If no errors are reported, go ahead and restart Nginx by typing:
   $ sudo systemctl restart nginx

4) Firewall settings:

   # Finally, we need to open up our firewall to normal traffic on port 80. Since we no longer need access to the development server, we can remove the rule to open port 8000 as well:
   $ sudo ufw delete allow 8000
   $ sudo ufw allow 'Nginx Full'

   # check the registered profiles to be managed by UFW
   $ ufw app list
   Available applications:
    Nginx Full
     Nginx HTTP
     Nginx HTTPS
     OpenSSH

   # make sure that the firewall allows SSH connections
   $ ufw allow OpenSSH
   # enable the firewall by typing
   $ ufw enable
   # type "y" and press `Enter` to proceed

   # You can see that SSH connections are still allowed by typing:
   $ ufw status
   # you should be able to see all apps allowed by the firewall

   # Note: you can log in by using a user's name as well
   $ ssh sammy@your_server_ip

Make sure:

You have run initial server setup for Ubuntu 18.04
Your domain names (A-record) are pointing to your VPS's IP address: How to

   # basically if you run:
   $ dig NS +short your_domain.com
   # shows the desired host name servers and:

   $ dig A +short your_domain.com
   # shoes your VPS IP, then you are good to go

You might need to wait for the change to take effect, it takes up to 24 hours if you requested DNS propagation (changed your DNS in any way)

Nginx installed: How to

SSL with Let's Certbot on Nginx

# installation
$ sudo apt install python-certbot-nginx

# open the server block file created earlier
$ sudo nano /etc/nginx/sites-available/myproject
# 'myproject' name is case sensitive

find the existing server_name line, and make sure it looks like this:

...
server_name example.com www.example.com;
...

Save and exit.

# always verify the syntax of your configuration edits:
$ sudo nginx -t

# Once your configuration file’s syntax is correct, reload Nginx to load the new configuration:
$ sudo systemctl reload nginx

# check your ufw (firewall) status
$ sudo ufw status

# if there's no 'Nginx Full' or simply 'Nginx HTTP':
$ sudo ufw allow 'Nginx Full'
$ sudo ufw delete allow 'Nginx HTTP'

# Now when you run 'ufw status' check, it should be looking like this:
To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
Nginx HTTP                 ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)
Nginx HTTP (v6)            ALLOW       Anywhere (v6)

Finally, Obtaining an SSL Certificate from Cerbot

$ sudo certbot --nginx -d example.com -d www.example.com

Note:

This runs certbot with the --nginx plugin
using -d to specify the names we’d like the certificate to be valid for

Try reloading your website using https:// and notice your browser’s security indicator. It should indicate that the site is properly secured, usually with a green lock icon. If you test your server using the SSL Labs Server Test, it will get an A grade.

# You can check certificate's auto-renewal by typing:
$ sudo certbot renew --dry-run

Retail Website built with Django P5 (2020-02-16)

Peiwen Li — Sun, 15 May 2022 02:41:16 +0000

Django:

delete one table in django sqlite: SO comment

$ python manage.py dbshell
# if you do not know which table to delete/drop, run:
sqlite > SELECT * FROM sqlite_master WHERE type='table';
# if you already know:
sqlite > DROP TABLE appname_modelname;

# DO NOT FORGET the semi-colon at the end, otherwise it will prompt '...>' signalling the expression is unfinished

### where should signal.py file lives: article by Vitor Freitas & Django official doc
create signal.py file in the same directory as models.py and urls.py etc.
edit the file, write your code

add following code in apps.py file under the same directory

def ready(self):
    import appName.signals # noqa

follow the four steps

### models - DateTimeField(auto_now=True) and DateTimeField(auto_now_add=True)
- DateTimeField(auto_now=True) -- update everytime this model instance is edited
- DateTimeField(auto_now_add=True) -- set the time once when this model instance is created

### SO ask and answered Django - logout view customisation fail

context processor

adding a context processor to your project if you find repetitive bahavior in passing the same context to different views:
1. in the same directory of models.py create a file named context_processors.py
create a function:

from .models import Category
    from django.template.context_processors import request

def category_context_processor(request):
    categories = Category.objects.all()
    return {'categories': categories}

3. add this processor to `settings.py`

```python
TEMPLATES = [
{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [os.path.join(BASE_DIR, 'templates')],
    'APP_DIRS': True,
    'OPTIONS': {
        'context_processors': [
            ... # other processors
            ... # add code below:<app-name>.<file-name>.<function-name>
            'app-name.context_processors.category_context_processor',
                ],
            },
        },
    ]
```

Now you don't have to pass categories to each view now! And this code will run on every request on the site.

Bootstrap

to override default

simply add an id to body tag

<body id="bootstrap-override">

and refer to this id when overriding default css

General knowledge

url in css:

Because css is a static file, so the url inside is better be static as well. so just use relative url for url() in css files.
for some reason it's slow to load a file when you pupdate it in css. sometime I have to restart the local server for it to take effect

## Debug Toolbar

To optimize database queries: article by Victor Freitas
- Use select_related to avoid unnecessary queries
- Use Debug Toolbar to track the queries

Retail Website built with Django P4 (2020-02-10)

Peiwen Li — Sun, 15 May 2022 02:38:21 +0000

Django:

template `{{forloop.counter0}}`

{% for image in item.itemimage_set.all %}
<li data-target="#item{{item.pk}}Carousel" data-slide-to="{{forloop.counter0}}"></li>
{% endfor %}

forloop.counter0 is 0-indexed
forloop.counter is 1-indexed

more variables in forloop can be found here:

forloop.revcounter
forloop.revcounter0
forloop.first
forloop.last
forloop.parentloop

ForeignKey.on_delete

ForeignKey takes in on_delete argument to deal with the situation where the ForeignKey object is being deleted. The value of on_delete argument represents this behaviour. There are 3 options (In the examples below, Item model has Category as a ForeignKey):

on_delete=models.CASCADE : deleting a foreign object, i.e. a category, will automatically delete all of the items under that category
on_delete=models.PROTECT: deleteing a foreign object, i.e. a category, will automatically prompt 'Can Not Delete' if there's items under that category, And the items will be listed
on_delete=models.SET_NULL: deleteing a foreign object, i.e. a category, will set this foreign key to Null in all of the items originally under that category.

Google Font

Go to Google Fonts: https://fonts.google.com/
add the fonts for your website
interact with the pop up at bottom right corner
copy url
go to your css file
paste: @import url(...)
apply the font into css element as usual (font-family: 'Forum', cursive;). you can also copy this on the popup

Python

why @property decorator? SO question ref

the function within the class can be accessed like a class' property instead of a function()

you don't have to call it with () to gain access to the result
you can pass parameter into it and process existing class values

class Person(models.Model):
  first_name = models.CharField(max_length=50)
  last_name = models.CharField(max_length=50)
  birth_date = models.DateField()

  @property
  def full_name(self):
    "Returns the person's full name."
    return '%s %s' % (self.first_name, self.last_name)

  @full_name.setter
  def full_name(self, value):
     names = value.split(' ')
     self.first_name = names[0]
     self.last_name = names[1]

VS Code

Shortcuts - Find and replace:

Find: command + F
Add next occurrence: command + D
Add ALL occurrences: option + Enter
Replacement: command + option + F
Replace: command + Enter

Retail Website built with Django P3 (2020-02-07)

Peiwen Li — Sun, 15 May 2022 02:34:44 +0000

Django:

in `urls.py` be careful which goes first

app_name = 'boutique'
urlpatterns = [
    # show index page
    path('', views.IndexView.as_view(), name='index'),

    # show a specific item
    path('item_<int:item_pk>/', views.ItemDetailView.as_view(), name='item'),

    # show categories of products for men or women
    path('<slug:gender>/', views.CategoryListView.as_view(), name='show-all'),

    # show a specific category for men or women
    path('<slug:gender>/cat_<int:category_pk>/', views.CategoryListView.as_view(), name='category'),

    # show a specific subcategory under a specific category for men or women
    path('<slug:gender>/cat_<int:category_pk>/subcat_<int:subcategory_pk>/', views.CategoryListView.as_view(), name='subcategory'),

]

In this file, if you put item after subcategory, item view will never render the correct page, as it will be hjacked by ListViews before it.

models - gender choices

example below:

class Category(models.Model):
    '''Category for men's and women's items'''
    gender = models.IntegerField(choices=[
        (1, 'Women'),
        (2, 'Men'),
    ], default=1)
    name = models.CharField(max_length=100)
    description = models.CharField(max_length=300, blank=True)
    uploaded_date = models.DateTimeField(
        auto_now_add=True, null=True, blank=True)

    class Meta():
        verbose_name_plural = 'Categories'

    def __str__(self):
        return self.get_gender_display() + ' ' + self.name

    def get_category_url(self):
        return reverse('boutique:category', kwargs={'gender': self.get_gender_display(), 'category_pk': self.pk})

A couple of things to notice in this example:

gender's choices: * choices is in small letters * choices is a list with tuples
access gender's choices: you can use get_FOO_display() to access a field's choices, checkout this for more details

`def get_absolute_url()` in `models.py`

models.py

from django.urls import reverse

class SomeModel(models.Model):
    <---snip--->

    # it can be any name you like because it doesn't seem to be inheriting from anything
    def get_absolute_url(self):
        return reverse('app_name:view_name', kwargs={'key': self.field_name})
        # reverse returns a string for href content

When implementing the url into html tag, make sure SomeModel is accessable (either by iteration or it is an object passed through context):

*html

<a href="{{ SomeModel.get_absolute_url }}">link</a>

dynamic handling url: checkout this SO question I posted

based on the answer by Mathias, it's not possible unless installing a django-middleware-global-request
Then you can:

from django_global_request.middleware import get_request

class TestModel(models.Model):

    ...

    def get_absolute_url(self):
        request = get_request()

        if request.GET.get('whatever'):
            return ...
        else:
            return ...

You just need to make sure, you could still access this method without any available request. So make sure it's fail save and has a fallback in case of the absence of a request (like in a shell, upgrade, etc.)

`get_queryset(self)` and `get_context_data(self, **kwargs)` in `ListView` - CCBV

_get_queryset() is more useful in ListView, because it returns a queryset for templates to render. querysets are passed through context automagically! _
if a model is defined in the CBV, get_queryset() will automatically run and acquire model.objects.all(), if to override it:

  class SomeView(ListView):
    <---snip--->
    # context_object_name represents the result of get_queryset()
    # you can directly access this from the template even if you do not set context_object_name
    context_object_name = 'coobna'


    def get_queryset(self):
      # if you still need the default functionality of this function
      # it's like to inherite from it's superior, instead of writing a whole new function
      queryset = super().get_queryset()

      # before returning the queryset, you can print(queryset) to debug or for referencing purposes
      return queryset.filter(........)


    def get_context_data(self, **kwargs):
      # inherite the functionality from its 'superior'
      context = super().get_context_data(**kwargs)

      # now you can add more context to it
      new_context = Category.objects.all()
      context['new_context'] = new_context

      # you can always print out the context for debugging
      print(context)
      return context

An example of a ListView:

  class CategoryListView(ListView):
    '''display a list of items'''
    model = Category
    template_name = 'boutique/items.html'
    # context_object_name is actually the result of `get_queryset()`
    context_object_name = 'category_shown'
    # paginate_by = 12

    def get_queryset(self):
        # get original queryset: Category.objects.all()
        qs = super().get_queryset()

        # filter men/women
        if self.kwargs.get('gender') == 'Women':
            qs = qs.filter(gender=1)
        elif self.kwargs['gender'] == 'Men':
            qs = qs.filter(gender=2)

        if self.kwargs.get('category_pk'):
            qs = qs.filter(pk=self.kwargs.get('category_pk'))

        # print('\nqs= ', qs, '\n')
        return qs

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        # add categories for navbar link texts
        context['categories'] = Category.objects.all()

        if self.kwargs.get('subcategory_pk'):
            context['subcategory_shown'] = get_object_or_404(
                SubCategory, pk=self.kwargs.get('subcategory_pk'))
            context['item_list'] = Item.objects.filter(
                subcategory=self.kwargs.get('subcategory_pk'))
            # print('\ncontext with subcat= ', context, '\n')
            return context

        # Because context_object_name actually represents the result of `get_queryset()`
        # Therefore, if context_object_name is set to the same name as the context name
        # the following expression can be omitted
        # context['category_shown'] = self.get_queryset()
        # The benefit of this is you don't need to run get_queryset() again!!

        if self.kwargs.get('category_pk'):
            context['item_list'] = Item.objects.filter(
                category=self.kwargs.get('category_pk'))

        # print('\ncontext= ', context, '\n')
        return context

DetailView in CCBV

example

class ItemDetailView(DetailView):
    '''display an individual item'''
    model = Item
    template_name = 'boutique/item.html'
    # no need to specify as default context_object_name depends on the model
    # they are actually the same (with lower case first letter)
    # context_object_name = 'item'

A couple of things to note:

context_object_name (see comment above)
Two lines are sufficient for displaying standard DetailView of an item ### HOWEVER: One should be very careful about the url value passed into the CBV, checkout my question on StackO. url.py

urlpatterns = [
    path('item_<int:pk>/', views.ItemDetailView.as_view(), name='item'),
]

I used path('item_<int:item_pk>/'...) that's why it didn't work. For DetailView to work, you either have to pass in <pk> or specify in your CBV of your pk_url_kwarg = 'item_pk'. docs

Retail Website built with Django P2 (2020-02-05)

Peiwen Li — Sun, 15 May 2022 02:34:18 +0000

Django:

Animate your element

after cloned a django project:

execute the following command

$ python3 -m venv venv
$ source venv/bin/activate
(venv) $ pip install -r requirement.txt
(venv) $ pythong manage.py runserver 127.0.0.1:8080 #(or some other port)

Django admin site

$ python manage.py creatsuperuser creates users with attr is_superuser or is_staff
class ModelAdmin from django.contrib.admin
- if you need to make changes to the default admin interface, you need to create a object of ModelAdmin like so: class AuthorAdmin(admin.ModelAdmin):, this represent Author model on admin dashboard
- instead of registering like this: admin.site.register(Author), you have to use a decorator to your AuthorAdmin class like so:
```
from django.contrib import admin
from .models import Author
from myproject.admin_site import custom_admin_site

# Reader and Editor objects have to have a ForeignKey field pointing at Author
@admin.register(Author, Reader, Editor, site=custom_admin_site)
class AuthorAdmin(admin.ModelAdmin):
    pass
```
- Create InlineModelAdmin object to display extra info on a model in admin add page.

Retail Website built with Django P1 (2020-02-04)

Peiwen Li — Sun, 15 May 2022 02:33:54 +0000

Django:

This isn't something Django has built in. But Django is just Python, and you can use normal Python file functions to get your list in the view:
files = os.listdir(os.path.join(settings.STATIC_ROOT, "styles/jamia"))

filter in queryset

When you know what to look for:
category_handbags = Category.objects.filter(name='Handbags')
furthur reading: Database Functions

* filter()

By using filter(), we can retrieve a QuerySet of just those books that were published within the last 90 days period, like so:
from datetime import datetime, timedelta 
Book.objects.filter(date_published__gte=datetime.now() - timedelta(days=90)).count()
# __isnull
Book.objects.filter(author__isnull=True).count()
# __exact
Book.objects.filter(title__exact='').count()

* exclude()

if we use the exact same date_published example above but swap out filter() for exclude(), we’d expect the resulting book count to be the inverse: from 3 of 20 to now 17 of 20:
from datetime import datetime, timedelta
Book.objects.exclude(date_published__gte=datetime.now() - timedelta(days=90)).count()
# combining filters
Book.objects.exclude(author__isnull=True).exclude(title__exact='').count()

`categories.count()` vs `len(categories)`

len() loads all the data in memory then do the counting

count() is normally faster when the data is not pre loaded
be careful not to count a queryset manager like categories.first().count() will prompt AttributeError; however, categories.first().subcategory_set.count() will tell you the number of its subcategories correctly and it's the same as len(categories.first().subcategory_set.all()), as you can see, ALL of the subcategories are read to count the length.

Django - Images:

ImageField

To add ImageField in a model and to load the image in the database onto your web:
ref: William Vincent
ref: GeeksforGeeks

uploaded images in wrong orientation:

photos taken by phones have this problem sometimes, the post by Giovanni solved the problem:

from django.db.models.signals import post_save
from django.dispatch import receiver
from PIL import Image, ExifTags
from django.db import models
import os

class Item(models.Model):
    name = ...

class ItemImage(models.Model):
    item = models.ForeignKey(Item)
    image = models.ImageField(upload_to='itemimages', null=True, blank=True)

# solves the problem that uploaded images are in wrong orientation
def rotate_image(filepath):
    try:
        image = Image.open(filepath)
        for orientation in ExifTags.TAGS.keys():
            if ExifTags.TAGS[orientation] == 'Orientation':
                break
        exif = dict(image._getexif().items())

        if exif[orientation] == 3:
            image = image.rotate(180, expand=True)
        elif exif[orientation] == 6:
            image = image.rotate(270, expand=True)
        elif exif[orientation] == 8:
            image = image.rotate(90, expand=True)
        image.save(filepath)
        image.close()
    except (AttributeError, KeyError, IndexError):
        # cases: image don't have getexif
        pass


@receiver(post_save, sender=ItemImage, dispatch_uid="update_image_item")
def update_image(sender, instance, **kwargs):
  if instance.image:
    BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
    fullpath = BASE_DIR + instanc.image.url
    rotate_image(fullpath)

furture reading: FIX UPLOADED IMAGES IN PYTHON WEBAPPS

image files in image field deleted but the file remains in the MEDIA foler

Cleanup Files (and Images) On Model Delete in Django

ref: Online Retail websites

asos: most referenced in item displaying style, categorisation filtering, most responsive
LOUIS VUITTON: most elegant in wording and minimalistic in styling
BOTTEGA VENETA: not responsive enough on laptop
ACCESSORIZE LONDON: not responsive enough on laptop
KUPIVIP: looks cheap

django-bootstrap4

containers, row and columns

containers and grid examples

col-sm-12: when page is 'small' width, occupy 12 columns

col-md-6: when page is 'medium' width, occupy 6 columns

col-lg-4: when page is 'large' width, occupy 4 columns

col-4: At ALL time, occupy 4 columns, unless other rules applied

col-md-auto: when page is 'medium' width, occupy whatever columns remain

Default grid settings: docs/4.4/layout/grid

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  xs: 0,      // Extra small screen / phone
  sm: 576px,  // Small screen / phone
  md: 768px,  // Medium screen / tablet
  lg: 992px,  // Large screen / desktop
  xl: 1200px  // Extra large screen / wide desktop
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Simply Python:

to iterate through a dictionary:

`dict.keys()` method and `dict.items()` method

# using dict.keys() method
D1 = {1:'a', 2:'b', 3:'c'} 
for key in D1.keys():
    print(k, D1[k])
# 1 a
# 2 b
# 3 c

# using dict.items() method
for key, value in D1.items()
    print(key, value)
# same result

React Django Integration

Peiwen Li — Sun, 15 May 2022 02:29:43 +0000

Make a Django app as usual

When working with React, Django mainly serves as an API. Django REST framework is a must.

Make a React app as usual

The react app can be created with create-react-app, it doesn't really matter. Whenever you need to make an API request to get data to render, fetch it from the API you just made with Django. Of course you can use dummy data if you start off with React instead of Django.

Integration

There should be at least 3 folders in your Django app:

project/project folder, meaning the one with settings.py
project/api folder, the one with the api models.py, serializers.py etc.
project/frontend folder, it's created by manage.py startapp frontend command and in this folder, more folders should be created:

srcfolder: contains an index.js file and all other react components in src/components folder
static/frontend folder: where main.js file lives after you run npm run build or npm run dev (depends on the script you write --> keep reading)
templates/frontend folder: where you store your django template index.html, remember you can use django template language/syntax in these html files

Reminders - Make sure:

you added frontend app in your settings.py
added {% load static %} and <script src="{% static 'frontend/main.js' %}></script> in index.html
added index function in your views.py file
added according url patters in your urls.py file
included url patterns in frontend/urls.py into project/urls.py file

Webpack configuration:

Assuming you've had Node.js installed

1. `package.json`

$ npm init -y

To create a package.json file with all your javascript dependencies, -y means to install the defaults and not answering any questions

Now the package.json file looks like this:

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2. install `webpack` and `webpack-cli`

$ npm i -D webpack webpack-cli

-D means to install as Development dependencies

Now a new key added to package.json file:

{
  // ...
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

3. install `babel` and `react preset`

$ npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react babel-plugin-transform-class-properties

@babel/core: the babel core package
babel-loader: helps to transpile the code
@babel/preset-env: compile down ES6 to be compatible with other versions
@babel/preset-react: react preset
babel-plugin-transform-class-properties: handles static class properties for ES2015 and ES2016

Now the package.json file looks like this:

{
  // ...added in step 1
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-class-properties": "^6.24.1"
    // ...added in step 2
  }
}

4. install `react` and `react-dom`

$ npm i react react-dom prop-types

prop-types: > Runtime type checking for React props and similar objects.

Now the package.json file looks like this:

{
  // ...added in stop 1,2,3
  "dependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

In my project, I also installed other dependencies: $ npm i react-router-dom react-markdown react-syntax-highlighter react-spring styled-components

And you might need to install more loaders for different file types:

$ npm i -D style-loader css-loader for css files
$ npm i -D file-loader url-loader for image files

5. create file: `.babelrc`

In order to use the previously installed presets and plugin, we need to create a .babelrc file.

~/project/frontend/.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["transform-class-properties"]
}

6. create file: `webpack.config.js`

Whenever you use webpack you'll have this config file. All we want to do here is to load babel-loader:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
};

What the object does:

test: a regular expression to look through all of the js files
exclude: exclude node_modules folder
use: the babel-loader to transpile our code

The above is the simplest webpack config file. In real cases, there must be more loaders installed, you can refer to the offical document for more information. At the end, my webpack.config.js becomes:

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
            },
          },
        ],
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

7. write `scripts` in `package.json`

To compile our React app which lives in the frontend app, some scripts have to be defined:

~/project/frontend/package.json

{
  // ...
  "scripts": {
    "dev": "webpack --mode development --watch ./src/index.js --output ./static/frontend/main.js",
    "build": "webpack --mode production ./src/index.js --output ./static/frontend/main.js"
  }
  // ...
}

The scripts defined above would enable us the following commands:

$ npm run dev: run webpack, use --mode development, --watch every updates in ./src/index.js file, and compile it to ./static/frontend/main.js file
$ npm run build: does a few extra thing for production

8. `$ npm run dev`

After this script is run, main.js file will be ready to use.

Notes on routing

In the MAIN urls.py file, include the frontend urls at then end
Use re_path() method in frontend urls.py file to define the url pattern
Use extra 'negative lookahead' to exclude api calls in order to avoid url clash between different django apps (in this case the frontend app and my api app which serves the api calls):re_path(r'^(?!api)(?:.*)/?$', views.index),

A remember of `npm` commands

npm uninstall <name> removes the module from node_modules but does not update package.json
npm uninstall <name> --save also removes it from dependencies in package.json
npm uninstall <name> --save-dev also removes it from devDependencies in package.json
npm uninstall -g <name> --save also removes it globally

React Django Deployment

Peiwen Li — Sun, 15 May 2022 02:29:15 +0000

This is a post about React Django Deployment on VPS Ubuntu LTS 18.04. I couldn't find any detailed guide or tutorials for newbies so I guess sharing my experience is the best I can do for now.

GitHub pull

Basically, everything is up in the repo. All you need is to pull/clone your repo into your Ubuntu directory. Install virtual environment for Django, run pip install -r requirements.txt, go to your frontend app where your frontend React files live and run npm install.

But before that you might need to install node.js and npm, which should have been a piece of cake however, Ubuntu didn't make it easy.

Install `node` and `npm` on Ubuntu 18.04

The node.js version on Ubuntu is quite old (8+). So follow these steps:

$ sodu apt install curl

install curl and download and execute the Node.js 10.x installer:

$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -

Then install the package. This will automatically install npm as well. Thanks for the post by Josh Tronic.

$ sudo apt install nodejs

Check your version by typing

$ node -v
v10.20.1
$ npm -v
6.14.4

Notes on deployment

migrattion: remember to ignore migration files when you FIRST deploy the Django app because if you do not and you've made many migrations locally for the mistakes you made during the development process: when deploying the app, migration changes can not be detected, hence no migrations will be made.
imported image urls: somehow after webpack compiles the js files to main.js, Django collectstatic command copies all the necessary static files into the static folder in root folder, HOWEVER, the url for those imported images (import BG from './assets/img/bg.jpg') in js files can not maintain the correct link (to http://www.domain.com/static/img/bg.jpg), instead, it links to http://www.domain.com/bg.jpg. I still can't figure out whether it's a webpack.config issue or python settings issue...
main.js is 700kb it's apparently too slow to load from a Russian VPS server to local (China), takes 60 seconds to load. However, it's 7 seconds to load from LA, US. I'll try to split the file (source)

An Intro to UmiJS

Peiwen Li — Sun, 15 May 2022 02:27:30 +0000

Why Umi?

Frontend development has been distinguished from backend for quite a while now. Many frameworks and plugins have been developed for frontend developemnt. Sometimes it's difficult to initialise a project because there are too many tools to choose from. To achieve this, UmiJS came to live.

Before everything else -

In order to use Umi (a frontend framework), you need to have NodeJS installed.

If you happened to be in China, you can install cnpm or tyarn for faster and safer package management:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
# OR
$ npm i yarn tyarn -g

Then, you can use cnpm/tyarn to install your dependencies.

Umi Initialisation: Global

You can install umi globally:

$ tyarn global add umi
# OR
$ cnpm install umi -g

Then, you can use 'umi generator' to fast start some pages:

generator command

  $ umi g page index

This will first generate a pages folder under current directory inside which a index.js file and a index,css file will be created automatically. Each js file in pages directory will be interpreted as a route. Normally, this command is run at the root directory of the project.

umi dev

  $ umi dev

This will start serving the pages on port 8000+.

Umi Initialisation: Scaffold

You can also initialise umi project with umi scaffold in a project folder

1. make a new directory

$ mkdir antd-testing
$ cd antd-testing

2. install umi

$ tyarn create @umijs/umi-app

Now the initialisation process has been complete, following up the configuration of the project.

3. Install Dependencies & Start

$ tyarn

Then:

$ tyarn start

PS: you can use 'Ant Design' default layout by installing pro-layout by running:

$ tyarn add @ant-design/pro-layout
# or
$ cnpm i @ant-design/pro-layout --save

Then, edit .umirc.ts file:

import { defineConfig } from 'umi'

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  layout: {}, // add this line
  routes: [{ path: '/', component: '@/pages/index' }],
})

Run script

Now you can run the following commands to start the server.

$ umi dev
# OR
$ cnpm run dev
# OR
$ tyarn start

Routing

Conventional Routing (File Routing) - 约定式路由

The folder structure, i.e. files under src/pages, represents the default routing.

Dynamic Routing: by convention, folder named [post] will become a variable in the routes like so /index/:post
Nested Routing: by convention, if _layout.tsx exists in a sub-folder of pages folder, _layout.tsx becomes the parent component of all the other components within the same folder
Overall layout: by convention, index.tsx file in src/layouts folder is the parent component of all the components in src/pages folder
404 Routing: by convention, 404.tsx in pages folder is the component renders 404 page
Extra Routing Attribute: before exporting a component, add this line HomePage.title = 'Home Page', now you can access an extra routing attribute title

Configured Routing - 配置式路由

If you are not satisfied with this routing method, configure your config/config.js/.umirc.ts file to appoint the routes yourself (i.e. configured routing (配置式路由) as opposed to the default conventional routing (约定式路由)):

export default {
  routes: [
    {
      exact: true,
      path: '/',
      component: '@pages/FirstPage', // relative path from `src` folder
      routes: [
        { path: '/list', component: 'List' },
        { path: '/listing', redirect: '/list' }, // redirecting to other routes
        { path: '/admin', component: 'Admin' },
      ],
    },
  ],
}

NOTES: @ represents ./src -- referring to the relative path; it is the same as .. as in ../Firstpage

history: to navigate

In Umi, there are two ways to direct user from one page to another: <Link to="/link_url">Somewhere</Link> component and history.push('/link_url'):

import { history } from 'umi'

// simply redirecting
history.push('/list')

// redirecting with variables
history.push('/list?a=b')
history.push({
  pathname: '/list',
  query: {
    a: 'b',
  },
})

// go back
history.goBack()

Build

$ cnpm run build

Run this code to build the dist folder. Do not forget to install serve globally.

$ cnpm install serve -g

Then you can serve the dist folder directly on port 5000:

$ serve ./dist

plugins

To check the list of plugins in an umi project:

$ umi plugin list

# showing the keys
$ umi plugin list --key

Once you know the key of a plugin, you can config the plugin in your config file:

export default {
  mock: false,
  // OR
  mock: { exclude: ['./foo'] },
}

Mock data

Mock data lives in /mock folder. A tipical mockup api.ts file looks like this:

export default {
  // 支持值为 Object 和 Array
  'GET /api/users': { users: [1, 2] },
  // GET 可忽略
  '/api/users/1': { id: 1 },
  // 支持自定义函数，API 参考 express@4
  'POST /api/users/create': (req, res) => {
    // 添加跨域请求头
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.end('ok')
  },
}

Now, if you visit /api/users, { users: [1, 2] } will be returned. GET key word can be omitted.

Install `Fira Code Font` in VSCode

Peiwen Li — Sun, 15 May 2022 02:23:15 +0000

"Fira Code" is a font which helps the readability of your code. This is how you install it on VSCode.

Firstly, install the font: You can run the following command on mac or visit this post on github for other OS.

brew tap homebrew/cask-fonts
brew cask install font-fira-code

Edit thesettings.json file in VSCode

//settings.json
{
  //...
  "editor.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",
  "editor.fontLigatures": true
}

Other ways and more options visit this post here

DEV Community: Peiwen Li

Configure A Fresh VPS To Host A Website

Firstly! SSH

NodeJS

nvm

node

MongoDB

Start and config

Security Checklist

IP Binding to create a replica backup

Git

Installation

Setup

Clone repo

Configure .env.local

Build

Nginx

1. Install, config firewall and enable nginx

2. Setting Up Server Blocks

3. Verify and reload nginx for it to take effect

PS. Do NOT forget

SSL

1. Install certbot and some preparation

2. Obtain the SSL/TLS Certificate

3. Setup Cronjob to Enable Automatic Certificate Renewal

Maintain

Useful articles 😄

Django Retail Website Deployment

Finally the Deployment on Ubuntu 18.04

Make sure:

Retail Website built with Django P5 (2020-02-16)

Django:

delete one table in django sqlite: SO comment

context processor

Bootstrap

to override default

General knowledge

url in css:

## Debug Toolbar

Retail Website built with Django P4 (2020-02-10)

Django:

template {{forloop.counter0}}

ForeignKey.on_delete

Google Font

Python

why @property decorator? SO question ref

VS Code

Retail Website built with Django P3 (2020-02-07)

Django:

in urls.py be careful which goes first

models - gender choices

A couple of things to notice in this example:

def get_absolute_url() in models.py

dynamic handling url: checkout this SO question I posted

get_queryset(self) and get_context_data(self, **kwargs) in ListView - CCBV

DetailView in CCBV

Retail Website built with Django P2 (2020-02-05)

Django:

Animate your element

after cloned a django project:

Django admin site

Retail Website built with Django P1 (2020-02-04)

Django:

templates builtins!!!

Class based views: Generic VIEWS

to iterate through a folder

filter in queryset

* filter()

* exclude()

categories.count() vs len(categories)

Django - Images:

ImageField

uploaded images in wrong orientation:

image files in image field deleted but the file remains in the MEDIA foler

ref: Online Retail websites

django-bootstrap4

containers, row and columns

Default grid settings: docs/4.4/layout/grid

Simply Python:

to iterate through a dictionary:

Firstly! `SSH`

`nvm`

`node`

Configure `.env.local`

1. Install `certbot` and some preparation

template `{{forloop.counter0}}`

in `urls.py` be careful which goes first

`def get_absolute_url()` in `models.py`

`get_queryset(self)` and `get_context_data(self, **kwargs)` in `ListView` - CCBV

`categories.count()` vs `len(categories)`

`dict.keys()` method and `dict.items()` method

1. `package.json`

2. install `webpack` and `webpack-cli`

3. install `babel` and `react preset`

4. install `react` and `react-dom`

5. create file: `.babelrc`

6. create file: `webpack.config.js`

7. write `scripts` in `package.json`

8. `$ npm run dev`

A remember of `npm` commands

Install `node` and `npm` on Ubuntu 18.04