Developers

Developers

If you would like to start a development PyTA website with refreshes automatically whenever you change a file inside the pyta or website repos, follow these instructions:

1. Create a repository:

   mkdir python-ta
   cd python-ta
   git init
   

2. Add pyta and website repos as submodules:

   git submodule add [email protected]:{your username}/pyta.git
   git submodule add [email protected]:{your username}/website.git
   

3. Create package.json, bs-config.json, and nodemon.json files inside your python-ta repo:

   package.json

   {
     "name": "python-ta",
     "version": "1.0.0",
     "description": "Repository which holds PyTA website devlopment",
     "main": "app.js",
     "scripts": {
       "build": "python build.py",
       "lint": "remark index.md -f > /dev/null",
       "checklinks": "linkchecker -v --check-extern gen/index.html",
       "test": "npm run lint && npm run checklinks",
       "dev": "concurrently --kill-others \"nodemon\" \"browser-sync start -c bs-config.js\"",
       "deploy": "gh-pages -d gen"
     },
     "repository": {
       "type": "git",
       "url": "git+https://github.com/{your username}/python-ta.git"
     },
     "author": "{your username}",
     "license": "ISC",
     "bugs": {
       "url": "https://github.com/{your username}/python-ta/issues"
     },
     "homepage": "https://www.cs.toronto.edu/~david/pyta/",
     "devDependencies": {
       "browser-sync": "^2.18.12",
       "concurrently": "^3.5.0",
       "gh-pages": "^1.0.0",
       "nodemon": "^1.11.0",
       "remark": "^8.0.0",
       "remark-cli": "^4.0.0",
       "remark-lint": "^6.0.0",
       "remark-preset-lint-recommended": "^3.0.0"
     }
   }
   

   bs-config.json

   module.exports = {
       "ui": {
           "port": 3002,
           "weinre": {
               "port": 8080
           }
       },
       "files": false,
       "watchEvents": [
           "change"
       ],
       "watchOptions": {
           "ignoreInitial": true
       },
       "server": {
           baseDir: "gen",
           index: "index.html"
       },
       "proxy": false,
       "port": 3001,
       "middleware": false,
       "serveStatic": [],
       "ghostMode": {
           "clicks": true,
           "scroll": true,
           "location": true,
           "forms": {
               "submit": true,
               "inputs": true,
               "toggles": true
           }
       },
       "logLevel": "info",
       "logPrefix": "BS",
       "logConnections": false,
       "logFileChanges": true,
       "logSnippet": true,
       "rewriteRules": [],
       "open": "local",
       "browser": "default",
       "cors": false,
       "xip": false,
       "hostnameSuffix": false,
       "reloadOnRestart": false,
       "notify": true,
       "scrollProportionally": true,
       "scrollThrottle": 0,
       "scrollRestoreTechnique": "window.name",
       "scrollElements": [],
       "scrollElementMapping": [],
       "reloadDelay": 0,
       "reloadDebounce": 0,
       "reloadThrottle": 0,
       "plugins": [],
       "injectChanges": true,
       "startPath": null,
       "minify": true,
       "host": null,
       "localOnly": false,
       "codeSync": true,
       "timestamps": true,
       "clientEvents": [
           "scroll",
           "scroll:element",
           "input:text",
           "input:toggles",
           "form:submit",
           "form:reset",
           "click"
       ],
       "socket": {
           "socketIoOptions": {
               "log": false
           },
           "socketIoClientConfig": {
               "reconnectionAttempts": 50
           },
           "path": "/browser-sync/socket.io",
           "clientPath": "/browser-sync",
           "namespace": "/browser-sync",
           "clients": {
               "heartbeatTimeout": 5000
           }
       },
       "tagNames": {
           "less": "link",
           "scss": "link",
           "css": "link",
           "jpg": "img",
           "jpeg": "img",
           "png": "img",
           "svg": "img",
           "gif": "img",
           "js": "script"
       }
   };
   

   nodemon.json

   {
     "verbose": true,
     "watch": [
       ".",
       "../",
       "../pyta"
     ],
     "ignore": [
       ".git",
       "node_modules",
       "gen"
     ],
     "ext": "md,py,css,js",
     "exec": "python build.py && sleep 1 && browser-sync reload -p 3001"
   }
   

4. Start the development server:

   npm install
   npm run dev
   

5. Havigate to http://localhost:3001 and you should see your development server running. It should refresh automatically when you change any file with md,py,css,js extensions inside the pyta or website repositories.

See https://github.com/ostrokach/python-ta for an example.