# Web Isomorphic Hippy apps react translates and runs hippy applications in browsers through the [@hippy/React apps web library](//www.npmjs.com/package/@hippy/react-web). > After version 2.14.0, @hippy/react-web supports relatively complete adaptation to the Web. --- # Install Runtime Dependencies Please use `npm i` to install the following npm package to ensure normal web runtime adaptation. | Package name | Description | |---------------------|------------------------------| | react | React version>= v16.8.0 | | hippy-react-web | Web adapter for hippy-react | | react-dom | react web renderer | | animated-scroll-to | Add animation when scrolling | | swiper | ViewPager requires | | @hippy/rmc-list-view | ListView requires | | rmc-pull-to-refresh | ListView PullHeader requires | # Compile Time Dependencies Take the officially provided [Example Project](//github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo) example project as an example, you need to use `npm i -D` to prepare the following dependencies. Of course, the developer You can choose according to your needs: | Package name | Description | |---------------------|-----------------------------------------| | css-loader | Webpack plugin - Inline styles to CSS | | html-webpack-plugin | Webpack plugin - Generate homepage html | | style-loader | Webpack plugin - Inline styles | | webpack-dev-server | Webpack webside debugging service | # Compiling Configuration For Native Development And Debugging This configuration shows the minimum configuration for running Hippy on the web, and does not include subcontracting and other content, and developers can expand by themselves. The main difference with hippy-react is to make an [alias](//github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/scripts/hippy-webpack.web.js#L80) from hippy-react to hippy-react-web, so that it can run directly without modifying the code. | Configuration file | Description | |-----------------------------------------------------------------------------------------------------------------------|-----------------------------| | [hippy-webpack.web.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/scripts/hippy-webpack.web.js) | Configuration for debugging | # Entry File hippy-react-web and hippy-react have the same startup parameters and can share the same `main.js` entry file. # NPM Script hippy-react-web uses [webpack-dev-server](//webpack.js.org/configuration/dev-server/) to start debugging, which supports all web debugging features. At the same time, use the same configuration file and use webpack for packaging. The command here actually refers to the Vue project generated by vue-cli, starts the debugging service through `serve`, and compiles the JavaScript package through `build`. ```json "scripts": { "serve": "webpack-dev-server --config ./scripts/hippy-webpack.web.js", "build": "webpack --config ./scripts/hippy-webpack.web.js", } ``` # Start Debugging Web debugging will start after executing `npm run serve`, but note that the default generated HTML file name is defined from the `name` field of `package.json`, not the default `index.html`, so for the official example , you need to use `http://localhost:8080/hippy-react-demo.html` to access the debugging page. # WebRenderer Scheme Hippy use [`WebRenderer`](web/integration.md) scheme to add a conversion layer based on common communication protocols. Business developers can use the same set of Hippy syntax to map business code to components and modules implemented in JavaScript. Whether the upper layer uses React, Vue or other third-party frameworks, it can be compatible.