Top Drawer's very own storefront powered by FoxCommerce. It's a spiffy isomorphic React app.
-
node
> v5.1.0To install this or another versions of node you can use brew, n or nvm
-
yarn
> v0.17.8 -
We're using Flow to perform type checks and
babel-plugin-typecheck
for same thing at runtime. Install Flow per the instructions on the website. Checkout required version in.flowconfig
file. -
public_key.pem
in the root of the project, as described in the engineering wiki
-
Run
yarn
to install dependencies. -
Set Stripe.js publishable key. In order to checkout to work you should set Stripe key by exporting
STRIPE_PUBLISHABLE_KEY
variable, or setting it in your.env
file if you're using foreman, or run dev command with it:
export STRIPE_PUBLISHABLE_KEY=pk_test_JvTXpI3DrkV6QwdcmZarmlfk
STRIPE_PUBLISHABLE_KEY=pk_test_JvTXpI3DrkV6QwdcmZarmlfk npm run dev
- Set DEV_SKIP_JWT_VERIFY, or configure PHOENIX_PUBLIC_KEY variable for verifying jwt token.
export DEV_SKIP_JWT_VERIFY=1
DEV_SKIP_JWT_VERIFY=1 STRIPE_PUBLISHABLE_KEY=pk_test_JvTXpI3DrkV6QwdcmZarmlfk npm run dev
- Select your API backend. There are convenience tasks to run the common backend development methods, hitting backend API at remote stage:
npm run dev
โ backend API at API_URL
env variable
-
Develop it at http://localhost:4050/
-
Use
--browser-sync
flag to enable CSS hot reloading: -
Develop it at http://localhost:4040/
You can set the backend API URL as a shell variable API_URL
.
For example, to hit staging:
export API_URL=http://10.240.0.8
then run
npm run dev
- Be sure to add a Google Analytics ID via the environment variable
GA_TRACKING_ID
For example, you might set a customer test/staging ID:
export GA_TRACKING_ID=UA-74320XXX-X
npm run dev
By default, gulpfile installs pre-push hooks for you.
And, usually, it's ok having pre-push hooks, even if you needed to push broken branch
you can push with --no-verify
option.
Also, you can disable auto installing hooks by creating .gulprc
in project root with following content:
exports.autoInstallHooks = false;
For achieve right isomorphism redux-wait is used. It utilizes multiple rendering calls for get all async dependencies for project. Read about code organization limitations in redux-wait's README.
For grids lost postcss plugin is used. It's really good.
For different margins which depends on viewport size use --grid-margin
css variable: margin: 0 var(--grid-margin)
.
For static type checking flowtype is used. You can run check manually by npm run flow
command.
For icons svg icons is used. Just place svg icon to src/images/svg
folder and gulp sprites task builds sprite for you
automatically. Name for each icon in a sprite will be fc-<file-name-lowecased>
Usage:
import Icon from 'ui/icon';
const icon = <Icon name="fc-google" />;