5e Spellbook

Simple application for referencing spells for tabletop gamging using ReactJS and Webpack.

Dependencies

• NodeJS v.8+
• ReactJS

It is recommended that you use a package manager like Homebrew or Chocolatey to install Node on your machine.

Installation

Once you have installed the above dependencies:

1. Clone this repository into your development folder
2. Navigate to the root of the project folder and run npm install from the command line to begin installing dependencies.

Running the Project

Once the project is installed, several commands can be issued from the root of the project folder:

npm run start: Runs the default task. This builds the project with source maps from the app folder into the build folder, spawns a local Webpack development server, opens a new browser with the website at http://localhost:8080, and listens for subsequent changes. When you edit and save a new file, Node will recompile accordingly and refresh your browser window with the latest changes automatically.

Project Architecture

Folder Structure

• app/ : ALL work should be done in the app folder. This is where your website's source code lives.
• build/ : When running the node scripts, files from app are compiled into build. If you work out of the build folder, your work will be overwritten and you will be sad. Don't work in the build folder.
• node_modules/ : The folder where node modules are installed when you run npm install.
• .babelrc: The configuration file for ES6 presets.
• .csscomb.json: The configuration file that can be used with CSSComb or similar, editor specific plugins to automatically sort and format CSS declarations.
• .eslintrc : The configuration file to enforce syntactical rules for JS linting.
• .jsbeautifyrc : The configuration file that can be used with Sublime Text's HTML-CSS-JS Prettify and Atom's atom-beautify plugins. Allows you to format your HTML, CSS, JavaScript, and JSON code.
• .scss-lint.yml: The configuration file for "linting" Sass/SCSS files.
• package.json : Contains the project's dependencies. Modules specified in this files are installed into node_modules when you run npm install.
• README.md : You're reading it!

Common issues

When I run npm run start, the command line errors out. WTF?

Make sure you've installed ALL dependencies specified above. Also, make sure you have the most up up-to-date version of Node.

If you continue to have issues, especially after updating to a newer version of Node, delete the node_modules directory and package-lock.json file and re-run npm install.

Webpack is not picking up on changes that I made to a file? WTF?

The watch task only picks up on changes made to files that existed when the task was started. When you add any new file to the app folder, you must stop and restart Webpack.