├── .babelrc
├── .gitignore
├── README.md
├── package.json
├── public
    ├── favicon.ico
    └── robots.txt
├── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── Home.css
    ├── Home.js
    ├── client.js
    ├── index.js
    ├── razzle.config.js
    ├── react.svg
    └── server.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["razzle/babel"],
3 |     "plugins": ["react-native-web"]
4 |   }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | logs
 2 | *.log
 3 | npm-debug.log*
 4 | .DS_Store
 5 | 
 6 | coverage
 7 | node_modules
 8 | build
 9 | .env.local
10 | .env.development.local
11 | .env.test.local
12 | .env.production.local


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![repo-banner](https://user-images.githubusercontent.com/4060187/28923990-050a32d4-782e-11e7-9da7-574ce5a8b455.png)
  2 | 
  3 | [![CircleCI](https://circleci.com/gh/jaredpalmer/razzle/tree/master.svg?style=svg)](https://circleci.com/gh/jaredpalmer/razzle/tree/master) ![Razzle-status](https://david-dm.org/jaredpalmer/razzle.svg?path=packages/razzle) [![npm version](https://badge.fury.io/js/razzle.svg)](https://badge.fury.io/js/razzle)
  4 | 
  5 | Universal JavaScript applications are tough to setup. Either you buy into a framework like [Next.js](https://github.com/zeit/next.js) or [react-server](https://github.com/redfin/react-server), fork a boilerplate, or set things up yourself. Razzle aims to fill this void by abstracting all the required tooling for your universal JavaScript application into a single dependency, and then leaving the rest of the architectural decisions about frameworks, routing, and data fetching up to you.
  6 | 
  7 | **Razzle comes with the "battery-pack included"**:
  8 | 
  9 | - :fire: Universal Hot Module Replacement, so both the client and server update whenever you make edits. No annoying restarts necessary
 10 | - Comes with your favorite ES6 JavaScript goodies (through `babel-preset-razzle`)
 11 | - Comes with the same CSS setup as [create-react-app](https://github.com/facebookincubator/create-react-app) 
 12 | - Works with [React](https://github.com/facebook/react), [Preact](https://github.com/developit/preact), [Elm](http://elm-lang.org/),  [Reason-React](https://github.com/jaredpalmer/razzle/tree/master/examples/with-reason-react), [Inferno](https://github.com/infernojs), and [Rax](https://github.com/alibaba/rax) as well as [Angular](https://github.com/angular/angular) and [Vue](https://github.com/vuejs/vue) if that's your thing
 13 | - Escape hatches for customization via `.babelrc` and `razzle.config.js`
 14 | - [Jest](https://github.com/facebook/jest) test runner setup with sensible defaults via `razzle test`
 15 | 
 16 | 
 17 | ## Quick Start
 18 | 
 19 | ```bash
 20 | npm install -g create-razzle-app
 21 | 
 22 | create-razzle-app my-app
 23 | cd my-app
 24 | npm start
 25 | ```
 26 | 
 27 | Then open http://localhost:3000/ to see your app. Your console should look like this:
 28 | 
 29 | <img src="https://cloud.githubusercontent.com/assets/4060187/26324663/b31788c4-3f01-11e7-8e6f-ffa48533af54.png" width="500px" alt="Razzle Development Mode"/>
 30 | 
 31 | **That's it**. You don't need to worry about setting up multiple webpack configs or other build tools. Just start editing `src/App.js` and go!
 32 | 
 33 | Below is a list of commands you will probably find useful.
 34 | 
 35 | ### `npm start` or `yarn start` 
 36 | 
 37 | Runs the project in development mode.   
 38 | You can view your application at `http://localhost:3000`
 39 | 
 40 | The page will reload if you make edits.
 41 | 
 42 | ### `npm run build` or `yarn build`
 43 | Builds the app for production to the build folder.      
 44 | 
 45 | The build is minified and the filenames include the hashes.
 46 | Your app is ready to be deployed!
 47 | 
 48 | ### `npm run start:prod` or `yarn start:prod`
 49 | Runs the compiled app in production.
 50 | 
 51 | You can again view your application at `http://localhost:3000`
 52 | 
 53 | ### `npm test` or `yarn test`
 54 | 
 55 | Runs the test watcher (Jest) in an interactive mode.
 56 | By default, runs tests related to files changed since the last commit.
 57 | 
 58 | ### `npm start -- --inspect` or `yarn start -- --inspect`
 59 | 
 60 | To debug the node server, you can use `razzle start --inspect`. This will start the node server and enable the inspector agent. For more information, see [this](https://nodejs.org/en/docs/inspector/).
 61 | 
 62 | ### `npm start -- --inspect-brk` or `yarn start -- --inspect-brk`
 63 | 
 64 | To debug the node server, you can use `razzle start --inspect-brk`. This will start the node server, enable the inspector agent and Break before user code starts. For more information, see [this](https://nodejs.org/en/docs/inspector/).
 65 | 
 66 | ---
 67 | 
 68 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 69 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 70 | **Table of Contents**
 71 | 
 72 | - [Customization](#customization)
 73 |   - [Extending Babel Config](#extending-babel-config)
 74 |   - [Extending Webpack](#extending-webpack)
 75 |   - [Environment Variables](#environment-variables)
 76 |   - [Adding Temporary Environment Variables In Your Shell](#adding-temporary-environment-variables-in-your-shell)
 77 |     - [Windows (cmd.exe)](#windows-cmdexe)
 78 |     - [Linux, macOS (Bash)](#linux-macos-bash)
 79 |   - [Adding Environment Variables In `.env`](#adding-environment-variables-in-env)
 80 |     - [What other `.env` files are can be used?](#what-other-env-files-are-can-be-used)
 81 | - [How Razzle works (the secret sauce)](#how-razzle-works-the-secret-sauce)
 82 | - [Inspiration](#inspiration)
 83 |     - [Author](#author)
 84 | - [Contributors](#contributors)
 85 | 
 86 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 87 | 
 88 | ## CSS
 89 | ### Css Modules
 90 | Razzle supports both normal CSS and Css modules, you can read more about the module [here](https://github.com/css-modules/css-modules)
 91 | Check `src/Home.js` for both approaches. If you import from a `module.css` file make sure to get use the default object that gets imported to access the classNames. F.e.
 92 | ```
 93 | import styles from './Home.module.css'
 94 | 
 95 | <div className={styles.div}>{children}</div>
 96 | ```
 97 | 
 98 | If you would like not to use CSS modules just import you css the following way and use the classNames as before. Make sure to scope them manually:
 99 | 
100 | ```
101 | import './Home.css'
102 | 
103 | <div className="Home-div">{children}</div>
104 | ```
105 | 
106 | ## Customization
107 | 
108 | ### Extending Babel Config
109 | 
110 | Razzle comes with most of ES6 stuff you need. However, if you want to add your own babel transformations, just add a `.babelrc` file to the root of your project. 
111 | 
112 | ```json
113 | {
114 |   "presets": [
115 |     "razzle/babel",
116 |     "stage-0"
117 |    ]
118 | }
119 | ```
120 | 
121 | ### Extending Webpack
122 | 
123 | You can also extend the underlying webpack config. Create a file called `razzle.config.js` in your project's root. 
124 | 
125 | ```js
126 | // razzle.config.js
127 | 
128 | module.exports = {
129 |   modify: (config, {target, dev}, webpack) => {
130 |     // do something to config
131 |   
132 |     return config
133 |   }
134 | }
135 | ```
136 | 
137 | A word of advice: `razzle.config.js` is an escape hatch. However, since it's just JavaScript, you can and should publish your `modify` function to npm to make it reusable across your projects. For example, imagine you added some custom webpack loaders and published it as a package to npm as `my-razzle-modifictions`. You could then write your `razzle.config.js` like so:
138 | 
139 | ```
140 | // razzle.config.js
141 | const modify = require('my-razzle-modifictions');
142 | 
143 | module.exports = {
144 |   modify
145 | }
146 | ```
147 | 
148 | Last but not least, if you find yourself needing a more customized setup, Razzle is _very_ forkable. There is one webpack configuration factory that is 300 lines of code, and 4 scripts (`build`, `start`, `test`, and `init`). The paths setup is shamelessly taken from [create-react-app](https://github.com/facebookincubator/create-react-app), and the rest of the code related to logging.
149 | 
150 | ### Environment Variables 
151 | 
152 | **The environment variables are embedded during the build time.** Since Razzle produces a static HTML/CSS/JS bundle and an equivalent static bundle for your server, it cannot possibly read them at runtime. 
153 | 
154 | - `process.env.RAZZLE_PUBLIC_DIR`: Path to the public directory.
155 | - `process.env.RAZZLE_ASSETS_MANIFEST`: Path to a file containing compiled asset outputs
156 | - `process.env.REACT_DEV_BUNDLE_PATH`: Relative path to where React will be bundled during development. Unless you are modifying the output path of your webpack config, you can safely ignore this. This path is used by `react-error-overlay` and webpack to power up the fancy runtime error iframe. For example, if you are using common chunks and an extra entry to create a vendor bundle with stuff like react, react-dom, react-router, etc. called `vendor.js`, and you've changed webpack's output to `[name].js` in development, you'd want to set this environment variable to `/static/js/vendor.js`. If you do not make this change, nothing bad will happen, you will simply not get the cool error overlay when there are runtime errors. You'll just see them in the console. Note: This does not impact production bundling.
157 | - `process.env.VERBOSE`: default is false, setting this to true will not clear the console when you make edits in development (useful for debugging).
158 | - `process.env.PORT`: default is `3000`, unless changed
159 | - `process.env.HOST`: default is `0.0.0.0`
160 | - `process.env.NODE_ENV`: `'development'` or `'production'`
161 | - `process.env.BUILD_TARGET`: either `'client'` or `'server'`
162 | 
163 | You can create your own custom build-time environment variables. They must start
164 | with `RAZZLE_`. Any other variables except the ones listed above will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.
165 | 
166 | These environment variables will be defined for you on `process.env`. For example, having an environment variable named `RAZZLE_SECRET_CODE` will be exposed in your JS as `process.env.RAZZLE_SECRET_CODE`.
167 | 
168 | ### Adding Temporary Environment Variables In Your Shell
169 | 
170 | Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the
171 | life of the shell session.
172 | 
173 | #### Windows (cmd.exe)
174 | 
175 | ```cmd
176 | set RAZZLE_SECRET_CODE=abcdef&&npm start
177 | ```
178 | 
179 | (Note: the lack of whitespace is intentional.)
180 | 
181 | #### Linux, macOS (Bash)
182 | 
183 | ```bash
184 | RAZZLE_SECRET_CODE=abcdef npm start
185 | ```
186 | 
187 | ### Adding Environment Variables In `.env`
188 | 
189 | To define permanent environment variables, create a file called .env in the root of your project:
190 | 
191 | ```
192 | RAZZLE_SECRET_CODE=abcdef
193 | ```
194 | 
195 | #### What other `.env` files are can be used?
196 | 
197 | * `.env`: Default.
198 | * `.env.local`: Local overrides. **This file is loaded for all environments except test.**
199 | * `.env.development`, `.env.test`, `.env.production`: Environment-specific settings.
200 | * `.env.development.local`, `.env.test.local`, `.env.production.local`: Local overrides of environment-specific settings.
201 | 
202 | Files on the left have more priority than files on the right:
203 | 
204 | * `npm start`: `.env.development.local`, `.env.development`, `.env.local`, `.env`
205 | * `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env`
206 | * `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing)
207 | 
208 | These variables will act as the defaults if the machine does not explicitly set them.<br>
209 | Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details.
210 | 
211 | >Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need
212 | these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars).
213 | 
214 | ## How Razzle works (the secret sauce)
215 | 
216 | **tl;dr**: 2 configs, 2 ports, 2 webpack instances, both watching and hot reloading the same filesystem, in parallel during development and a little `webpack.output.publicPath` magic.
217 | 
218 | In development mode (`razzle start`), Razzle bundles both your client and server code using two different webpack instances running with Hot Module Replacement in parallel. While your server is bundled and run on whatever port your specify in `src/index.js` (`3000` is the default), the client bundle (i.e. entry point at `src/client.js`) is served via `webpack-dev-server` on a different port (`3001` by default) with its `publicPath` explicitly set to `localhost:3001` (and not `/` like many other setups do). Then the server's html template just points to the absolute url of the client JS: `localhost:3001/static/js/client.js`. Since both webpack instances watch the same files, whenever you make edits, they hot reload at _exactly_ the same time. Best of all, because they use the same code, the same webpack loaders, and the same babel transformations, you never run into a React checksum mismatch error.
219 | 
220 | ## Inspiration
221 | 
222 | - [palmerhq/backpack](https://github.com/palmerhq/backpack)
223 | - [nytimes/kyt](https://github.com/nytimes/kyt)
224 | - [facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app)
225 | - [humblespark/sambell](https://github.com/humblespark/sambell)
226 | - [zeit/next.js](https://github.com/zeit/next.js)
227 | 
228 | 
229 | #### Author
230 | - [Jared Palmer](https://twitter.com/jaredpalmer)
231 | 
232 | ---
233 | MIT License
234 | 
235 | ## Contributors
236 | 
237 | Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
238 | 
239 | <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
240 | | [<img src="https://avatars2.githubusercontent.com/u/4060187?v=4" width="100px;"/><br /><sub>Jared Palmer</sub>](http://jaredpalmer.com)<br />[💬](#question-jaredpalmer "Answering Questions") [💻](https://github.com/jaredpalmer/razzle/commits?author=jaredpalmer "Code") [🎨](#design-jaredpalmer "Design") [📖](https://github.com/jaredpalmer/razzle/commits?author=jaredpalmer "Documentation") [💡](#example-jaredpalmer "Examples") [🤔](#ideas-jaredpalmer "Ideas, Planning, & Feedback") [👀](#review-jaredpalmer "Reviewed Pull Requests") [⚠️](https://github.com/jaredpalmer/razzle/commits?author=jaredpalmer "Tests") [🔧](#tool-jaredpalmer "Tools") | [<img src="https://avatars3.githubusercontent.com/u/1415847?v=4" width="100px;"/><br /><sub>Jari Zwarts</sub>](https://jari.io)<br />[💬](#question-jariz "Answering Questions") [💻](https://github.com/jaredpalmer/razzle/commits?author=jariz "Code") [🤔](#ideas-jariz "Ideas, Planning, & Feedback") [🔌](#plugin-jariz "Plugin/utility libraries") [👀](#review-jariz "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/810438?v=4" width="100px;"/><br /><sub>Dan Abramov</sub>](http://twitter.com/dan_abramov)<br />[💻](https://github.com/jaredpalmer/razzle/commits?author=gaearon "Code") [🤔](#ideas-gaearon "Ideas, Planning, & Feedback") | [<img src="https://avatars0.githubusercontent.com/u/15182?v=4" width="100px;"/><br /><sub>Eric Clemmons</sub>](http://ericclemmons.github.com/)<br />[💻](https://github.com/jaredpalmer/razzle/commits?author=ericclemmons "Code") [🤔](#ideas-ericclemmons "Ideas, Planning, & Feedback") |
241 | | :---: | :---: | :---: | :---: |
242 | <!-- ALL-CONTRIBUTORS-LIST:END -->
243 | 
244 | This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
245 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-razzle-app",
 3 |   "version": "2.0.0-alpha.2",
 4 |   "license": "MIT",
 5 |   "scripts": {
 6 |     "start": "razzle start",
 7 |     "build": "razzle build",
 8 |     "test": "razzle test --env=jsdom",
 9 |     "start:prod": "NODE_ENV=production node build/server.js"
10 |   },
11 |   "dependencies": {
12 |     "@react-navigation/react-navigation-experiment-core": "^0.0.0-alpha.6",
13 |     "express": "^4.16.3",
14 |     "react": "^16.3.2",
15 |     "react-dom": "^16.3.2",
16 |     "react-native-web": "^0.6.1"
17 |   },
18 |   "devDependencies": {
19 |     "babel-plugin-react-native-web": "^0.4.0",
20 |     "razzle": "^2.0.0-alpha.12"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ericvicenti/full-stack-navigation-web/ea9694a377fb9e4d137fb7221c866b97c2bba5ca/public/favicon.ico


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | 
3 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 |   font-family: sans-serif;
5 | }


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { StyleSheet, Text, View } from 'react-native';
 3 | import uuid from 'uuid/v1';
 4 | 
 5 | import { createNavigator } from '@react-navigation/react-navigation-experiment-core';
 6 | const preso = [];
 7 | 
 8 | const createFlowNavigator = (flowRoutes, config = {}) => {
 9 |   debugger;
10 |   createNavigator;
11 | };
12 | 
13 | const createTitleSlide = title => {
14 |   const routeName = `TitleSlide-${uuid()}`;
15 |   class TitleSlide extends React.Component {
16 |     static routeName = routeName;
17 |     render() {
18 |       return (
19 |         <View>
20 |           <Text>{title}</Text>
21 |         </View>
22 |       );
23 |     }
24 |   }
25 |   return TitleSlide;
26 | };
27 | 
28 | const createMainTitleSlide = createTitleSlide;
29 | 
30 | preso.push(createMainTitleSlide('Full Stack Navigation'));
31 | preso.push(createTitleSlide('Full Stack Navigation'));
32 | preso.push(createTitleSlide('Full Stack Navigation'));
33 | 
34 | const App = createFlowNavigator(preso);
35 | 
36 | // class App extends React.Component {
37 | //   render() {
38 | //     return (
39 | //       <View style={styles.box}>
40 | //         <Text style={styles.text}>Hello, world!</Text>
41 | //         <Text style={styles.text}>Hello, world!</Text>
42 | //         <Text style={styles.text}>Hello, world!</Text>
43 | //       </View>
44 | //     );
45 | //   }
46 | // }
47 | 
48 | // const styles = StyleSheet.create({
49 | //   box: { padding: 10, borderWidth: 10, borderColor: 'blue' },
50 | //   text: { fontWeight: 'bold' },
51 | // });
52 | 
53 | export default App;
54 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import App from './App';
 2 | import React from 'react';
 3 | import ReactDOM from 'react-dom';
 4 | import MemoryRouter from 'react-router-dom/MemoryRouter';
 5 | 
 6 | describe('<App />', () => {
 7 |   test('renders without exploding', () => {
 8 |     const div = document.createElement('div');
 9 |     ReactDOM.render(
10 |       <MemoryRouter>
11 |         <App />
12 |       </MemoryRouter>,
13 |       div
14 |     );
15 |   });
16 | });
17 | 


--------------------------------------------------------------------------------
/src/Home.css:
--------------------------------------------------------------------------------
 1 | .Home {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .Home-logo {
 6 |   animation: Home-logo-spin infinite 20s linear;
 7 |   height: 80px;
 8 | }
 9 | 
10 | .Home-header {
11 |   background-color: #222;
12 |   height: 150px;
13 |   padding: 20px;
14 |   color: white;
15 | }
16 | 
17 | .Home-intro {
18 |   font-size: large;
19 | }
20 | 
21 | .Home-resources {
22 |   list-style: none;
23 | }
24 | 
25 | .Home-resources > li {
26 |   display: inline-block;
27 |   padding: 1rem;
28 | }
29 | 
30 | @keyframes Home-logo-spin {
31 |   from {
32 |     transform: rotate(0deg);
33 |   }
34 |   to {
35 |     transform: rotate(360deg);
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/Home.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import logo from './react.svg';
 3 | import './Home.css';
 4 | 
 5 | class Home extends React.Component {
 6 |   render() {
 7 |     return (
 8 |       <div className="Home">
 9 |         <div className="Home-header">
10 |           <img src={logo} className="Home-logo" alt="logo" />
11 |           <h2>Welcome to Razzle</h2>
12 |         </div>
13 |         <p className="Home-intro">
14 |           To get started, edit <code>src/App.js</code> or{' '}
15 |           <code>src/Home.js</code> and save to reload.
16 |         </p>
17 |         <ul className="Home-resources">
18 |           <li>
19 |             <a href="https://github.com/jaredpalmer/razzle">Docs</a>
20 |           </li>
21 |           <li>
22 |             <a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
23 |           </li>
24 |           <li>
25 |             <a href="https://palmer.chat">Community Slack</a>
26 |           </li>
27 |         </ul>
28 |       </div>
29 |     );
30 |   }
31 | }
32 | 
33 | export default Home;
34 | 


--------------------------------------------------------------------------------
/src/client.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | import React from 'react';
 3 | import App from './App';
 4 | import { AppRegistry } from 'react-native';
 5 | 
 6 | AppRegistry.registerComponent('App', () => App);
 7 | 
 8 | AppRegistry.runApplication('App', {
 9 |   initialProps: {},
10 |   rootTag: document.getElementById('root'),
11 | });
12 | 
13 | if (module.hot) {
14 |   module.hot.accept();
15 | }
16 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import app from './server';
 2 | import http from 'http';
 3 | 
 4 | const server = http.createServer(app);
 5 | 
 6 | let currentApp = app;
 7 | 
 8 | server.listen(process.env.PORT || 3000, error => {
 9 |   if (error) {
10 |     console.log(error);
11 |   }
12 | 
13 |   console.log('🚀 started');
14 | });
15 | 
16 | if (module.hot) {
17 |   console.log('✅  Server-side HMR Enabled!');
18 | 
19 |   module.hot.accept('./server', () => {
20 |     console.log('🔁  HMR Reloading `./server`...');
21 |     server.removeListener('request', currentApp);
22 |     const newApp = require('./server').default;
23 |     server.on('request', newApp);
24 |     currentApp = newApp;
25 |   });
26 | }
27 | 


--------------------------------------------------------------------------------
/src/razzle.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | module.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('./somthing.css')),
10 |       )
11 |       .filter(
12 |         rule =>
13 |           !(
14 |             rule.test &&
15 |             rule.test.exec &&
16 |             rule.test.exec('./somthing.module.css')
17 |           ),
18 |       );
19 | 
20 |     const extPlugin = require(require.resolve('extract-text-webpack-plugin'));
21 |     config.plugins = config.plugins.filter(w => !(w instanceof extPlugin));
22 | 
23 |     return config;
24 |   },
25 | };
26 | 


--------------------------------------------------------------------------------
/src/react.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <svg width="256px" height="228px" viewBox="0 0 256 228" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
3 |     <g>
4 |         <path d="M210.483381,73.8236374 C207.827698,72.9095503 205.075867,72.0446761 202.24247,71.2267368 C202.708172,69.3261098 203.135596,67.4500894 203.515631,65.6059664 C209.753843,35.3248922 205.675082,10.9302478 191.747328,2.89849283 C178.392359,-4.80289661 156.551327,3.22703567 134.492936,22.4237776 C132.371761,24.2697233 130.244662,26.2241201 128.118477,28.2723861 C126.701777,26.917204 125.287358,25.6075897 123.876584,24.3549348 C100.758745,3.82852863 77.5866802,-4.82157937 63.6725966,3.23341515 C50.3303869,10.9571328 46.3792156,33.8904224 51.9945178,62.5880206 C52.5367729,65.3599011 53.1706189,68.1905639 53.8873982,71.068617 C50.6078941,71.9995641 47.4418534,72.9920277 44.4125156,74.0478303 C17.3093297,83.497195 0,98.3066828 0,113.667995 C0,129.533287 18.5815786,145.446423 46.8116526,155.095373 C49.0394553,155.856809 51.3511025,156.576778 53.7333796,157.260293 C52.9600965,160.37302 52.2875179,163.423318 51.7229345,166.398431 C46.3687351,194.597975 50.5500231,216.989464 63.8566899,224.664425 C77.6012619,232.590464 100.66852,224.443422 123.130185,204.809231 C124.905501,203.257196 126.687196,201.611293 128.472081,199.886102 C130.785552,202.113904 133.095375,204.222319 135.392897,206.199955 C157.14963,224.922338 178.637969,232.482469 191.932332,224.786092 C205.663234,216.837268 210.125675,192.78347 204.332202,163.5181 C203.88974,161.283006 203.374826,158.99961 202.796573,156.675661 C204.416503,156.196743 206.006814,155.702335 207.557482,155.188332 C236.905331,145.46465 256,129.745175 256,113.667995 C256,98.2510906 238.132466,83.3418093 210.483381,73.8236374 L210.483381,73.8236374 Z M204.118035,144.807565 C202.718197,145.270987 201.281904,145.718918 199.818271,146.153177 C196.578411,135.896354 192.205739,124.989735 186.854729,113.72131 C191.961041,102.721277 196.164656,91.9540963 199.313837,81.7638014 C201.93261,82.5215915 204.474374,83.3208483 206.923636,84.1643056 C230.613348,92.3195488 245.063763,104.377206 245.063763,113.667995 C245.063763,123.564379 229.457753,136.411268 204.118035,144.807565 L204.118035,144.807565 Z M193.603754,165.642007 C196.165567,178.582766 196.531475,190.282717 194.834536,199.429057 C193.309843,207.64764 190.243595,213.12715 186.452366,215.321689 C178.384612,219.991462 161.131788,213.921395 142.525146,197.909832 C140.392124,196.074366 138.243609,194.114502 136.088259,192.040261 C143.301619,184.151133 150.510878,174.979732 157.54698,164.793993 C169.922699,163.695814 181.614905,161.900447 192.218042,159.449363 C192.740247,161.555956 193.204126,163.621993 193.603754,165.642007 L193.603754,165.642007 Z M87.2761866,214.514686 C79.3938934,217.298414 73.1160375,217.378157 69.3211631,215.189998 C61.2461189,210.532528 57.8891498,192.554265 62.4682434,168.438039 C62.9927272,165.676183 63.6170041,162.839142 64.3365173,159.939216 C74.8234575,162.258154 86.4299951,163.926841 98.8353334,164.932519 C105.918826,174.899534 113.336329,184.06091 120.811247,192.08264 C119.178102,193.65928 117.551336,195.16028 115.933685,196.574699 C106.001303,205.256705 96.0479605,211.41654 87.2761866,214.514686 L87.2761866,214.514686 Z M50.3486141,144.746959 C37.8658105,140.48046 27.5570398,134.935332 20.4908634,128.884403 C14.1414664,123.446815 10.9357817,118.048415 10.9357817,113.667995 C10.9357817,104.34622 24.8334611,92.4562517 48.0123604,84.3748281 C50.8247961,83.3942121 53.7689223,82.4701001 56.8242337,81.6020363 C60.0276398,92.0224477 64.229889,102.917218 69.3011135,113.93411 C64.1642716,125.11459 59.9023288,136.182975 56.6674809,146.725506 C54.489347,146.099407 52.3791089,145.440499 50.3486141,144.746959 L50.3486141,144.746959 Z M62.7270678,60.4878073 C57.9160346,35.9004118 61.1112387,17.3525532 69.1516515,12.6982729 C77.7160924,7.74005624 96.6544653,14.8094222 116.614922,32.5329619 C117.890816,33.6657739 119.171723,34.8514442 120.456275,36.0781256 C113.018267,44.0647686 105.66866,53.1573386 98.6480514,63.0655695 C86.6081646,64.1815215 75.0831931,65.9741531 64.4868907,68.3746571 C63.8206914,65.6948233 63.2305903,63.0619242 62.7270678,60.4878073 L62.7270678,60.4878073 Z M173.153901,87.7550367 C170.620796,83.3796304 168.020249,79.1076627 165.369124,74.9523483 C173.537126,75.9849113 181.362914,77.3555864 188.712066,79.0329319 C186.505679,86.1041206 183.755673,93.4974728 180.518546,101.076741 C178.196419,96.6680702 175.740322,92.2229454 173.153901,87.7550367 L173.153901,87.7550367 Z M128.122121,43.8938899 C133.166461,49.3588189 138.218091,55.4603279 143.186789,62.0803968 C138.179814,61.8439007 133.110868,61.720868 128.000001,61.720868 C122.937434,61.720868 117.905854,61.8411667 112.929865,62.0735617 C117.903575,55.515009 122.99895,49.4217021 128.122121,43.8938899 L128.122121,43.8938899 Z M82.8018984,87.830679 C80.2715265,92.2183886 77.8609975,96.6393627 75.5753239,101.068539 C72.3906004,93.5156998 69.6661103,86.0886276 67.440586,78.9171899 C74.7446255,77.2826781 82.5335049,75.9461789 90.6495601,74.9332099 C87.9610684,79.1268011 85.3391054,83.4302106 82.8018984,87.8297677 L82.8018984,87.830679 L82.8018984,87.830679 Z M90.8833221,153.182899 C82.4979621,152.247395 74.5919739,150.979704 67.289757,149.390303 C69.5508242,142.09082 72.3354636,134.505173 75.5876271,126.789657 C77.8792246,131.215644 80.2993228,135.638441 82.8451877,140.03572 L82.8456433,140.03572 C85.4388987,144.515476 88.1255676,148.90364 90.8833221,153.182899 L90.8833221,153.182899 Z M128.424691,184.213105 C123.24137,178.620587 118.071264,172.434323 113.021912,165.780078 C117.923624,165.972373 122.921029,166.0708 128.000001,166.0708 C133.217953,166.0708 138.376211,165.953235 143.45336,165.727219 C138.468257,172.501308 133.434855,178.697141 128.424691,184.213105 L128.424691,184.213105 Z M180.622896,126.396409 C184.044571,134.195313 186.929004,141.741317 189.219234,148.9164 C181.796719,150.609693 173.782736,151.973534 165.339049,152.986959 C167.996555,148.775595 170.619884,144.430263 173.197646,139.960532 C175.805484,135.438399 178.28163,130.90943 180.622896,126.396409 L180.622896,126.396409 Z M163.724586,134.496971 C159.722835,141.435557 155.614455,148.059271 151.443648,154.311611 C143.847063,154.854776 135.998946,155.134562 128.000001,155.134562 C120.033408,155.134562 112.284171,154.887129 104.822013,154.402745 C100.48306,148.068386 96.285368,141.425078 92.3091341,134.556664 L92.3100455,134.556664 C88.3442923,127.706935 84.6943232,120.799333 81.3870228,113.930466 C84.6934118,107.045648 88.3338117,100.130301 92.276781,93.292874 L92.2758697,93.294241 C96.2293193,86.4385872 100.390102,79.8276317 104.688954,73.5329157 C112.302398,72.9573964 120.109505,72.6571055 127.999545,72.6571055 L128.000001,72.6571055 C135.925583,72.6571055 143.742714,72.9596746 151.353879,73.5402067 C155.587114,79.7888993 159.719645,86.3784378 163.688588,93.2350031 C167.702644,100.168578 171.389978,107.037901 174.724618,113.77508 C171.400003,120.627999 167.720871,127.566587 163.724586,134.496971 L163.724586,134.496971 Z M186.284677,12.3729198 C194.857321,17.3165548 198.191049,37.2542268 192.804953,63.3986692 C192.461372,65.0669011 192.074504,66.7661189 191.654369,68.4881206 C181.03346,66.0374921 169.500286,64.2138746 157.425315,63.0810626 C150.391035,53.0639249 143.101577,43.9572289 135.784778,36.073113 C137.751934,34.1806885 139.716356,32.3762092 141.672575,30.673346 C160.572216,14.2257007 178.236518,7.73185406 186.284677,12.3729198 L186.284677,12.3729198 Z M128.000001,90.8080696 C140.624975,90.8080696 150.859926,101.042565 150.859926,113.667995 C150.859926,126.292969 140.624975,136.527922 128.000001,136.527922 C115.375026,136.527922 105.140075,126.292969 105.140075,113.667995 C105.140075,101.042565 115.375026,90.8080696 128.000001,90.8080696 L128.000001,90.8080696 Z" fill="#00D8FF"></path>
5 |     </g>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/src/server.js:
--------------------------------------------------------------------------------
 1 | import App from './App';
 2 | 
 3 | import express from 'express';
 4 | import ReactDOMServer from 'react-dom/server';
 5 | import { AppRegistry } from 'react-native';
 6 | 
 7 | const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
 8 | 
 9 | const server = express();
10 | 
11 | AppRegistry.registerComponent('App', () => App);
12 | 
13 | server
14 |   .disable('x-powered-by')
15 |   .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
16 |   .get('/*', (req, res) => {
17 |     const { element, getStyleElement } = AppRegistry.getApplication('App', {});
18 |     const html = ReactDOMServer.renderToString(element);
19 |     const css = ReactDOMServer.renderToStaticMarkup(getStyleElement());
20 | 
21 |     res.send(
22 |       `<!doctype html>
23 |     <html lang="">
24 |     <head>
25 |         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
26 |         <meta charSet='utf-8' />
27 |         <title>Welcome to Razzle</title>
28 |         <meta name="viewport" content="width=device-width, initial-scale=1">
29 |         <style id="root-stylesheet">
30 |         html,
31 |         body,
32 |         #root,
33 |         #root > div,
34 |         #root > div > div,
35 |         #root > div > div > div {
36 |           width: 100%;
37 |           height: 100%;
38 |         }
39 |         </style>
40 |         ${css}
41 |         ${
42 |           process.env.NODE_ENV === 'production'
43 |             ? `<script src="${assets.client.js}" defer></script>`
44 |             : `<script src="${assets.client.js}" defer crossorigin></script>`
45 |         }
46 |     </head>
47 |     <body>
48 |         <div id="root">${html}</div>
49 |     </body>
50 | </html>`,
51 |     );
52 |   });
53 | 
54 | export default server;
55 | 


--------------------------------------------------------------------------------