Flo.w

# Using Flo.w RDF with Webpack

Webpack (opens new window) is an asset bundler for building modular web applications and libraries.

To initialize a Flo.w RDF context and use it from multiple modules, we recommend creating a module that exports the initialized context. The module can then be imported where needed, giving the importing module access to the context.

The example below shows a starting point for a WebPack project that uses Flo.w RDF. The configuration enables on-demand loading of Flo.w RDF web components when they are first used, improving page load times and minimizing download size.

The application's HTML file and JavaScript entry point:

    <html>
  <head>
    <title>Using Flo.w RDF with Webpack</title>
    <link rel="stylesheet" href="css/flow-rdf.bundle.css" />
  </head>
  <body>
    <flow-button solid color="primary">A button</flow-button>
    <flow-value value="$message"></flow-value>
    <flow-map map-style="osm-bright"></flow-map>
  </body>
</html>

    import { defineCustomElements } from 'flow-rdf/loader';
import { flow } from 'flow-rdf';

// Register Flo.w RDF web components
defineCustomElements();

// Initialize context
const context = flow.initializeContext({
  apiKey: 'b6b77cc4-904a-46d1-aa0f-3bf3848ce4c7',
  enableDebug: true
});

// Set application state property
context.state.set('message', 'Hello Flo.w RDF');

    // Make sure to add code blocks to your code group

    The application's Webpack configuration files:

    • webpack.common.js - common Webpack configuration.
    • webpack.dev.js - Development Webpack configuration.
    • webpack.prod.js - Production build Webpack configuration.
      const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: ['./src/index.js' ],
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    symlinks: false
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      favicon: 'src/favicon.ico',
    }),
    new CopyPlugin({
      patterns: [
        {
          // Copy Flo.w RDF assets to dist
          from: path.resolve(__dirname, 'node_modules/flow-rdf/dist/flow-rdf/assets'),
          to: path.resolve(__dirname, 'dist/assets'),
        },
        {
          // Copy Flo.w RDF css to dist
          from: path.resolve(__dirname, 'node_modules/flow-rdf/dist/flow-rdf/css'),
          to: path.resolve(__dirname, 'dist/css'),
        },
      ],
    }),
  ],
};

      const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    open: true,
    port: 8080,
  }
});

      const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  optimization: {
    moduleIds: 'deterministic',
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: false
        },
      },
    },
  },
});

      // Make sure to add code blocks to your code group

      The project's package.json file is shown below. It provides three NPM scripts:

      • npm run dev - Run a development server with file watching and hot reloading.
      • npm run build - Build the production distribution of the application.
      • npm run clean - Clean the distribution directory.
        {
  "name": "flow-rdf-with-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "private": true,
  "scripts": {
    "dev": "webpack serve --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
    "clean": "rm -rf dist"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^7.0.0",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^5.0.0-beta.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.7.3"
  },
  "dependencies": {
    "flow-rdf": "^1.1.4",
    "@stencil/core": "^2.3.0"
  }
}

        // Make sure to add code blocks to your code group

        ← Observable →