Shoutit web app

Setup

1. Make sure to have node.js 4+ installed with node --version.

$ git clone git@github.com:shoutit/shoutit-web.git
$ cd shoutit-web
$ npm install

2. Install and run a redis server to enable authentication

$ brew install redis
$ redis-server # Run redis in background

Running the app

The app must be built before starting:

$ npm run build # build the app
$ npm start     # start the server

Environment variables (outdated)

variable	description	default
NODE_ENV	Either production or development	development
SHOUTIT_ENV	Load a preset of configuration settings from the relative env. Possible values are development, stage, beta or live.	development
HOST	The server's host name.	localhost
PORT	The server's port	3000
REDIS_HOST	The host for the redis server	tcp://localhost:6379
SHOUTIT_S3_SECRET_KEY	Required to upload data to S3
SHOUTIT_S3_ACCESS_KEY	Required to upload data to S3
BASIC_AUTH_USERNAME	Enable basic HTTP auth
BASIC_AUTH_PASSWORD	Enable basic HTTP auth
SENTRY_DSN	Enable basic HTTP auth
NEW_RELIC_LICENSE_KEY	The New Relic application license key
NEW_RELIC_APP_NAME	The New Relic application name
CURRENT_TAG	the current git versioning info. Default is set in index.js.

Starting the docker container

Pulling the container from Docker Hub

# Pull the container from Docker Hub
$ docker pull shoutit/shoutit-web:develop

# Run the container
$ docker run -e PORT=8080 -p 8080:8080 -it shoutit/shoutit-web:develop

Then open http://localhost:8080.

Using the container from the current machine

# Build the container
$ docker build .

# Run the container
$ docker run -e PORT=8080 -p 8080:8080 <ContainerID>

On OS X

On OS X, use the docker machine IP instead of localhost: to get the IP of the docker machine, run docker-machine ip.

Example:

# Run the container
$ docker run -e HOST=http://192.168.99.100:8080 -e PORT=8080 -p 8080:8080 -it shoutit/shoutit-web:develop

and then open http://192.168.99.100:8080.

Building

To build the app run

$ npm run build

The script will build the app with webpack and output into the public folder.

• After the build, this directory will contain scripts, images and styles folders
• Non built images are copied from assets/images
• Copy the content of this directory to the CDN and set the APP_PUBLIC_URL to serve from it.
• It is served by node.js in case APP_PUBLIC_URL is not set.
• To use public url that depends on the BUILD_TAG, set APP_TAGGED_PUBLIC_URL. The final public url would be APP_TAGGED_PUBLIC_URL/BUILD_TAG

To test the built app

$ PORT=8080 npm run dev:built

and open http://localhost:8080.

Development

Start the development environment to enable hot modules reload:

$ npm run dev

then open http://localhost:3000.

If you want to test the client of another computer in the same network, use the HOST env variable:

$ HOST=$HOSTNAME npm run dev # Tested only on OSX

Updating dependencies

• Dependencies are shrinkwrapped: run npm shrinkwrap when updating the production dependencies.

• Dependencies must be included in the vendors bundle.

  • add or remove the dependency from the vendor bundle in assets/vendor-packages.js.
  • run npm run build:vendors:dev to update the vendors bundle.

i18n

When adding a new translation messages in our code (e.g. using <FormattedMessage>), the Babel compiler extracts automatically the default messages and places them into the assets/intl/messages directory.

To make the default messages translatable, they must be saved into the locale-relative JSON files in assets/intl/translations.

Run this script to updated those JSONs:

$ npm run build:translations

The localized JSONs must be committed on the develop branch to make them available to the translators.

Tests

Most of the unit tests run with mocha, chai and enzyme. Some specs that need a browser instance run with karma.

$ npm test            # run all the tests

$ npm test:mocha      # run all the mocha tests
$ npm run test:watch  # watch mode for mocha tests
$ npm run test:single <file1>[, <file2>] # Test and watch single files with mocha

$ npm test:karma           # run all the karma specs
$ npm run test:karma:watch # watch mode for karma specs

Test coverage with istanbul:

$ npm run test:cover        # coverage for the mocha tests
$ npm run test:mocha:cover  # coverage for the karma specs

Test coverage output is in the coverage directory.

Writing unit tests

• Fixtures and mocks goes into assets/fixtures
• Each file must have a relative *.test.js (for mocha tests) or *.spec.js (for karma) file

Deploy

• pushing to the develop branch will deploy to stage.www.shoutit.com
• pushing to the master branch will deploy to beta.www.shoutit.com (login/password: beta/beta)
• creating a new tag release-<n> (e.g. release-24) on the master branch will release the tag to www.shoutit.com. Releases should be tracked on github's releases page.