Customize Configurations From Your App

You can extend or customize the configurations in your Electrode Applications. This section will give you concepts and details to help you configure and customize your Electrode App.

Extending Webpack Configurations

The webpack config for your app is being generated by the archetype. While composing the webpack config, the archetype looks for the archetype/config folder at the project root of your app.

In order to override or extend the webpack configuration, please refer here.

Define Client Entry Points

By default, the archetype uses client/app.js or client/app.jsx as a client entry point. Alternatively, you can define multiple entry points for your application, so the Webpack will create bundles for each app entry point. To do that, place entry.config.js module into your app's client directory.

Here is an example of entry.config.js:

module.exports = {
  "web": "./app-web.js",
  "ios": "./app-ios.js",
  "android": "./app-android.js"
};

Importing External Javascript files

Since Electrode applications are built with electrode-react-webapp, you can import the external files at an available extension point in the index template. More information can be found here.

What you can do with the options:

  • unbundledJS (Object): Specify the JavaScript files to be loaded at an available extension point in the index template.

    • enterHead (Array)

    Array of script objects ({ src: "path to file" }) to be inserted as <script> tags in the document head before anything else. To load scripts asynchronously use { src: "...", async: true } or { src: "...", defer: true }.

    • preBundle (Array)

    Array of script objects ({ src: "path to file" }) to be inserted as <script> tags in the document body before the application's bundled JavaScript.

For example, go to config/default.js file for your app electrode-react-webapp configurations:

const config = {
  plugins: {
    "electrode-react-webapp": {
      options: {
        pageTitle: "My Awesome React WebApp",
        paths: {
          "/{args*}": {
            content: "<h1>Hello React!</h1>"
          }
        },
        unbundledJS: {
          enterHead: [
            {src: "http://cdn.com/js/lib.js"}
          ]
        }
      }
    }
  }
}

require("electrode-server")(config);

results matching ""

    No results matching ""