Skip to content
Boilerplate app to get you up and running with Hapi, HTTP2, Web Socket and React.
JavaScript CSS Shell
Branch: master
Clone or download
Latest commit 0745328 Mar 26, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea Started work on storybook examples. Dec 26, 2017
.storybook Requiring correct packages to support React fragments. Also, overridi… Jan 7, 2018
.vscode Removing references to mocha. Dec 24, 2017
src Fixed failing unit tests. Had to not use a dedicated babelrc file and… Jan 7, 2018
ssl Fixing codacy issues Dec 16, 2017
stories Requiring correct packages to support React fragments. Also, overridi… Jan 7, 2018
test changes Jan 7, 2018
.eslintrc.json Fixing some codefactor issues Dec 28, 2017
.gitignore Keep public folder Jan 2, 2018
.nvmrc Upgraded to Node 8.9.4 and using my own image with node-sass already … Jan 3, 2018
.scss-lint.yml Good progress with moving from standard CSS to SCSS. Jan 1, 2018
.travis.yml Build travis on 8.9.4 Jan 13, 2018
CHANGELOG.md Requiring correct packages to support React fragments. Also, overridi… Jan 7, 2018
CONTRIBUTING.md Adding a code of conduct to the repo. Jan 16, 2018
Dockerfile Missing server prod config Jan 3, 2018
FRAGMENT_WORK Notes for a blog article Jan 13, 2018
LICENSE Initial commit Oct 10, 2017
README.md Chrome link Mar 26, 2018
code-of-conduct.md Adding a code of conduct to the repo. Jan 16, 2018
docker-compose.yml Let's see if this builds on Travis and deploys to Heroku. Nov 30, 2017
features.md Removing references to mocha. Dec 24, 2017
jest.config.js Fixed failing unit tests. Had to not use a dedicated babelrc file and… Jan 7, 2018
jest.transform.js Fixing issues for fragment support Jan 13, 2018
package-lock.json Fixing issues for fragment support Jan 13, 2018
package.json Fixing issues for fragment support Jan 13, 2018
pre-commit made a decision not to test connected components. Dec 21, 2017
todo.md Removing references to mocha. Dec 24, 2017
webpack.client.config.js Fixed failing unit tests. Had to not use a dedicated babelrc file and… Jan 7, 2018
webpack.client.prod.config.js Fixed scss linting warnings. Also, minified CSS for production build. Jan 2, 2018
webpack.server.config.js Fixing issues for fragment support Jan 13, 2018
webpack.server.prod.config.js Fixed scss linting warnings. Also, minified CSS for production build. Jan 2, 2018

README.md

hapi-socket-react-boilerplate

Build Status Coverage Status Known Vulnerabilities dependencies Status devDependencies Status Codacy Badge CodeFactor code style: prettier

Boilerplate app to get you up and running with Hapi, HTTP/2, Web Sockets and React.

Demo can be found here

Project Overview 🤓

I've written a blog article detailing the steps I've gone through to create. Also the good 😇, the bad 👿 and the ugly ☠️.

Get it running locally 🏌️

Assuming you are on Mac OS 🍏 and Node 8.9.4 or higher installed. Not tested on any other OS.

Creating Local SSL Certificate Overview 🔒

As this boilerplate uses HTTPS, you will need to create a local SSL (Secure Socket Layer) certificate and key. If you are not familar with creating an SSL certificate on your Mac, plaese look here.

By following the below steps you will run an NPM script npm run createCertificate, which will create an SSL certficate and key for you. It will also move them to the correct folder, to make life as painless as possible for you. In the project there is a folder named ssl, in here I have created a shell script named createCerts.sh. This is where the magic (told myself this) happens. You are more than welcome to delve in here and see the dark arts of shell scripting if you are unfamilar with this.

Run project natively (on Mac)

In the terminal run the following: -

  • git clone git@github.com:blairg/hapi-socket-react-boilerplate.git
  • cd hapi-socket-react-boilerplate
  • Create certificate for HTTPS npm run createCertificate. Fill in the questions when asked. Can be fictitious values.
  • npm i
  • npm run dev
  • In your browser go to https://localhost:3000/index (add security exception rule for local cert). Look here for Chrome chrome://flags/#allow-insecure-localhost.
  • 👏

Run with docker 🐳

Ensure you have created the cert and key as per the previous step.

Assuming you have cloned the repo and installed the packages. Also, that you have Docker and Docker Compose installed too. In the terminal do the following, in the root of the directory you cloned the repo too: -

  • Create certificate for HTTPS npm run createCertificate. Details are all optional.
  • Create an .env file, this can be blank as the Dockerfile has default values set.
  • docker-compose up
  • In your browser go to https://localhost:3000/index (add security exception rule for local cert).

Running tests 👩‍🔬👨‍🔬

Following options: -

  • To just run the unit tests -> npm run test
  • To run tests with coverage (Istanbul) -> npm run test:coverage. This will output to coverage folder. Locate the index.html in here and open in your browser.
  • To watch tests for changes -> npm run test:watch
  • In VS Code you have 2 debug options avaiable for tests. Unit Tests will execute tests. Tests with Coverage, will run tests with coverage.

Storybook 📚

For more info

  • In the terminal run -> npm run storybook
  • Build Storybook as a static site -> npm run storybook:build

Linting 🔍

  • In the terminal run ESLint with -> npm run lint

Prettier 🙏

  • In the terminal run Prettier with -> npm run pretty

Issues 🤒

If you find anything wrong with this repo post them here please.

Contributing

Refer to CONTRIBUTING.md in the root of this repo.

Todo ✍️

I've left myself some work to do. Look in todo.md.

You can’t perform that action at this time.