Reactive wikipedia search demo application
Demo application of wikipedia search-as-you-type experience, written in TypeScript, using React, Redux-Observable & RxJS and fully marble-tested.
- Install node.js and npm package manager: https://nodejs.org/en/, or e.g.
sudo apt-get nodejs,
sudo apt-get install npm,
sudo apt-get install nodejs-legacy(this latter one installs a symlink for
- Install visual studio code: https://code.visualstudio.com/
- Install git (if required), e.g.
sudo apt-get npm install git
- Fork this repository in gitbug, and clone your repo:
git clone https://github.com/jchapuis/reactive.git
- Install recommended visual studio code extensions for this project
npm installin the root directory of this repo, this downloads all dependencies and tools.
npm run buildto build the application (this launches webpack behind the scenes)
npm run startor hit F5 in visual studio code to startup the application: it becomes available on http://localhost:8080
Configuration files description
package.json: npm configuration file, lists all dependencies of the project, contains building scripts and package meta-information
tsconfig.json: typescript compiler options (inspired from https://www.typescriptlang.org/docs/handbook/react-&-webpack.html)
tslint.json: typescript linter options & rules configuration
webpack.config.js: webpack configuration file
.vscode/extensions.json: recommended visual studio code extensions
.vscode/launch.json: configuration of what happens when pressing F5 in visual studio code
.vscode/settings.json: settings for visual studio code and extensions
.vscode/tasks.json: configuration of visual studio code tasks, will delegate to npm commands and e.g. support parsing console output from webpack to find out about errors
- CRTL+SHIFT+B: Build (runs
npm run build)
- F5: Run application and open chrome window (note that due to a vscode bug when stopping the debug session the server does not shut down, and you need to 'terminate running task')
- CTRL+SHIFT+T: Terminate running task (need to be customized, not built-in)
- Webpack guidebook: https://survivejs.com/webpack/.
- Simple boilerplate from which this was inspired: https://github.com/Glavin001/react-hot-ts
- Another interesting guide (which involves Babel - we don't use it): http://blog.tomduncalf.com/posts/setting-up-typescript-and-react/
- The project boilerplate is mostly inspired from https://github.com/Glavin001/react-hot-ts
- Other boilerplates worth mentionning: https://github.com/skolmer/react-hot-boilerplate-vscode and https://github.com/tomduncalf/typescript-react-template