Context

Our team was struggling with moving over a project using SASS to work within the confines of CSS modules and the existing configuration options (via webpack.config.*.js files in our project root) wouldn't allow us to replace the css loader, causing all kinds of hacks and work arounds, to make SASS viable. Writing our own archetype seems to be the given solution, but I'd rather not have to maintain my own archetype when I otherwise agree with the rest of the conventions provided electrode-archetype-react-app.

Solution: Webpack Partial Overrides

TL;DR; Define your own, project specific Webpack partials, and have them replace what's defined in the archetype.

I have a modification to the base webpack config file that allows projects using electrode to specify webpack partials in the projects config directory(config/webpack/partial/) with the same names as partials in node-modules/electrode-archetype-react-app-dev/config/webpack/partials which replaces what's in the archetype.

I've added a sequence property to each of the partials that were required() by config/webpack/base.js so that when it globs the ./partial directory it only grabs those partials with the correct sequence, (in this case 0 since it's base config object). This is a pretty MVP feature, but I figure that sequence could be used down the line to define which partials are required at which stage of the webpack config construction process. Overriding files in a projects config directory, would also need this sequence property.

This will require some documentation which I'm happy to write, but I wanted to get the code in front some of the core contributors to see if this is something worth developing. I've tried to touch the partial files as little as possible so they continue to work as expected with the rest of the webpack config files. Tests are passing 🎉

Hi guys,

we started to use electrode to build our webApp moving away from a custom configuration. What I notice is that there is a issue with webpack hot reloader. The app is losing the state every time that I apply a change and this is what the use of hot-reloader is suppose to avoid.

I'm running the dev server using gulp hot and every time that I apply a change the server is restarted because of this error:

[HMR] Cannot apply update. Need to do a full reload!

