Gathering detailed insights and metrics for razzle-examples-with-react-native-web
Gathering detailed insights and metrics for razzle-examples-with-react-native-web
Installations
npm install razzle-examples-with-react-native-webDeveloper Guide
BETA
Typescript
No
Module System
N/A
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
3.0.0
Package Id
razzle-examples-with-react-native-web@3.0.0
Unpacked Size
401.85 kB
Size
92.99 kB
File Count
36
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
4
Dev Dependencies
3
Razzle React Native Web Example
How to use
Download the example or clone the whole project:
1curl https://codeload.github.com/jaredpalmer/razzle/tar.gz/master | tar -xz --strip=2 razzle-master/examples/with-react-native-web 2cd with-react-native-web
Install it and run:
1yarn install 2yarn start
Idea behind the example
This example demonstrates how to use React Native Web with Razzle. Relative to the basic Razzle example, there are some noteworthy modifications. First, we add react-native-web to dependencies and babel-plugin-react-native-web to dev dependencies.
yarn add react-native-web
yarn add babel-plugin-react-native-web --dev
Next we add a custom .babelrc file to the root our of project as follows. As described in the documentation, we include Razzle's default babel plugin AND the custom react-native-web plugin.
1{ 2 "presets": ["razzle/babel"], 3 "plugins": ["react-native-web"] 4}
In our code, we modify our src/client.js as per the RN Web docs. Notice how we are not calling ReactDOM.hydrate() ourselves, as this is done by RN Web.
1// ./src/client.js 2import React from 'react'; 3import App from './App'; 4import { AppRegistry } from 'react-native'; 5 6// register the app 7AppRegistry.registerComponent('App', () => App); 8 9AppRegistry.runApplication('App', { 10 initialProps: {}, 11 rootTag: document.getElementById('root'), 12}); 13 14// Allow HMR to work 15if (module.hot) { 16 module.hot.accept(); 17}
In src/server.js, we also can basically copy and paste from the RN Web docs. Important note: RN Web handles CSS-in-js for us, so we remove assets.client.css <link> tag from our HTML string template and replace it with just the css variable we get from RN Web.
1// ./src/server.js 2 3import App from './App'; 4import express from 'express'; 5import ReactDOMServer from 'react-dom/server'; 6import { AppRegistry } from 'react-native'; 7 8const assets = require(process.env.RAZZLE_ASSETS_MANIFEST); 9 10const server = express(); 11 12server 13 .disable('x-powered-by') 14 .use(express.static(process.env.RAZZLE_PUBLIC_DIR)) 15 .get('/*', (req, res) => { 16 // register the app 17 AppRegistry.registerComponent('App', () => App); 18 19 // prerender the app 20 const { element, getStyleElement } = AppRegistry.getApplication('App', {}); 21 // first the element 22 const html = ReactDOMServer.renderToString(element); 23 // then the styles 24 const css = ReactDOMServer.renderToStaticMarkup(getStyleElement()); 25 26 res.send( 27 `<!doctype html> 28 <html lang=""> 29 <head> 30 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 31 <meta charSet='utf-8' /> 32 <title>Welcome to Razzle</title> 33 <meta name="viewport" content="width=device-width, initial-scale=1"> 34 ${css} 35 ${ 36 process.env.NODE_ENV === 'production' 37 ? `<script src="${assets.client.js}" defer></script>` 38 : `<script src="${assets.client.js}" defer crossorigin></script>` 39 } 40 </head> 41 <body> 42 <div id="root">${html}</div> 43 </body> 44</html>` 45 ); 46 }); 47 48export default server;
Webpack setup
Like create-react-app, Razzle already takes care of aliasing react-native to react-native-web with webpack for you. So we don't need to mess with that.
However, since we are using RN Web for all our CSS, we can get a significant Webpack #perf boost during development and build tasks if we remove all the built-in CSS loaders from Razzle. To do this, we create a file called razzle.config.js in our root directory and use the modify function. Notice that we are using regex tests to sniff which Webpack module rules we should filter out. This approach is significantly better than just removing a rule at a specific index of the rules array, which could change between Razzle releases.
1'use strict'; 2 3module.exports = { 4 modify(config, { target, dev }, webpack) { 5 // Since RN web takes care of CSS, we should remove it for a #perf boost 6 config.module.rules = config.module.rules 7 .filter( 8 rule => 9 !(rule.test && rule.test.exec && rule.test.exec('./something.css')) 10 ) 11 .filter( 12 rule => 13 !( 14 rule.test && 15 rule.test.exec && 16 rule.test.exec('./something.module.css') 17 ) 18 ); 19 20 return config; 21 }, 22};
No vulnerabilities found.
No security vulnerabilities found.