Web Assignment Starter
A template for bootstrapping a web assignment.
Clone or download this repo and install all dependencies:
Now you can write your files and tests under
src/, and modify
with your assignment instructions for students.
The project is pre-configured with the following settings and tools:
src/. See .eslintrc.js for configuration.
- stylelint for checking CSS linting issues in
src/. See .stylelintrc.js for configuration.
src/. See .prettierrc.js for configuration.
There is also a .vscode directory, which includes recommended extensions and project settings, to help use the above.
There are a number of npm scripts to automate tasks, including:
npm run eslintto run eslint
npm run prettierto run prettier
npm run stylelintto run stylelint
npm testto run Jest
npm test-watchto run Jest in watch mode (automatically re-runs tests)
When running tests, if you want to run a single test, pass extra filename info:
npm test file1
See package.json for a complete list.
Unit tests can be added under
src/* and be named using the
.test.js suffix. For example, to write tests for
See the Jest Getting Started docs for info on how to write tests.
Instructions for Students
A student using this project would need to do the following:
npm install ...write code in src/... npm test ...fix bugs in their code... npm test ...repeat as necessary... npm run prepare-submission
npm run prepare-submission will do the following:
- create a
submission/directory, deleting an existing one if present
prettieron the source
- copy all files under
submission/package.json(i.e., so you can re-setup the project and run tests again if necessary).
eslintand write the output to
stylelintand write the output to
npm testand write the output to
- zip the
The student can upload
submission.zip to Blackboard for submission.
Instructions for Faculty
When a student submits a
submission.zip it will contain output from running all the commands listed above. See
submission/*.log to get details on warnings or failures caused by running one of the commands (e.g., failed tests).
If you need to re-run the tests to confirm something, use
npm install first to regenerate
node_modules/. Some students don't follow instructions, and zip the entire assignment folder, which will include
node_modules/ and be huge. Try to educate them on why this is a bad idea (large file size, specific to an OS) and how to avoid (i.e., generate again using
Once you've written your code and tests in
src/ you can create an assignment
zip file (i.e.,
assignment.zip) using the
npm run create-assignment
$ npm run create-assignment > email@example.com clean /assignment/package.json > rimraf assignment assignment.pdf assignment.zip > firstname.lastname@example.org create-assignment-root /assignment/package.json > mkdirp assignment > email@example.com create-assignment-pdf /assignment/package.json > markdown-pdf -o assignment.pdf README.md > firstname.lastname@example.org create-assignment-files /assignment/package.json > copyfiles ./.vscode/**/* ./src/**/* ./.eslintrc.js ./.npmrc ./.prettierrc.js ./stylelintrc.js package.json assignment.pdf assignment > email@example.com create-assignment-zip /assignment/package.json > bestzip assignment.zip assignment/ Writing assignment/ to assignment.zip... zipped!
This command will do a number of things, including generate a PDF from your
README.md (see below for more details), and also add the following
This should be everything needed for a student to install and work on the
assignment. If you want to include other files, modify
NOTE: make sure you remember to remove any implementation code you wrote in
Converting README.md to assignment.pdf
Whatever you include in README.md will automatically be turned into
assignment.pdf when the command
npm run create-assignment-pdf is run. This
is useful, since it lets you write your instructions as Markdown, but generate
a PDF to give the students.
npm run create-assignment-pdf command is run automatically when you run
npm run create-assignment.