Django + React

• https://scotch.io/tutorials/build-a-to-do-application-using-django-and-react

Activate virtualenv or pipenv (TODO).

pip install pipenv
pipenv shell

Create new app in existing project

# pipenv install django
# django-admin startproject backend
cd project
python manage.py startapp todo

We may want to move the app to certain subfolder:

  python manage.py startapp service_listing
  mv service_listing django_maxo36/    
  

Note: startapp appname subfolder/appname can be used to create app in specific available folder. However, if the subfolder is already added to syspath (manage.py), python understands that the module is already exist. So we have to move the app folder manually.

Add app to installed APPs

  LOCAL_APPS = [ 
  "django_maxo36.users.apps.UsersConfig",
  "django_maxo36.service_listing.apps.ServiceListingConfig",
  # Your stuff: custom apps go here
  ]
  # https://docs.djangoproject.com/en/dev/ref/settings/#installed-apps
  INSTALLED_APPS = DJANGO_APPS + THIRD_PARTY_APPS + LOCAL_APPS

Run migration in virtualenv:

  
  python manage.py migrate
  python manage.py runserver
  

As we are developing with docker (django cookie-cutter):

  docker-compose -f local.yml run --rm django python manage.py makemigrations service_listing
  docker-compose -f local.yml run --rm django python manage.py migrate service_listing

  
  docker-compose -f local.yml run --rm django python manage.py createsuperuser
  

We need to activate the account at the first login. If Mailhog is configured we can do it as follow.

When developing locally you can go with MailHog for email testing provided use_mailhog was set to y on setup. To proceed,

make sure mailhog container is up and running; Open http://http://192.168.39.208:8025. (The IP of host node).

• https://www.fullstackpython.com/django.html
• https://simpleisbetterthancomplex.com/tutorial/2018/11/22/how-to-implement-token-authentication-using-django-rest-framework.html

Add code for the app TODO link github.

curl http://192.168.39.208:3000/api/users/

Login as admin and create auth-token.

Get the token:

  curl -X POST http://192.168.39.208:8000/auth-token/ -d "username=admin&password=admin"
  {"token":"d04508e7c5d70e8ac804af8041f8669af5b40d86"}

User auth-token to request:

  curl http://192.168.39.208:3000/api/users/ -H 'Authorization: Token d04508e7c5d70e8ac804af8041f8669af5b40d86' 
 
  [{"username":"admin","email":"admin@me.com","name":"","url":"http://192.168.39.208:3000/api/users/admin/"}]
  

Brows API: http://192.168.39.208:3000/api/servicelisting/

• https://www.toptal.com/front-end/webpack-browserify-gulp-which-is-better
• https://adapty.com/blog/bundling-react-with-gulp/
• This: http://recapnotes.com/react-gulp-existing-project/

  npm install --save-dev gulp-babel @babel/core @babel/preset-env @babel/preset-react @babel/preset-es2015 
  
  https://gist.github.com/thuydang/310109b0fdd7ca0a1a3546b8beecc06e

• https://60devs.com/using-content-security-policy.html
• https://github.com/BrowserSync/browser-sync/issues/1241
• Understanding: http://egorsmirnov.me/2015/05/25/browserify-babelify-and-es6.html
• issues:
  • https://stackoverflow.com/questions/60101958/how-to-solve-gulp-source-type-module-parse-error

The build tools should bundle all resources and publish them. This will work with “self” CSP. A nice tool would create and inject nonce automatically. However, we haven't found one yet.

• https://starbeamrainbowlabs.com/blog/article.php?article=posts/337-20190121-Rollup.html
• https://risanb.com/code/bundling-your-javascript-library-with-rollup/#es-output
• https://florian.ec/blog/rollup-scss-css-modules/
• https://engineering.mixmax.com/blog/rollup-externals/
• Maybe useful:
  • https://github.com/borodean/postcss-assets
  • https://shipshape.io/blog/converting-a-webpack-build-to-rollup/#configfiles

We will use rollup rather than browserify because TODO (https://github.com/eslint/eslint/issues/9478).

• https://stackoverflow.com/questions/21406538/how-to-use-font-awesome-icons-from-node-modules
• https://blog.yipl.com.np/css-modules-with-react-the-complete-guide-a98737f79c7c
• https://css-tricks.com/bridging-the-gap-between-css-and-javascript-css-modules-postcss-and-the-future-of-css/

• https://www.javascriptstuff.com/react-starter-projects/
• https://medium.com/grandata-engineering/how-i-set-up-a-react-component-library-with-rollup-be6ccb700333

See more development tips: http://localhost/~dang/wiki/doku.php?id=projects:maxo36:3_reactjs_development

node            | Killed
node            | npm ERR! code ELIFECYCLE
node            | npm ERR! errno 137
node            | npm ERR! django_maxo36@0.1.0 dev: `gulp`
node            | npm ERR! Exit status 137

This error may be caused by lack of memory. Increase ram, e.g., in minikube.

Try docker-compose up until it is stable.

Check memory usage:

  docker stats --all
  docker stats node
  

• https://engineering.mixmax.com/blog/rollup-externals/