-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #20 from callbacka/docs
docs: added readme, wireframes, db schema
- Loading branch information
Showing
5 changed files
with
50 additions
and
191 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,225 +1,84 @@ | ||
# Boilermaker | ||
# Codewords | ||
|
||
_Good things come in pairs_ | ||
* Grace Hopper 1909 - Capstone Project | ||
|
||
Looking to mix up a backend with `express`/`sequelize` and a frontend with | ||
`react`/`redux`? That's `boilermaker`! | ||
Visit [Codewords](https://codewords.herokuapp.com/) to check it out! | ||
|
||
Follow along with the boilerplate workshop to make your own! This canonical | ||
version can serve as a reference, or a starting point. For an in depth | ||
discussion into the code that makes up this repository, see the | ||
[Boilermaker Guided Tour][boilermaker-yt] | ||
## Table of Contents | ||
|
||
[boilermaker-yt]: https://www.youtube.com/playlist?list=PLx0iOsdUOUmn7D5XL4mRUftn8hvAJGs8H | ||
* [Codewords](#Codewords) | ||
* [Table of Contents](#Table-of-Contents) | ||
* [Minimum Viable Product](#Minimum-Viable-Product) | ||
* [Design Docs](#Design-Docs) | ||
* [Download](#Download) | ||
* [Team](#Team) | ||
* [Josie Beaudoin](#Josie-Beaudoin) | ||
* [Pauline Kong](#Pauline-Kong) | ||
* [Katey Phillips](#Katey-Phillips) | ||
* [Crispina Muriel](#Crispina-Muriel) | ||
* [Tech Stack](#Tech-Stack) | ||
|
||
## Setup | ||
## Minimum Viable Product | ||
|
||
To use this as boilerplate, you'll need to take the following steps: | ||
Codewords is a fullstack game based off of the boardgame Codenames, built using React/Redux, Socket.IO, and express.js/node.js. | ||
By the end of the production period, this app will, at a minimum, satisfy the following criteria: | ||
|
||
* Don't fork or clone this repo! Instead, create a new, empty | ||
directory on your machine and `git init` (or create an empty repo on | ||
Github and clone it to your local machine) | ||
* Run the following commands: | ||
* Hosting on Heroku | ||
* New game creation, log into game, and realtime chat | ||
* Game start with a unique player view of gameboard | ||
|
||
``` | ||
git remote add boilermaker https://github.com/FullstackAcademy/boilermaker.git | ||
git fetch boilermaker | ||
git merge boilermaker/master | ||
``` | ||
|
||
Why did we do that? Because every once in a while, `boilermaker` may | ||
be updated with additional features or bug fixes, and you can easily | ||
get those changes from now on by entering: | ||
|
||
``` | ||
git fetch boilermaker | ||
git merge boilermaker/master | ||
``` | ||
## Design Docs | ||
|
||
## Customize | ||
* [View Wireframes](./docs/wireframes) | ||
* [DB Schema](./docs/schema.md) | ||
* [Project Board](https://github.com/callbacka/codewords/projects/1) | ||
|
||
Now that you've got the code, follow these steps to get acclimated: | ||
## Download | ||
|
||
* Update project name and description in `package.json` and | ||
`.travis.yml` files | ||
* `npm install` | ||
* Create two postgres databases (`MY_APP_NAME` should match the `name` | ||
parameter in `package.json`): | ||
Step by step guide for downloading repo: | ||
|
||
``` | ||
export MY_APP_NAME=boilermaker | ||
createdb $MY_APP_NAME | ||
createdb $MY_APP_NAME-test | ||
``` | ||
|
||
* By default, running `npm test` will use `boilermaker-test`, while | ||
regular development uses `boilermaker` | ||
* Create a file called `secrets.js` in the project root | ||
* This file is listed in `.gitignore`, and will _only_ be required | ||
in your _development_ environment | ||
* Its purpose is to attach the secret environment variables that you | ||
will use while developing | ||
* However, it's **very** important that you **not** push it to | ||
Github! Otherwise, _prying eyes_ will find your secret API keys! | ||
* It might look like this: | ||
|
||
``` | ||
process.env.GOOGLE_CLIENT_ID = 'hush hush' | ||
process.env.GOOGLE_CLIENT_SECRET = 'pretty secret' | ||
process.env.GOOGLE_CALLBACK = '/auth/google/callback' | ||
``` | ||
|
||
### OAuth | ||
cd <directory you want to download to> | ||
* To use OAuth with Google, complete the steps above with a real client | ||
ID and client secret supplied from Google | ||
* You can get them from the [Google APIs dashboard][google-apis]. | ||
git clone https://github.com/callbacka/capstone.git | ||
[google-apis]: https://console.developers.google.com/apis/credentials | ||
cd capstone | ||
## Linting | ||
npm install | ||
Linters are fundamental to any project. They ensure that your code | ||
has a consistent style, which is critical to writing readable code. | ||
CREATEDB codewords | ||
Boilermaker comes with a working linter (ESLint, with | ||
`eslint-config-fullstack`) "out of the box." However, everyone has | ||
their own style, so we recommend that you and your team work out yours | ||
and stick to it. Any linter rule that you object to can be "turned | ||
off" in `.eslintrc.json`. You may also choose an entirely different | ||
config if you don't like ours: | ||
npm run start-dev | ||
* [Standard style guide](https://standardjs.com/) | ||
* [Airbnb style guide](https://github.com/airbnb/javascript) | ||
* [Google style guide](https://google.github.io/styleguide/jsguide.html) | ||
|
||
## Start | ||
|
||
Running `npm run start-dev` will make great things happen! | ||
|
||
If you want to run the server and/or `webpack` separately, you can also | ||
`npm run start-server` and `npm run build-client`. | ||
|
||
From there, just follow your bliss. | ||
|
||
## Deployment | ||
|
||
Ready to go world wide? Here's a guide to deployment! There are two | ||
supported ways to deploy in Boilermaker: | ||
|
||
* automatically, via continuous deployment with Travis. | ||
* "manually", from your local machine via the `deploy` script. | ||
Go to http://localhost:3000 to see Codewords! | ||
``` | ||
|
||
Either way, you'll need to set up your deployment server to start. | ||
The steps below are also covered in the CI/CD workshop. | ||
## Team | ||
|
||
### Heroku | ||
### `Josie Beaudoin` | ||
|
||
1. Set up the [Heroku command line tools][heroku-cli] | ||
2. `heroku login` | ||
3. Add a git remote for heroku: | ||
Github: https://github.com/jtbeaudoin | ||
|
||
[heroku-cli]: https://devcenter.heroku.com/articles/heroku-cli | ||
LinkedIn: https://www.linkedin.com/in/josiebeaudoin/ | ||
|
||
* **If you are creating a new app...** | ||
### `Pauline Kong` | ||
|
||
1. `heroku create` or `heroku create your-app-name` if you have a | ||
name in mind. | ||
2. `heroku addons:create heroku-postgresql:hobby-dev` to add | ||
("provision") a postgres database to your heroku dyno | ||
Github: https://github.com/p-kong | ||
|
||
* **If you already have a Heroku app...** | ||
LinkedIn: https://www.linkedin.com/in/pauline-k/ | ||
|
||
1. `heroku git:remote your-app-name` You'll need to be a | ||
collaborator on the app. | ||
### `Katey Phillips` | ||
|
||
### Travis | ||
Github: https://github.com/kateyphi | ||
|
||
_**NOTE**_ that this step assumes that Travis-CI is already testing your code. | ||
Continuous Integration is not about testing per se – it's about _continuously | ||
integrating_ your changes into the live application, instead of periodically | ||
_releasing_ new versions. CI tools can not only test your code, but then | ||
automatically deploy your app. This is known as Continuous Deployment. | ||
Boilermaker comes with a `.travis.yml` configuration almost ready for | ||
continuous deployment; follow these steps to the job. | ||
LinkedIn: https://www.linkedin.com/in/katherine-phillips-b8628250/ | ||
|
||
1. Run the following commands to create a new branch: | ||
### `Crispina Muriel` | ||
|
||
``` | ||
git checkout master | ||
git pull | ||
git checkout -b f/travis-deploy | ||
``` | ||
Github: https://github.com/crispinamuriel | ||
|
||
2. Run the following script to finish configuring `travis.yml` : | ||
`npm run heroku-token` | ||
This will use your `heroku` CLI (that you configured previously, if | ||
not then see [above](#Heroku)) to generate an authentication token. It | ||
will then use `openssl` to encrypt this token using a public key that | ||
Travis has generated for you. It will then update your `.travis.yml` | ||
file with the encrypted value to be sent with the `secure` key under | ||
the `api_key`. | ||
3. Run the following commands to commit these changes | ||
LinkedIn: https://www.linkedin.com/in/crispinamuriel/ | ||
|
||
``` | ||
git add .travis.yml | ||
git commit -m 'travis: activate deployment' | ||
git push -u origin f/travis-deploy | ||
``` | ||
## Tech Stack | ||
|
||
4. Make a Pull Request for the new branch, get it approved, and merge it into | ||
the master branch. | ||
|
||
_**NOTE**_ that this script depends on your local `origin` Git remote matching | ||
your GitHub URL, and your local `heroku` remote matching the name of your | ||
Heroku app. This is only an issue if you rename your GitHub organization, | ||
repository name or Heroku app name. You can update these values using | ||
`git remote` and its related commands. | ||
|
||
#### Travis CLI | ||
|
||
There is a procedure to complete the above steps by installing the official | ||
[Travis CLI tools][travis-cli]. This requires a recent Ruby, but this step | ||
should not be, strictly speaking, necessary. Only explore this option when the | ||
above has failed. | ||
|
||
[travis-cli]: https://github.com/travis-ci/travis.rb#installation | ||
|
||
That's it! From now on, whenever `master` is updated on GitHub, Travis | ||
will automatically push the app to Heroku for you. | ||
|
||
### Cody's own deploy script | ||
|
||
Your local copy of the application can be pushed up to Heroku at will, | ||
using Boilermaker's handy deployment script: | ||
|
||
1. Make sure that all your work is fully committed and merged into your | ||
master branch on Github. | ||
2. If you currently have an existing branch called "deploy", delete | ||
it now (`git branch -d deploy`). We will use a dummy branch | ||
with the name `deploy` (see below), so and the script below will error if a | ||
branch with that name already exists. | ||
3. `npm run deploy` | ||
_ this will cause the following commands to happen in order: | ||
_ `git checkout -b deploy`: checks out a new branch called | ||
`deploy`. Note that the name `deploy` here is not magical, but it needs | ||
to match the name of the branch we specify when we push to our `heroku` | ||
remote. | ||
_ `webpack -p`: webpack will run in "production mode" | ||
_ `git add -f public/bundle.js public/bundle.js.map`: "force" add | ||
these files which are listed in `.gitignore`. | ||
_ `git commit --allow-empty -m 'Deploying'`: create a commit, even | ||
if nothing changed | ||
_ `git push --force heroku deploy:master`: push your local | ||
`deploy` branch to the `master` branch on `heroku` | ||
_ `git checkout master`: return to your master branch | ||
_ `git branch -D deploy`: remove the deploy branch | ||
|
||
Now, you should be deployed! | ||
|
||
Why do all of these steps? The big reason is because we don't want our | ||
production server to be cluttered up with dev dependencies like | ||
`webpack`, but at the same time we don't want our development | ||
git-tracking to be cluttered with production build files like | ||
`bundle.js`! By doing these steps, we make sure our development and | ||
production environments both stay nice and clean! | ||
Technologies used in this project: Javascript, Node.js, Express.js, React.js, Redux.js, Sequelize.js, HTML, CSS, PostgreSQL, Socket.IO |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.