All notable changes to this project will be documented in this file. This project adheres to Semantic Versioning.
NOTE: This isn't a traditional library style project for which semantic versioning makes sense, it's a project that you clone and extend to your own desire. Therefore I am not using semantic version in a strict manner, but rather to indicate the level of changes that have occurred.
I'll map them as follows:
- Major: Large application structure / technology changes. E.g. moving from react-router v2 to v4.
- Minor: New features or changes to the build tools.
- Patch: Small(ish) fixes/restructuring that I expect will take minimal effort to merge in.
The previous service worker implementation was completely incorrect, causing an aggressive cache on production that would not expire. Please update to this latest version which makes use of the offline-plugin now.
The v1 of code-split-component was not optimal in design and suffered from double render and checksum issues on production runs. I have just done an alpha rewrite of this library which is completely optimised for to be used within an SSR environment, allowing for rehydration of code split chunks/modules on the client before a render occurs. This means that the checksums exactly match the content returned by the server. I know this is an alpha release of a library, but it's already working tons better than v1, and v1 in my opinion is completely broken. Therefore I am fast tracking the upgrade of this starter kit to avoid the case where people inadvertently go to production with an inefficient model.
The major areas that have changed are the following:
- /tools/webpack/configFactory
- /src/client/index.js
- /src/universalMiddleware/*
- /src/shared/universal/components/App/App.js
Closes #159
You can disable the development vendor DLL feature via an environment variable. See the .env_example
You can set libraries to be ignored by the vendor DLL. See the .env_example
### Fixed
Issue with HappyPack configuration. The threadloop configuration causes strange breaking behaviour on our development server. Thanks to @strues for this. Closes #160
Cleans up existing commands, moving many of them into tools/scripts.
Major improvements to the npm run flow:remove command. It now removes everything flow related from the project. I mean everything. Tread carefully. :)
An .editorconfig configuration. See http://editorconfig.org/
A webpack bundle analyze command.
Finally fixed our Content Security Policy, and included a "nonce" strategy that allows us to declare known inline scripts safe for execution. I would highly recommend you read the updated README.md as well as the comments within the src/server/index.js file. Also pay special attention the "nonce" middleware and how we are using it within the "render" function of our universal middleware. You will see I attach the nonce to the inline script used to load the service worker. You will need to use a similar strategy for any other inline scripts you attach (for example state rehydration scripts).
Issue where flow exec script was printing extra error information when the flow command returns with a failure.
The flow-typed install will now overwrite existing defs.
Updates dependencies, including flow-bin to 0.34.
Removes flow-typed dir from the project and adds a new npm script allowing you to install the latest lib defs based on the project's current dependencies. The flow-typed dir shall remain ignored from the repository. It will be up to you to include their installation within your CI workflows etc.
Updates the manifest.json to contain all icons as well as a start_url entry.
Disables the service worker script injection unless in production mode.
Fixes the http-equiv meta tags and moves them into the App component, managed by react-helmet now.
Progressive Web Application support via manifest.json as well as a service worker giving us aggressive caching on our assets and offline support.
The project has evolved and I was experiencing issues with the rigid environment configuration. Therefore the application configuration has been refactored, allowing for a much more flexible approach. Manage your env variables the way you see fit. Provide them at build or runtime, or both. Read all about it in the updated README.md.
Renamed the flow npm scripts. Please check the package.json for the new values.
A new npm script to do deployment to now. Stop fighting it, and start using their services! :)
Some restructuring and cleaning up of the build tools have taken place.
A HappyPack and Vendor DLL implementation to improve the development experience. The Vendor DLL is automatically calculated and build within the development server, reducing any management overhead. We use a md5 hash against the project's dependencies to know when to rebuild the vendor dll. - thanks goes to @strues
The flow-coverage-report tool with an associated npm script, allowing us to do coverage reporting for our flow types.
The react-helmet flow definition from flow-typed.
The 'removetypes' npm script.
Invalid babel-preset-latest options pass-through.
React element type definition.
Issue where the universalMiddleware was being bundled into the server bundle.
Duplicate react-router dependency on "devDependencies" and normal "dependencies".
Render function of middleware to not unnecessarily wrap the react output with an additional div. This seem to have subvented the react checksum guard, even though the checksums should have failed.
### Changed
Updates to latest react-router 4 alpha.
Full refactor of the application, moving it onto react-router v4. Our components have been structured in a nested manner to reflect the declarative nature of RR4. No more centralised routing configuration!
Added code-split-component library to help us do declarative based Webpack 2 code splitting. This also simplifies our webpack configuration, no longer requiring the "context hack".
Moved flow-typed definitions back to the root directory as the flow-typed guys have stated that this will be the default moving forward.
Moves the RHL3 AppContainer resolution into a ReactHotLoader component.
Moved the custom react flow types into the /src/shared/universal/types/react.js file.
A new npm task allowing you to remove all flow types from the source. You will just need to do some minor cleaning up thereafter.
Eslint import plugin version.
Updated dependencies.
A huge refactor of the application structure has taken place. Based on experience and using this boilerplate to build a larger application I noticed a lot of pain points, especially around the hot development experience. In order to alleviate lots of these problems the application has been restructured to build into 3 separate bundles:
- server
- universalMiddleware
- client
The universalMiddleware bundle is new bundle, and will be the middleware that our express server will use to server our universal react application. Having it be built separately from the server allows you to target the bundle with a unique webpack configuration should you wish, whilst also allowing us to only rebuild the middleware when doing hot development.
Some other notable breaking changes:
- The shared folders now contain two sub-folders, node and universal. The universal folder should contain all the code that is shared and safe to include with any of the bundles, whilst the node subfolder should only contain code shared between the server or universalMiddleware bundles.
- The favicon for the htmlPage render has been moved into the public folder.
- We are using the babel-preset-latest for ALL of our bundles. This allows you to use the same javascript syntax across any of them without worrying about what each target environment supports. In the future this will be optimized so that the node bundles will only get the syntax that they are missing transpiled.
- The webpack configuration DefinePlugin section has been refactored to specify the full
process.env.{key}for each for the env vars we provide instead of replacing the wholeprocess.envobject. This allows you to provide any additional custom env vars during execution time.
An issue with the webpack configuration which prevented multiple chunks when build a dev version of the server bundle, this would then result in errors on resolving our async routes. Phew! That was a hard fought fight.
Updates the routing configuration to be concise.
Unfortunately webpack doesn't support System.import statements containing expressions when doing a target=node bundle. Therefore I have had to reluctantly revert back to the more verbose previous way of doing things.
I have picked up on an issue with webpack's tree shaking feature. Importing a constant boolean value from another file (i.e. our config files) and wrapping a code block with an if statement based on the respective value doesn't result in tree shaking even if the value is false. Therefore I have had to "inline" these statements, which does then result in tree shaking working.
For example:
import { IS_HOT_DEVELOPMENT } from '../config';
if (IS_HOT_DEVELOPMENT) {
// tree shake me
}
Has to be:
if (process.env.NODE_ENV === 'development' && module.hot) {
// tree shake me
}
Please be aware of this.
babel-polyfill to client bundle output.
Webpack context regex to be windows path friendly.
System.import expression within routes to not use a template string as Webpack throws warnings for these.
Big restructure and improvement to the dynamic routing / code splitting configuration. We no longer need the previous manual import hacks for the routes to allow Hot Module Reloading to work. Yay! The ~/src/shared/components/App/ now has subfolders, one for "lib" components (i.e. components to be reused across views/routes), and a "views" folder which will contain components used for our routes. All our primary routes which we will use for code splitting have been moved to ~/src/shared/components/App/views
Environment variables from the .env files are now automatically applied to the webpack DefinePlugin section, no longer requiring any error prone manual intervention.
Updates dependencies.
Minor optimization to bundle build size.
Adds missing plugin dependency for the transform-object-rest-spread babel plugin.
Moved flow files into the tools dir.
Minor enhancement to eslint config to play nicely with flow type imports.
Moved the styles/scripts imports from react-helmet to be below the application styles/scripts.
Cleaned up the config guards.
Updated the .envnow file resolution.
Added missing rimraf dependency.
Flow type checking. Just a simple configuration for now, and we are only including definitions from the maintained 'flow-typed' repo. Closes #57
Moved public dir resolution into configs.
The transform-object-rest-spread and transform-class-properties as they are too useful when developing react projects.
Centralised env config values into config files so that they get parsed and validated in a single place and once.
Long-term caching support. Closes #58
Base robots.txt file to the public assets.
.ico to the static files supported file format lists in the webpack config factory.
Pulled out utils from webpack configFactory.
Moved favicon to be colocated with the htmlPage.
The "public" folder is now routed to the HTTP root.
Fixed eslint rule on the configFactory.js
Changed url-loader to only emit files for client bundles.
Replaced "fake-style-loader" with "css-loader/locals". Thanks @giltig! Closes #59
### Breaking Changes
Complete restructure to the development and build tooling. All put into the "tools" directory now.
Ripped out our runtime dependencies on webpack. This was done by adding some new environment configuration variables and then combining them with the awesome 'app-root-dir' library.
Improved the react-helmet implementation example.
The server side render method has been massively simplified as we are now using react-helmet to control our page header from our components. Closes #11
A 'public' static files endpoint, with a favicon implementation. Closes #14
### Changed
The server render helper now resolves the 'assets.json' via the webpack configuration for the client bundle.
### Fixed
Small issue with the dev server not hot reloading when just the server code changes.
The projects dependencies structure so that the "dependencies" section contains ALL libraries that are required for the server runtime. The "devDependencies" section contains the libraries required for building the project. Fixes #27
Updated dependencies.
Fixed dependencies - moving required devDependencies into dependencies.
Fixed project to match latest eslint configuration.
Disabled the eslint rule required all files containing JSX to have a .jsx file extension.
No Changes. Version bump to fix npm documentation.
The devServer is far more robust, with webpack changes or process term signals resulting in any existing connections being forcefully disposed, whilst if only the server/client bundles get recompiled then existing connections are allowed to end. This results in a much nice dev experience.
Simplified the externals configuration for the server, making it that we don't rely on manual intervention on a per library install basis. Thanks @swernerx!!
Updated dependencies.
Node version to 6.3.1
HMR reloading of asynchronous react-router routes. We have had to add a workaround section within the routes configuration. Please see the routes/index.js file for more info.
Fixed the HMR configuration. We were incorrectly using module.hot.accept() which would actually accept all changes. Instead we needed to target the direct file.
Updated dependencies.
url-loader with a configuration allowing for images/fonts to be imported. An example of this has been included in the App component.
Updated dependencies.
The client side router configuration now handles redirect and "no renderProps" cases.
Updated the following dependencies:
- react-router
- eslint
- eslint-plugin-jsx-a11y
Version 1 of the react-universally boilerplate. From here on out we are all about semantic versioning with a clear recording of all changes made to the project.