v2 (#630)

* Webpack v4 (#525)

* (feat) Adds webpack v4, removes CommonsChunkPlugin and sets mode

* (feat) Yarn locks

* (feat) Removes NamedModulesPlugin and NoEmitOnErrorsPlugin

* (feat) Upgrades eslint-loader and replaces setup for before (devServer)

* (feat) Updates some loaders to work with webpack v4

* Add thread-loader, extract-text-webpack-plugin@beta.0

Adds thread-loader and extract-text-webpack-plugin beta.

* Remove automatic vendor bundling, add @todo

* Remove lock

* (fix) Fixes Inferno, JSXstyle, Reason, Typescript and WithVendor

* Fix TS HMR

* Bump to latest webpack

* Update README.md

* Move to Yarn Workspaces, fix tests

* Remove unused scripts for bootstrap and clean

* v2.0.0-alpha.1

* v2.0.0-alpha.2

* v2.0.0-alpha.3

* Drop extract-text for mini-css. Bump start-server (no more refreshes)

* Update docs with new hot restart behavior

* Make `rs` an h3 in docs

* v2.0.0-alpha.4

* Update package descriptions

* Bump mini-css-extract-plugin to 0.3.0 (#559)

* Add Multistep true so webpack 4 HMR can work (#558)

* Bump deps, fix TS example

* v2.0.0-alpha.5

* Changed name of the about page component: Home -> About (#561)

* chore(package): update lerna to version 2.9.1 (#560)

* including polyfills in production build (#562)

* Fix logic on polyfill inclusion

* v2.0.0-alpha.6

* Fix boolean

* v2.0.0-alpha.7

* s/your/you (#566)

* Replace clientCompiler before serverCompiler (#569)

* Update README.md (#564)

Fixed links to Node Inspector docs

* Add an example with Hyperapp (#549)

* Setup Hyperapp example

Enable HMR

Don't touch the yarn lock

Cleanup

Keep naming convention

Don't touch preact

Reverse formatting on the preact example

* Undo formatting something in the preact example

Fix formatting

Fix formatting

Fix formatting

Fix format

* 2.0.0-alpha.7

* Bump hyperapp version

* Add Koa usage example (#533)

* Add Koa usage example

* Extend Koa example documentation

* Make app use default koa styles and logo

* Correct Koa URL on doc

* Add webpack bar (#563)

* Remove yarn.lock from Koa example

* Bump deps

* v2.0.0-alpha.8

* add emitFile in url-loader options (#576)

* Add elm-package post on circleci

* Move elm install to dependencies.pre

* Use npm to install elm globally

* Install elm not elm-package. lol.

* Bump deps

* v2.0.0-y.0

* Update readme

* v2.0.0-alpha.9

* Limiting HMR to App (#577)

* #fix starting server code after compile assets (sync) (#575)

* Use webpack-dev-server-speedy for perf boost!

* v2.0.0-alpha.10

* Bump Webpack to 4.6.0

* v2.0.0-alpha.11

* Fix uglify options

* v2.0.0-alpha.12

* Update ESLint (#588)

* Upgrade typescript example (#589)

* ♻️ Cleanup random keystrokes in Home component

* ✨ Upgrade deps and TypeScript. Now supports the new fragment syntax<></>

* 👨🏼‍🎨 Add myself to the contributers list

* 📏 Prietier linting fixes

* Update README.md

* Update README.md

* Better defaults for Typescript example (#593)

* Better defaults for Typescript example

After running into multiple bugs having to deal with whether typescript was precompiling the same way that the babel version was (some include: jest testing, repl loading, mjs support) I realized that the big issue is that razzle had figured out solutions for each env based on webpack, so instead of having the added complexity of not knowing if I had proper typescript parody, I figured just remove that layer and use typescript for the one thing I wanted: type checking.

Happy to go into detail on those bugs, but I think the main point is this approach seems a better DX experiance out of the box, while offering more heavy solutions as comments.

* Update razzle.config.js

* Remove raf from examples (#601)

* Remove raf from all examples

* Add package-lock and yarn-lock to .gitignore in examples.

* Change env stringify so it doesn't overwrite process.env (#611)

* Razzle plugins + razzle-typescript-plugin (#605)

* Add a plugin system

* Add razzle-typescript-plugin

* Change TypeScript example to use razzle-typescript-plugin

* Small refactor to helpers

* Add myself to contributors

* Use fork-ts-checker-webpack-plugin instead of tslint-loader

* Make useBabel false by default

* Add esModuleInterop, remove console tslint rules

* Improve README

* Moved loaderFinder to razzle-dev-utils

* Remove -- from circle.yml

* Fix start test now that logger has changed

* Fix shell output

* Don't silence razzle build test

* Teardown beforeAll

* Remove 'use strict' from build fixtures

Author: jaredpalmer

.all-contributorsrc

@@ -56,6 +56,26 @@
         "code",
         "ideas"
       ]
+    },
+    {
+      "login": "HofmannZ",
+      "name": "Zino Hofmann",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/17142193?v=4",
+      "profile": "https://www.linkedin.com/in/zinohofmann/",
+      "contributions": [
+        "example"
+      ]
+    },
+    {
+      "login": "lucasterra",
+      "name": "Lucas Terra",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/441058?v=4",
+      "profile": "https://www.linkedin.com/in/lucasterra7/",
+      "contributions": [
+        "code",
+        "example",
+        "plugin"
+      ]
     }
   ]
-}
+}

README.md

@@ -1,6 +1,9 @@
+**WARNING: This is the documentation for `razzle@next` (Webpack 4).**  
+[Go here for for razzle@0.8.x (stable) docs (Webpack 3)](https://github.com/jaredpalmer/razzle/tree/master).
+
 ![repo-banner](https://user-images.githubusercontent.com/4060187/28923990-050a32d4-782e-11e7-9da7-574ce5a8b455.png)
 
-[![CircleCI](https://circleci.com/gh/jaredpalmer/razzle/tree/master.svg?style=shield)](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)
+[![CircleCI](https://circleci.com/gh/jaredpalmer/razzle/tree/master.svg?style=shield)](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) [![Known Vulnerabilities](https://snyk.io/test/github/jaredpalmer/after.js/badge.svg?targetFile=package.json)](https://snyk.io/test/github/jaredpalmer/razzle?targetFile=package.json)
 
 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. Aiming to fill this void, Razzle is a tool that abstracts all complex configuration needed for SSR into a single dependency--giving you the awesome developer experience of [create-react-app](https://github.com/facebookincubator/create-react-app), but then leaving the rest of your app's architectural decisions about frameworks, routing, and data fetching up to you. With this approach, Razzle not only works with React, but also Reason, Elm, Vue, Angular, and most importantly......whatever comes next.
 
@@ -60,13 +63,17 @@ By default, runs tests related to files changed since the last commit.
 
 ### `npm start -- --inspect` or `yarn start -- --inspect`
 
-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/).
+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/guides/debugging-getting-started/).
 
 ### `npm start -- --inspect-brk` or `yarn start -- --inspect-brk`
 
-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/).
+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/guides/debugging-getting-started/).
 
----
+### `rs`
+
+If your application is running, and you need to manually restart your server, you do not need to completely kill and rebundle your application. Instead you can just type `rs` and press enter in terminal.
+
+## <img src="https://user-images.githubusercontent.com/4060187/37915268-209644d0-30e7-11e8-8ef7-086b529ede8c.png" width="500px" alt="Razzle Hot Restart"/>
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -222,7 +229,7 @@ Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) f
 
 **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.
 
-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.
+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 you 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.
 
 ## Inspiration
 

circle.yml

@@ -3,9 +3,11 @@ machine:
     version: 8
 
 dependencies:
+  pre:
+    - yarn global add elm
   override:
     - yarn
-
+ 
 test:
   override:
-    - yarn e2e -- --runInBand
+    - yarn e2e --runInBand

examples/.gitignore

@@ -0,0 +1,2 @@
+yarn.lock
+package-lock.json

examples/basic/package.json

@@ -1,6 +1,6 @@
 {
   "name": "razzle-examples-basic",
-  "version": "1.0.1",
+  "version": "2.0.0-alpha.12",
   "license": "MIT",
   "scripts": {
     "start": "razzle start",
@@ -14,7 +14,6 @@
     "react-dom": "^16.0.0"
   },
   "devDependencies": {
-    "raf": "^3.3.2",
-    "razzle": "^1.0.1"
+    "razzle": "^2.0.0-alpha.12"
   }
-}
+}

examples/basic/src/server.js

@@ -13,22 +13,23 @@ server
   .get('/*', (req, res) => {
     const markup = renderToString(<App />);
     res.send(
+      // prettier-ignore
       `<!doctype html>
     <html lang="">
     <head>
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta charSet='utf-8' />
         <title>Welcome to Razzle</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        ${assets.client.css
-          ? `<link rel="stylesheet" href="${assets.client.css}">`
-          : ''}
-         ${process.env.NODE_ENV === 'production'
-           ? `<script src="${assets.client.js}" defer></script>`
-           : `<script src="${assets.client.js}" defer crossorigin></script>`}
+        ${
+          assets.client.css
+            ? `<link rel="stylesheet" href="${assets.client.css}">`
+            : ''
+        } 
     </head>
     <body>
-        <div id="root">${markup}</div>
+        <div id="root">${markup}</div>    
+        <script src="${assets.client.js}" defer crossorigin></script>
     </body>
 </html>`
     );