The ui for inspirational search!
NOTE Currently the
demo branch is the default branch which is used for Continuous Integration and deployment
Adding a component
The eventual aim is to abstract all the individual components (filter-tile, package-tile) into separate npm modules. Currently the main elements of the project are structured as follows:
├── LICENSE ├── package.json ├── README.md ├── fonts ├── lib │ ├── filter-tile │ |── index.js │ └── styles.css ├── src │ └──components │ └── home │ ├── index.js │ └── styles.css | ├── index.js | ├── index.html │ └── index.template.html ├── test
The webpack config is set up so that any folder inside the lib folder behaves like an npm module so can be required as e.g.
const FilterTile = require('filter-tile');
This line in the webpack config is the important part, so it can be removed once the modules have been published to npm:
To test out a new component before publishing to NPM:
- add a folder to the lib folder with an index.js file with the component
- add a styles.css file for the component. If custom fonts are required, they have to be linked from the fonts folder in the root of the project (as otherwise webpack wont be able to resolve the paths)
To move a component out into its own npm module
- Set up a babel-react-webpack project (use the canary project as a template)
- Copy over the contents of the component from the lib folder
- Create a font folder and copy over the necessary font files
Deployment to S3
A gulp script is used to deploy to an s3 bucket. At the top of the file you can define the bucket and folder options - change the variables:
bucketfolder. Currently the bucket folder is set 'isearch/' plus the minor and patch version from the version in the package.json e.g. if the version is '1.0.1' the folder name will be 'isearch/0.1'. You also need to check you have the AWS CLI set up with the correct access keys. Then, in your terminal type:
npm run deploy
This will build the bundle and put the index.html and bundle.js in to the public folder. The bundle will be hashed (to prevent caching by s3)and the index.html file will be built from the template in the src folder ('index.template.html'). The contents of the public folder will then be uploaded to the specified Amazon S3 bucket. Have a look at the 'gulpfile.js' for implementation details.
We will use continuous integration with Codeship so the deployment will be done after code has been merged into the demo branch
Setting up the React Webpack Babel Project
Initialize your project by running the
$ npm init command in the terminal.
Basic file structure:
. ├── LICENSE ├── package.json ├── README.md ├── src │ ├── index.js │ └── index.html ├── test
The basic setup required to build your initial bundle involves installing the following dependencies. Run this command in your command line:
$ npm i --save-dev webpack babel-core babel-loader babel-preset-react babel-preset-es2015 react react-dom file-loader
webpack.config.js file and include the following within it:
.babelrc file and include the following within it:
Then we have to add a 'build' script to our
package.json that will create our bundle. It is written as follows:
"build": "webpack --progress"
In order to enable hot-reloading of your project (live updates in the browser) you'll need the following. Run this command in your terminal:
$ npm i --save-dev webpack-dev-server react-hot-loader
webpack.config.js file change your 'jsx' loader to the following:
module:loaders:test: /\.jsx?$/exclude: /node_modules/loaders: 'react-hot' 'babel'
NOTE: The loader has changed to the plural 'loaders'
We then need to add the following script to our
package.json so that we can start our dev server:
"dev": "webpack-dev-server --hot --inline",
You can now visit your server by going to
FYI: If you go to
http://localhost:8080/webpack-dev-server/#/ you can see hot-loading with errors.
For linting we have chosen to use 'semistandard'. To install it run the following command in the command line:
$ npm i --save-dev semistandard
Now let's add a linting script to our
package.json which is simply:
To test our React components we are using Mocha. Run the following command in the terminal to install the testing framework:
npm i --save-dev mocha jsdom react-addons-test-utils mocha-jsdom expect
Include this script in your
package.json to run your tests:
"test": "npm run lint && mocha test/**/*.test.js --compilers js:babel-register"