Crossroads.net Clientside Application
The client facing website for crossroads church.
Getting Started
The first thing you'll need to get started is NodeJS. Head over to http://nodejs.org/ and install based on your operating system. Once you pull down the code, just run npm i
to install all dependencies locally.
Core Functionality
If you are developing a module that can be considered a core module then the files should be stored under ./core folder
This is the core angular module for the Crossroads.net site. It includes multiple dependencies used throughout the crossroads ecosystem including:
- Angular
- Angular Resource
- Angular Cookies
- Angular Messages
- Angular Sanitize
- Angular Stripe
- Ui-Router may be removed in the future
- Ui-Bootstrap
- UI Event
- Angular Growl 2
- Angular Payments may be removed in the future
- Angular Stripe may be removed in the future
- Angular Toggle Switch may be removed in the future
- lodash
- moment
Builds
We use gulp scripts to build and run webpack so you will also need to install gulp globally. This is not required, but makes command-line tasks easier later on. To install gulp globally, use one of the following commands. Both will install gulp into the NodeJS path, which is presumably already on your OS's execution PATH.
For Windows users (replace the prefix value below with the path to your NodeJS install):
Ensure you are running the command prompt as administrator
npm set prefix "C:\Program Files\nodejs"
npm install -g gulp
Mac and Linux (replace the prefix value below with the path to your NodeJS install):
npm set prefix /usr/local/nodejs
npm install -g gulp
Configuration
By default webpack inserts http://localhost:49380
everywhere it finds __API_ENDPOINT__
in the javascript. This can be changed by creating and setting an environment variable called CRDS_API_ENDPOINT.
By default webpack inserts http://content.crossroads.net
everywhere it finds __CMS_ENDPOINT__
in the javascript. This can be changed by creating and setting an environment variable called CRDS_CMS_ENDPOINT. By default webpack inserts Crossroads Stripe Publishable Key as pk_test_TR1GulD113hGh2RgoLhFqO0M
everywhere it find __STRIPE_PUBKEY__
in the javascript. This can be changed by creating and setting an environment variable called CRDS_STRIPE_PUBKEY.
By default webpack defaults to use the API Version of Stripe as configured in the account. This can be overridden by creating an environment variable named CRDS_STRIPE_API_VERSION and setting to a particular verion. (i.e. 2015-04-07)
For windows users:
set CRDS_API_ENDPOINT = https://path-to-api-host/
set CRDS_CMS_ENDPOINT = https://path-to-content-host/
set CRDS_STRIPE_PUBKEY = <obtain from Stripe site>
Mac and Linux:
export CRDS_API_ENDPOINT = https://path-to-api-host/
export CRDS_CMS_ENDPOINT = https://path-to-content-host/
export CRDS_STRIPE_PUBKEY = <obtain from Stripe site>
Keep in mind that this way of setting environment variables will not be persistent, windows users will have to add this variable in system settings and linux/mac users will have to set it in their .bashrc/.zshrc files for persistence.
Install Third Party Dependencies
To install all 3rd party dependencies run the following command in your crds-angular/crossroads.net folder. This will look at the package.json file and install all the dependencies that are configured. It may take several minutes
npm install
Build
To just build the project, run one of the following gulp commands
gulp
- builds the development configuration, and starts the webpack webserver listening on http port 8080gulp browser-sync-dev
- builds the development configuration, and starts a browser-sync webserver listening on port 3000. This is good for live reloads.gulp build-dev
- builds the development configuration, and outputs files to the assets/ foldergulp build
- builds the production configuration, and outputs files to the assets/folder
Test
There are two types of tests available, Unit Tests and Functional Tests.
Unit Tests
We use karma as our test runner and Jasmine to write the specs. You will need to install karma-cli globablly to run the tests.
Unit tests are kept in the (specs)[./specs] folder.
Windows users can run:
npm set prefix "C:\Program Files\nodejs"
npm install -g karma-cli
Mac and Linux users can run:
npm install -g karma-cli
Once karma-cli is installed, just run the commands below which will open chrome and run the tests. Click the debug button to see the results. Refreshing this page will re-run the tests.
- For the main application run
karma start crossroads.conf.js
- For the core folders run
karma start core.tests.conf.js
Functional Tests
We use protractor to run the tests and Jasmine to write the specs. You will need to install protractor globally.
Functional Tests are kept in (e2e)[./e2e]
Windows users can run:
npm set prefix "C:\Program Files\nodejs"
npm install -g protractor
Mac and Linux users can run:
npm install -g protractor
Next, update the selenium drivers. webdriver-manager update --out_dir=node_modules/protractor/selenium
.
To run tests in safari, you will need to download the safari plugin from (here)[http://selenium-release.storage.googleapis.com/index.html?path=2.45/] and install it.
You will now be able to run protractor by typing protractor protractor.conf.js
.
Run
To run the project, run gulp start
and point your browser to http://localhost:8080
. If you want live reload, use http://localhost:8080/webpack-dev-server
but keep in mind that the angular inspector will not work correctly and routes will not show up correctly with live reload.
Mac OS with Gateway code running under VirtualBox Windows Guest
Follow these instructions in order to setup the application to call Gateway services that are hosted on IIS Express on a Windows VM running under VirtualBox on a Mac.
Configuring the corkboard application
Clone the crds-corkboard github repo to your local machine
Create the symbolic link (Windows)
Open a command prompt with administrator accessChange to thePATH_TO_CRDS_ANGULAR_REPO/crossroads.net
folderRun the following command to create a symbolic linkmklink /D corkboard PATH_TO_CRDS_CORKBOARD_REPO/website
Start the webpack processes
- Run gulp in the
PATH_TO_CRDS_ANGULAR_REPO/crossroads.net
folder Run gulp in thePATH_TO_CRDS_CORKBOARD_REPO/website
folder
Create a VirtualBox Host-Only Network
- Open VirtualBox
- Navigate to VirtualBox > Preferences...
- Click on Network
- Click on Host-Only Networks
- Click on the little network card with a plus sign on the right of the list
- This will add an entry in the list called
vboxnet0
- Click OK
Add a second adapter to VM
- From VM VirtualBox Manager, with VM powered off, select VM and click Settings
- Click Network
- Click Adapter 2
- Check Enable Network Adapter
- Under Attached to: select
Host-only Adapter
- Under Name select
vboxnet0
- Click OK
Start Windows VM and configure IIS Express
- Open File Explorer and goto C:\Users\ username\Documents\IISExpress\config
- Edit
applicationhost.config
- Find a
<site>
entry under<sites>
that matches the name of the Visual Studio Project (e.g.crds-angular
) - Under the
<bindings>
entry add<binding protocol="http" bindingInformation="*:
[port number of IIS entry point, most likely49380
]:
[name of VM]"/>
, e.g.<binding protocol="http" bindingInformation="*:49380:silbervm"/>
- Save file and start Visual Studio
- Load and run the solution
- Look in the task bar for the IIS Express icon and right click it
- Look for an entry under View Sites that matches the name of the
<site>
key above and click on it. - You should see the binding you added represented as a url, e.g.
http://silbervm:49380/
under Browse Applications
Configure OS X to use network
- Edit
/etc/hosts
as root - On the Windows VM, Open Network and Sharing Center and click on Local Area Connection 2
- Click Details...
- Note the
IPv4 Address
, most likely192.168.56.101
- Back on OS X, create a entry in
/etc/hosts
using the VM name as the DNS name, e.g.192.168.56.101 silbervm
- As described above, add the CRDS_API_ENDPOINT environment variable to match the configuration, e.g.
export CRDS_API_ENDPOINT=http://silbervm:49380/
Folder Naming Convention
- Use descriptive folder names
- Seperate multiple words with underscords (i.e. 'sign_up_to_serve')
Angular Style Guide
We will follow the Crossroads Angular Style Guide.
Linting
JSHint
First install jshint globally with npm npm install -g jshint
A .jshintrc file has already been added to the project
- For Atom, install linter-jshint
- For Sublime Text, install Sublime-jshint
- For IntelliJ, supported out of the box
JSCS
Install jscs with npm npm install jscs -g
A .jscsrc file exists to use AirBnB styleguide
- For Atom. linter-jscs
- For Sublime Text 3, SublimeLinter
- For IntelliJ, jscs-plugin
ESLint
A .eslintrc file has already been added to the project
- For IntelliJ - Navigate to File | Settings | Languages and Frameworks | JavaScript | Code Quality Tools | ESLint and check the Enable box