CODEWITHSUNDEEP
javascriptwebpack
DangolBeeker
DangolBeeker

Reputation: 85

React native web step by step from react native init

Can someone give me a step by step for installing react native web from a fresh react native project?

1)init react native

2)npm install react-dom react-native-web

3)npm install --save-dev babel-plugin-react-native-web

4)npm install --save-dev babel-loader url-loader webpack webpack-cli webpack-dev-server

5)npm install --save-dev babel-plugin-react-native-web

  1. create web/webpack.config.js

7)./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.config.js --inline --hot --colors

internal/modules/cjs/loader.js:883

    throw err;
    ^
  
  Error: Cannot find module 'webpack-cli/bin/config-yargs'
  Require stack:
  - C:\Users\Scott\reactnative\web\webby2\node_modules\webpack-dev-server\bin\webpack-dev-server.js
      at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
      at Function.Module._load (internal/modules/cjs/loader.js:725:27)
      at Module.require (internal/modules/cjs/loader.js:952:19)
      at require (internal/modules/cjs/helpers.js:88:18)
      at Object.<anonymous> (C:\Users\Scott\reactnative\web\webby2\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
      at Module._compile (internal/modules/cjs/loader.js:1063:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
      at Module.load (internal/modules/cjs/loader.js:928:32)
      at Function.Module._load (internal/modules/cjs/loader.js:769:14)
      at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
    code: 'MODULE_NOT_FOUND',
    requireStack: [
      'C:\\Users\\Scott\\reactnative\\web\\webby2\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
    ]
  }

Upvotes: 4

Views: 868

Answers (2)

Ovidiu Cristescu
Ovidiu Cristescu

Reputation: 1043

I created the 🌙 Luna template: https://github.com/criszz77/luna

npx react-native init MyAppName --template @criszz77/luna
  • It has everything you need for a quick and clean start with react-native-web.
  • Runs on Android, IOS and web concurrently.
  • It uses create-react-app (react-scripts) so you don't have to handle webpack and other build tools by yourself.

Upvotes: 1

DangolBeeker
DangolBeeker

Reputation: 85

Ok so in case anyone else runs into this issue I solved it following by adding "web": "cd web && webpack serve --hot"

Upvotes: 2

Related Questions