----------------------------------- Getting everything up and running ----------------------------------- 1. Copy .env.example to .env 2. Add your email and Stripe credentials to your .env file. (use your instance/settings.py file from section 20's code as a reference) 3. Open a terminal configured to run Docker and then run: docker-compose down -v docker-compose build --no-cache docker-compose up docker-compose exec web snakeeyes db reset --with-testdb docker-compose exec web snakeeyes stripe sync-plans docker-compose exec web snakeeyes add all docker-compose exec web snakeeyes flake8 docker-compose exec web snakeeyes test ----------------------------------- Reference links ----------------------------------- https://webpack.js.org/ https://getbootstrap.com/ https://www.makeuseof.com/tag/es6-javascript-programmers-need-know/ https://sass-lang.com/ https://fontawesome.com/icons?d=gallery&m=free https://nickjanetakis.com/blog/using-tmux-sessions-windows-panes-and-vim-buffers-together https://www.youtube.com/c/nickjanetakis https://www.sassmeister.com/ https://www.npmjs.com/ https://nickjanetakis.com/blog/resize-and-see-how-big-any-window-is-using-a-free-tool-called-sizer https://www.youtube.com/watch?v=kTcRRaXV-fg (Who's on First) https://flatpickr.js.org/examples/ https://nickjanetakis.com/blog/docoker-tip-43-using-the-docker-compose-config-command https://nodejs.org/en/about/releases/ https://uptimerobot.com/ ----------------------------------- Reference commands ----------------------------------- git diff HEAD~1 -- '*.py' docker-compose run webpack yarn install ----------------------------------- Video time stamps ----------------------------------- [Video #1: Webpack Benefits, Bootstrap v4 and Going over the SCSS / ES6 JS] 2:32 -- Pain points of using Bootstrap v3 and not using Webpack 7:59 -- Benefits of using Webpack, ES6 JS, SCSS and Bootstrap v4 13:53 -- The agenda for the next few hours 15:06 -- Getting set up by running all of the Docker Compose commands 18:18 -- Big changes to the public/ directory 21:03 -- Taking a look at the new assets/ directory 21:35 -- Checking out the new SCSS (SASS) files for our stylesheets 34:35 -- Taking a closer look at SCSS imports and 3rd party JavaScript libraries 46:55 -- Checking out a few new ES6 JavaScript modules 51:30 -- Going over a bunch of new web page UI enhancements 1:09:55 -- One strategy for upgrading your code base to Bootstrap v4 1:17:04 -- Back to looking at the new ES6 JavaScript modules 1:44:50 -- Checking out the new flatpickr datatime picker 1:54:03 -- Finishing up the rest of the ES6 JavaScript modules [Video #2: Back-End Changes, Docker Updates and the Webpack Config] 1:14 -- Making the money library a little bit more robust 2:40 -- Making coupons unique at the WTForms level for the admin coupon form 6:39 -- Protecting against Stripe charges that are less than 50 cents 10:09 -- Enforcing that coupons are uppercase server side 11:12 -- Fixing a $0 invoice bug and reducing API calls to Stripe when invoicing 14:28 -- Enforcing that coupons exist server side before contacting Stripe 21:44 -- Swapping the decorator order when updating subscription plans 22:50 -- Changing the Flash message when updating subscriptions during an error 23:39 -- Updating each Stripe plan's statement descriptor 25:53 -- Going over what a Docker Compose override file is 32:38 -- Going into detail on Docker multi-stage builds and how it works 41:28 -- Going over the docker-entrypoint file and using multi-stage copies 46:40 -- Going over the Yarn lock file and installing new JS packages 54:30 -- Going over how to deal with static images, HTML files and the robots.txt 59:56 -- Going over the Webpack config file and debugging JS errors in development