====== Django + React ======

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


===== - Create new app =====
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 app_name sub_folder/app_name can be used to create app in specific available folder. However, if the sub_folder is already added to syspath (manage.py), python understands that the module is already exist. So we have to move the app folder manually.

==== - Migrate new app ====

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

==== - Creating super user ====
    
    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).

==== - Develope the backend app ====
  * 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.

=== - Testing the app ===

    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/

===== - Develop frontend =====
==== - Build system ====
  * 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/

=== - Gulp-Browserify (not used) ===
    npm install --save-dev gulp-babel @babel/core @babel/preset-env @babel/preset-react @babel/preset-es2015 
    
    https://gist.github.com/thuydang/310109b0fdd7ca0a1a3546b8beecc06e

=== - Content Security Policy ===
  * 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.
=== - Gulp-Rollup-React ===
  * 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).


=== - Handle css, fonts in node_modules ===
  * 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/


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

==== - Next Steps ====

See more development tips: http://localhost/~dang/wiki/doku.php?id=projects:maxo36:3_reactjs_development
===== - Troubleshooting =====
==== - node container not starting ====
<code>
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

</code>

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
    
===== - Further learning material =====
  * https://engineering.mixmax.com/blog/rollup-externals/
  *