This repository is the full-stack web app for Cuttle, the pvp card game. The client (front-end) is a Single Page Application (SPA) built in VueJs using Vuetify. The server (back-end) that maintains the API is a Node.js application build with Sails.Js. The application is tested end-to-end using Cypress.
To play the game you will need to boot both the front & back end servers, then navigate to localhost:8080 in your browser of choice.
Learn how to play the game by reading the Game Rules.
Please see our Contribution Guide on how you can get started.
nodeJs lets you create & run web servers in javascript (along with other fancy system-level stuff not needed for this project). Both the client and server depend on node as the main system-wide dependency. The download comes with npm (node package manager) which you'll use to install the project-specific dependencies.
Currently version 16.xx.xx of node is required as this is the latest version compatible with this project. You can download node 16 here or use nvm or nvm-windows to manage multiple node versions (recommended for longer term nodejs development).
NOTE When running on your local computer, signup/login only stores credentials on your computer and in memory. Shutting down the server wipes the in-memory database along with all game & account data.
git clone https://github.com/cuttle-cards/cuttle
Or Download as .zip
Open your shell/terminal of choice, cd into the root folder of this repo and run
npm ci
NOTE ci (as opposed to install) is a 'clean install' which ensures versions exactly match package-lock.json).
You can simultaneously run the server on localhost:1337 and the client on localhost:8080 with one command:
npm run start:dev
This will also automatically open up [Vue Devtools]. Alternatively, you can run them independantly with separate commands.
npm run start:server
Open another shell/terminal in the root folder of this repo and run
npm run start:client
to start the client on localhost:8080
Navigate to localhost:8080 in your browser of choice.
You can shut down the servers by hitting ctrl + c several times from the terminal windows they are running in. Shut down both servers to completely delete all game & account data.
To utilize Vue Devtools, you can run
npm run start:devtools
Only dev builds include the Vue Devtools via ENABLE_VUE_DEVTOOLS=true. The two scripts that currently support Vue Devtool usage are npm run start:dev and npm run e2e:gui.
From the root directory of the repo, you can run
npm run prod
to compile the Vue SPA into the assets directory, which will be statically served by the server (sails backend) at the same port on which it is running to support the API. You can now shut down the client and view the applicaion as its built for production at localhost:1337 (default port for sails).
If you just want to generate the production build, you can run
npm run build
While the application is running, (server + client) you can run
npm run e2e:client
to run the entire suite of end-to-end cypress tests against the client running at localhost:8080. This will execute the tests headlessly and output the results in your terminal.
You can also use
npm run e2e:gui
to open the cypress UI, which is useful for executing a single test file if you are for example developing a new feature or a fix and want to focus on that aspect of the application (and see how it performs). This is very helpful for localhost development.
Lastly, you can run
npm run e2e:server
to execute the entire test suite headlessly against localhost:1337, which you can use to test the last-built version of the application. This is effectively what is done in CI when a pull request is submitted agains the main branch of this repository.
NOTE you should run npm run build (see above) before this command so that the server (backend) serves the most up-to-date version of the client.
You can utilize the node debugger in VSCode to debug the backend server.
To do so, start the backend server with:
npm run start:dev
or
npm run start:server
Then, hit cmd+shift+p or ctrl+shift+p, and then enter Debug: Attach to node process in the top window opened, to select the process you want to watch.
You will be able to utilize many standard debugging features, such as setting breakpoints by clicking line numbers, stepping in and over function, and watching variables. For details, please refer to the documentation.
Format the project with
npm run lint:fix
and use
npm run lint
to check the formatting without autofixing problems. (This is what's run in CI when a PR is opened against the main branch).
Run Storybook locally with
npm run storybook
It will start automatically on localhost:6006 and open a new tab in your browser.
We have a very active Discord community and currently run 2 events per week.
- Wednesday Night Cuttle at 8:30pm EST
- Thursday Lunch Cuttle at 12:00pm EST