[HMR] Error: Aborted because 786 is not accepted
    at hotApply (http://127.0.0.1:2992/js/main.bundle.dev.js:391:31)
    at hotUpdateDownloaded (http://127.0.0.1:2992/js/main.bundle.dev.js:304:13)
    at hotAddUpdateChunk (http://127.0.0.1:2992/js/main.bundle.dev.js:284:13)
    at webpackHotUpdateCallback (http://127.0.0.1:2992/js/main.bundle.dev.js:5:12)
    at http://localhost:2992/js/0.41f46421a9e3394cf431.hot-update.js:1:1

I'm using

if (module.hot) {
   module.hot.accept();
 }

but this doesn't fix the issue. any suggestion? thanks a milion

cssModuleHook option is not working. "base.css"

$blue: #2196f3;
.test {
   color: $blue;
}

"server/index.js"

const postCssSimpleVars = require("postcss-simple-vars")`
support.load({
  cssModuleHook: {
    generateScopedName: 'local',
    use: [postCssSimpleVars]
  }
}).then(() => {
  SSRCaching.enableCaching();
  SSRCaching.setCachingConfig(cacheConfig);
  return electrodeServer(electrodeConfippet.config, [staticPathsDecor()])
})

=> "main.style.css"

$blue: #2196f3;
.base__test___2FzsK {
   color: $blue;
}

i expect file "main.style.css"

.test {
   color: #2196f3;
}

How can i do that? ( test in "samples/universal-react-node" ) Thank you.

Is there a way to make the page title dynamic? Preferably the rendered title tag, not just the document title in the browser. If someone can lead me in the right direction, I'd be happy to submit a pull request for the boilerplate.

There is either a problem building the production bundle, or pathing to the correct files are broken.

Running npm run prod results in path errors when loading style.*.css, as well as bundles.*.css From loading the main page of the boilerplate.

Running gulp build, then npm run prod seemingly generates the bundles, but the bundles (css & js) are both empty, with what looks to be the contents of index.html

The app using chunks will need to implement the following to use this.

Dev

// /config/utils/chunk-selector.js
module.exports = () => ({
    css: [
        'app',
        'third-party-something',
    ],
    js: 'app',
});

// /config/default.js

module.exports = {
    // …
    webapp: {
        // …
            options: {
                bundleChunkSelector: path.resolve(__dirname, './utils/chunk-selector'),

Prod

// /archetype/config/webpack/webpack.config.base.js
const appOverrides = {
    // …
    entry: {
        app: [
            'babel-polyfill',
            // ^ electrode-archetype-react-app-dev/config/webpack/partial/entry.js#L37
            path.resolve(appSrc.client, 'app.jsx')
        ],
        'third-party-something': path.resolve(appSrc.client, 'path/to/file'),
    },
};

const customMerger = (a, b) => {
    return (Array.isArray(a) && Array.isArray(b))
        ? [].concat(a).concat(b)
        : undefined;
};

module.exports = function webpackConfigBuilder(envOverrides = {}) {
    return function overrideElectrodeWebapp(composer, options, compose) {
        // this might be overkill (could probably just return the merge?)

        // …

        const config = compose();

        _.mergeWith(
            config,
            appOverrides,
            envOverrides,
            customMerger
        );
    };
};

// /archetype/config/webpack/webpack.config.dev.js

const baseWebPack = require('./webpack.config.base');

module.exports = baseWebPack({
    devtool: '#cheap-module-eval-source-map'
});

I verified this against my own app using semantic-ui-less and react-semantic-ui. The following scenarios worked:

• Dev mode
  • a single value for css in chunkSelector
  • an array of 2 values for css in chunkSelector
• Prod mode
  • a single key-value pair within entry (webpack.config.base)
  • a second key-value pair within entry (webpack.config.base

I couldn't hook this up directly to webpack would creating a breaking change with implementers who are relying on the man-in-the-middle. So I think this is the next best and unblocks more functionality already available from webpack.

resolves #708

Cmd: clap build Log:

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./app.js in /Users/zbrukas/workspace/personal/src/client
[15:45:28] >>Failed Execute electrode/build-dist-min webpack --config ~/node_modules/electrode-archetype-react-app-dev/config/webpack/webpack.config.js --colors (1.78 sec)
[15:45:28] >Done Process electrode/build-dist serial array [".clean.build","build-dist-dll","build-dist-min","build-dist:flatten-l10n","build-dist:merge-isomorphic-assets","copy-dll","build-dist:clean-tmp"] (1.80 sec)
[15:45:28] Done Process electrode/build serial array ["build-dist",".build-lib","ss-prod-react",".check.top.level.babelrc"] (1.80 sec)
 Execution Failed - Errors: 
 1  shell cmd 'webpack --config /Users/zbrukas/workspace/personal/node_modules/electrode-archetype-react-app-dev/config/webpack/webpack.config.js --colors' exit code 1

clap dev works without problems. I don't have a custom webpack config for production, although I have one for development.

Custom webpack for dev:

const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const _ = require('lodash');

module.exports = function (composer, options, compose) {
  const config = compose();
  _.merge(config, {
    plugins: [
      new FaviconsWebpackPlugin({
        // Your source logo
        logo: './images/logo.png',
        // The prefix for all image files (might be a folder or a name)
        prefix: 'icons-[hash]/',
        // Emit all stats of the generated icons
        emitStats: false,
        // The name of the json containing all favicon information
        statsFilename: 'iconstats-[hash].json',
        // Generate a cache file with control hashes and
        // don't rebuild the favicons until those hashes change
        persistentCache: true,
        // Inject the html into the html-webpack-plugin
        inject: true,
        // favicon background color (see https://github.com/haydenbleasel/favicons#usage)
        background: '#fff',
        // favicon app title (see https://github.com/haydenbleasel/favicons#usage)
        title: 'Heber Nobre',

        // which icons should be generated (see https://github.com/haydenbleasel/favicons#usage)
        icons: {
          android: true,
          appleIcon: true,
          appleStartup: true,
          coast: false,
          favicons: true,
          firefox: true,
          opengraph: false,
          twitter: false,
          yandex: false,
          windows: false
        }
      })
    ]
  }, (a, b) => {
    return (Array.isArray(a) && Array.isArray(b))
      ? [].concat(a).concat(b)
      : undefined;
  });

  return config;
};

Although it doesn't do what's expected, it doesn't give errors either (on dev).

Some code uses outdated React Router modules (for example, using browserHistory + Router instead of BrowserRouter). I'd love to do some quick updating!

This looks like a great boilerplate, but the enforcement of where to put certain files is unnecessary. Ex for specs:

/config/karma/entry.js

var testsReq = require.context("test/client", true, /\.spec.jsx?$/);

It is common (and arguably desirable) to co-locate related files, such as specs with the code against which they assert. Ex

│ client
│ ├─┬ components
│ │ ├─┬ footer
│ │ │ ├── index.css
│ │ │ ├── index.jsx
│ │ │ └── index.spec.jsx
│ │ ├─┬ header
│ │ │ ├── actions.jsx
│ │ │ ├── index.css
│ │ │ ├── index.jsx
│ │ │ └── index.spec.jsx
│ │ │ └── reducers.jsx

The code in the karma entry file could easily be changed to remove the path prefix without breaking existing projects.

~P.S. I haven't got far enough into it to deduce whether css etc file locations are similarly opinionated.~ They were, but #117.

Logic for keeping Status Codes

Introduction

The current ssr logic, provides no clear hook, how to set status codes headers.

Let's say for example I have an application, that manages a book collection, with a single books route /books/:name. Let's say this route handles the display of the book with the given name, by fetching the book via redux. If the book is found, it displays Details and the http status 200, that is sent from the node server is ok. However if the book isn't found, currently we would still have an http status of 200 even though in the app we might display a 404 error message.

Proposal

In the index-view.js of the application, we currently can prefetch data. Even now it wouldn't be too difficult to hook into the promise chain of the app.routesEngine.render(req) command at the end, and update the status code by checking the prefetched redux state.

Consider this code example:

const prefetchedStatePrefix = 'window.__PRELOADED_STATE__ = ';

const getPrefetchedState = state => JSON.parse(state.replace(prefetchedStatePrefix, '').replace(/;([^;]*)$/, '$1'));

const get404Response = res => ({
  ...res,
  status: 404,
});

module.exports = (req) => {
  const app = req.server && req.server.app || req.app;
  if (!app.routesEngine) {
    app.routesEngine = new ReduxRouterEngine({routes, createReduxStore});
  }

  // After the content was prefetched, check if book could be fetched, otherwise set 404 status
  return app.routesEngine.render(req)
    .then((res) => {
      const prefetchedState = getPrefetchedState(res.prefetch);
      if (!prefetchedState.books.wasNotFound) {
        return get404Response(res);
      }

      return res;
    });
};

Maybe in the future you could even provide a cleaner documented hook, to check for the content of the prefetch, but for now this would suffice.

Content of PR

I updated the content of the electrode-react-webapp package, to correctly use the status code of the prefetched ssr content, when sending the server response.

Handled Status Codes

for custom html I currently added the status codes 404, 410, 503. These are probably the most important status codes for SEO purposes, where we still want to have a custom html output instead of json messages.

for redirects I also added 301, 307 and 308 to all server implementations, however I only set specific statuses when redirecting in the express implementation.

Tested

• hapi: tests are still running through without problems
• express: was tested manually in our application and behaves as expected. Additional tests were added and the old tests are still passing
• koa: tests are still running through without problems

Please (re-)read the specification for npm versioning: NPM Semver and the Semver Spec

Here is an exerp:

Given a version number MAJOR.MINOR.PATCH, increment the:

1. MAJOR version when you make incompatible API changes,
2. MINOR version when you add functionality in a backwards-compatible manner, and
3. PATCH version when you make backwards-compatible bug fixes.

Upgrading from WebPack 2 to WebPack 3 is a MAJOR change.

• Don't inject hot-update bundles in the template to avoid below error:

• Add crossorigin="anonymous" to our scripts for error reporting. By default, error message will include only Script Error.
• Skip container entry to avoid errors while refreshing apps on server

• Handle isomorphic loading e.g. images, css modules etc. during first load, the app will start before webpack finish compiling, so webpack will inform app that modules refreshed when they didn't. sets a one time flag to avoid refreshing when first start up, reset this one time flag only after isomorphic initialise is set.

• mark eager: true temporarily to avoid shared eager. For long term, will be adding automated way via plugin.

This PR includes changes to,

• Fix source-map load warning. By default we are setting webpack configuration devtool: false. Looks like a recent change and we get above source-map load warning if you have dev tools open. This was causing the app to stop responding when you have dev tools open. So passing down the inline-source-map configuration through xrun-taslks's webpack configuration.

• Setting a fallback devtool configuration to eval-cheap-module-source-map in @xarc/webpack

• Change clap references to xrun for poc-subapp, poc-subapp-redux and subapp1-online-store.

• Remove bluebird usage, instead use native promise in sample apps - poc-subapp, poc-subapp-redux and subapp1-online-store. Bluebird is only need to support old browsers or EOL Node.js. Removing its reference from these sample applications as its better to reference latest usage guidelines on sample applications.

Pending issues to resolve

• poc-subapp throws Error: Shared module is not available for eager consumption

We are having a legacy project built on electrode. We are using electrode-archetype-react-app v4.1.1, and we want to enable critical css in this project. I tried adding files archetype/config/index.js and archetype/config.js, and tried to add the below code to it as suggested.

module.exports = {
  options: {
    criticalCSS: true
  }
};

I have a critical css marker on the template too It doesn't seem to render the critical css on the template. I don't find any documentation on the same. Any help will be appreciated.

Describe the bug I got this error after app creation

TypeError: Cannot read properties of undefined (reading 'location')
    at ReduxRouterEngine.render (CWD/node_modules/electrode-redux-router-engine/lib/redux-router-engine.js:125:35)
    at module.exports (CWD/src/server/views/index-view.jsx:25:23)
    at getContent (CWD/node_modules/electrode-react-webapp/lib/react/content.js:26:17)
    at Token.INITIALIZE (CWD/node_modules/electrode-react-webapp/lib/react/token-handlers.js:98:12)
    at renderNext (CWD/node_modules/electrode-react-webapp/lib/render-execute.js:43:66)
    at CWD/node_modules/electrode-react-webapp/lib/render-execute.js:66:12
    at executeRenderSteps (CWD/node_modules/electrode-react-webapp/lib/render-execute.js:64:10)
    at Renderer.render (CWD/node_modules/electrode-react-webapp/lib/renderer.js:81:12)
    at CWD/node_modules/electrode-react-webapp/lib/async-template.js:81:31
From previous event:
    at DefaultHandleRoute (CWD/node_modules/electrode-react-webapp/lib/hapi/plugin17.js:17:6)
    at handler (CWD/node_modules/electrode-react-webapp/lib/hapi/register-routes.js:36:16)
    at module.exports.internals.Manager.execute (CWD/node_modules/hapi/lib/toolkit.js:35:106)
    at Object.internals.handler (CWD/node_modules/hapi/lib/handler.js:50:48)
    at exports.execute (CWD/node_modules/hapi/lib/handler.js:35:36)
    at Request._lifecycle (CWD/node_modules/hapi/lib/request.js:263:62)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at Request._execute (CWD/node_modules/hapi/lib/request.js:170:9)

To Reproduce just start brand new application clap dev

Expected behavior to be running normally

Example report:

System:

• OS: macOS 10.15.3
• CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
• Memory: 313.13 MB / 8.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 16.13.1- ~/.nvm/versions/node/v16.13.1/bin/node
• npm:8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm

Browsers:

• Chrome: ... -->

Electrode Package Versions

{
  "name": "large-app",
  "version": "0.0.1",
  "description": "test app using electro",
  "homepage": "",
  "author": {
    "name": "Mina Fawzy",
    "email": "",
    "url": ""
  },
  "contributors": [],
  "files": [
    "server",
    "src",
    "lib",
    "dist"
  ],
  "main": "lib/server/index.js",
  "keywords": [],
  "repository": {
    "type": "git",
    "url": "minafaw/largeApp"
  },
  "license": "Apache-2.0",
  "engines": {
    "node": ">= 8",
    "npm": ">= 5"
  },
  "scripts": {
    "build": "clap build",
    "prod-start": "NODE_ENV=production clap -n -x electrode/build prod",
    "start": "if test \"$NODE_ENV\" = \"production\"; then npm run prod-start; else clap dev; fi",
    "test": "clap check",
    "coverage": "clap check",
    "prod": "echo 'Starting standalone server in PROD mode'; NODE_ENV=production node ./lib/server/",
    "heroku-postbuild": "clap build"
  },
  "dependencies": {
    "@loadable/component": "^5.7.0",
    "@loadable/server": "^5.9.0",
    "bluebird": "^3.4.6",
    "electrode-archetype-react-app": "7.0.0-beta7.0",
    "electrode-confippet": "^1.5.0",
    "electrode-cookies": "^1.0.0",
    "electrode-react-webapp": "^3.2.0",
    "electrode-redux-router-engine": "^3.0.0",
    "electrode-server": "^2.2.0",
    "electrode-static-paths": "^2.0.1",
    "electrode-ui-config": "^1.1.2",
    "good": "^8.1.1",
    "good-console": "^7.1.0",
    "inert": "^5.1.2",
    "lodash": "^4.17.11",
    "milligram": "^1.3.0",
    "react-notify-toast": "^0.5.0",
    "react-router-config": "^5.1.1",
    "react-router-dom": "^5.1.2"
  },
  "devDependencies": {
    "@loadable/babel-plugin": "^5.10.0",
    "@loadable/webpack-plugin": "^5.7.1",
    "electrode-archetype-react-app-dev": "7.0.0-beta7.0"
  }
}