https://github.com/razum2um/webpacker-remote
🔗 Integrate CRA builds into Webpacker
https://github.com/razum2um/webpacker-remote
create-react-app rails webpack webpacker
Last synced: about 1 year ago
JSON representation
🔗 Integrate CRA builds into Webpacker
- Host: GitHub
- URL: https://github.com/razum2um/webpacker-remote
- Owner: razum2um
- License: mit
- Created: 2021-01-12T11:42:54.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-28T20:38:46.000Z (over 3 years ago)
- Last Synced: 2025-03-18T19:51:57.361Z (over 1 year ago)
- Topics: create-react-app, rails, webpack, webpacker
- Language: Ruby
- Homepage:
- Size: 27.3 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Webpacker::Remote
[](https://badge.fury.io/rb/webpacker-remote)
[](https://app.codecov.io/gh/lunatic-cat/webpacker-remote)
- support for `create-react-app` developed in a separate repo
- support for multiple external frontend builds, right now `webpacker` is [a singleton](https://github.com/rails/webpacker/blob/6ba995aed2b609a27e4e35ec28b2a7f688cce0cf/lib/webpacker/helper.rb#L5L7)
- support [shakapacker](https://github.com/shakacode/shakapacker)
- support for both webpack-asset-manifest-3 and webpack-asset-manifest-5 (including `assets` and without this key)
## Usage
- ensure you're using `webpack-asset-manifest` to generate proper manifest structure
- build `webpack` bundle & upload `build` directory (incl. `manifest.json`) before deploy
- in `config/initializers/remote_webpacker.rb`
```rb
# given we can fetch `https://asset_host/build/manifest.json`
# and it contains paths relative to `https://asset_host/build/`
REMOTE_WEBPACKER = Webpacker::Remote.new(root_path: 'https://asset_host/build/', config_path: 'manifest.json')
```
- in `app/views/layouts/application.html.erb` (**not** `javascript_pack_tag`)
```rb
<%= javascript_pack_tag 'main', webpacker: REMOTE_WEBPACKER %>
#=>
```
**NOTE** if you're on `webpacker` (not `shakapacker`), then you should use `javascript_packs_with_chunks_tag`
Of course, you can use as many build as you like and do blue-green deployments using gems like `rollout`
## CRA Requirements
For `create-react-app` you should use `webpack-assets-manifest` instead of built-in `webpack-manifest-plugin`. You have to patch configuration like this:
- in `package.json`
```diff
+ "customize-cra": "^1.0.0",
+ "react-app-rewired": "^2.2.1"
+ "webpack-assets-manifest": "^5.1.0"
...
- "build": "react-scripts build"
+ "build": "react-app-rewired build"
```
- add `config-overrides.js`
```js
const { override } = require("customize-cra");
const WebpackAssetsManifest = require('webpack-assets-manifest')
const whenInMode = (mode, fn) => config => (config.mode == mode) ? fn(config) : config;
const removeWebpackPlugin = pluginName => config => {
config.plugins = config.plugins.filter(
p => p.constructor.name !== pluginName
);
return config;
};
const addWebpackPlugin = plugin => config => {
config.plugins.push(plugin);
return config;
};
const webpackerAssetManifestConfig = {
integrity: false,
entrypoints: true,
writeToDisk: true,
output: 'manifest.json'
};
module.exports = override(
removeWebpackPlugin('ManifestPlugin'),
whenInMode('production', addWebpackPlugin(new WebpackAssetsManifest(webpackerAssetManifestConfig)))
);
```
- check `PUBLIC_URL='https://...' npm run build` and `build/manifest.json` should look like this:
```json
{
"entrypoints": {
"main": {
"assets": {
"js": [
"static/js/main.hashsum.js"
],
"css": [
"static/css/main.hashsum.css"
]
}
}
},
"main.css": "static/css/main.hashsum.css",
"main.js": "static/js/main.hashsum.js"
}
```
## Tests
Specify webpacker gem explicitly:
```sh
WEBPACKER_GEM_VERSION='shakapacker|6.2.1' bundle exec rspec
WEBPACKER_GEM_VERSION='webpacker|5.4.3' bundle exec rspec
```