Libby Client Application
Project Libby - Admin Tool V2: Read More >
The Libby client application uses a combination of existing libraries and tools that allows fast and simple creation of single page web applications using ES6.
Usage (live editing)
npm install
npm test
npm start
open http://localhost:3000
For a complete list of available commands and to add code completion, run the following commands in a terminal:
$ npm completion >> ~/.bashrc
$ source ~/.bashrc
$ npm run <tab><tab>
which will produce the following output
build coverage-open postbuild prebuild start
clean deploy postcoverage precoverage test
coverage lint posttest predeploy test-debug
Now edit the text Current Lineup in src/pages/index/template.jsx.
Your changes will appear without reloading the browser like in this video.
You can observe the hot-loading process in the browser's debug console. To see hot-loading status without opening the browser's debug console open http://localhost:3000/webpack-dev-server/
Project Structure
Client:
- /style/ - LESS files (TODO: support for SASS)
- /src/index.js - App entry point
- /src/app.jsx - React app bootstrapper
- /src/routes.js - Routes for react-router
- /src/app/ - React app definition with react-router setup
- /src/components/ - React components folder
- /src/components/chrome - Application chrome React component
- /src/components/navigation - Application navigation bar React component
- /src/pages/ - React pages folder
- /src/pages/index - Index page that's loaded by default
- /src/pages/other - Other page that's added for convenience
Linting
This project includes React-friendly ESLint configuration.
npm run lint
Using 0.0.0.0 as Host
You may want to change the host in server.js and webpack.config.js from localhost to 0.0.0.0 to allow access from same WiFi network. This is not enabled by default because it is reported to cause problems on Windows. This may also be useful if you're using a VM.
Dependencies
- React
- Webpack
- webpack-dev-server
- babel-loader
- react-hot-loader