https://github.com/asbjornh/update-contentful-extension-webpack-plugin

Webpack plugin for updating Contentful extensions
https://github.com/asbjornh/update-contentful-extension-webpack-plugin

Last synced: about 1 month ago
JSON representation

Webpack plugin for updating Contentful extensions

• Host: GitHub
• URL: https://github.com/asbjornh/update-contentful-extension-webpack-plugin
• Owner: asbjornh
• License: mit
• Created: 2020-08-09T14:15:59.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-08-09T15:47:17.000Z (over 4 years ago)
• Last Synced: 2024-09-30T13:06:18.616Z (about 2 months ago)
• Language: JavaScript
• Size: 3.91 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Update Contentful extension Webpack plugin

This plugin will upload or serve a locally running extension to Contentful. This is useful if you like `contentful-extension-scripts` but want to build your extension(s) using Webpack instead. It also makes it easier for extensions to share code (currently not possible using `contentful-extension-scripts`).

The easiest way to get set up is to create a new extension using [create-contentful-extension](https://github.com/contentful/create-contentful-extension). After creating the extension, create your `webpack.config.js` and add and configure this plugin (see below).

## Installation

```

npm install --save-dev update-contentful-extension-webpack-plugin

```

## Example config

The below config assumes that `webpack-dev-server` is used for serving a local extension. When running the `dev` script, the extension will be served from `localhost` and can be viewed at `app.contentful.com`. When running the `deploy` script, the extension is uploaded to `app.contentful.com`.

View config

_package.json_

```json

{

  "scripts": {

    "dev": "webpack-dev-server --mode=development",

    "deploy": "webpack --mode=production"

  }

}

```

_webpack.config.js_

```js

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

const InlineSourcePlugin = require("inline-source-webpack-plugin");

const MiniCssExtracPlugin = require("mini-css-extract-plugin");

const UpdateContentfulExtensionPlugin = require("update-contentful-extension-webpack-plugin");

module.exports = {

  devServer: { port: 1234 },

  entry: "./src/index.js",

  module: {

    rules: [

      { test: /\.jsx?$/, exclude: [/node_modules/], use: "babel-loader" },

      { test: /\.css$/, use: [MiniCssExtracPlugin.loader, "css-loader"] },

    ],

  },

  plugins: [

    new MiniCssExtracPlugin(),

    new HtmlWebpackPlugin({

      // NOTE: For production all assets need to be inlined. For development we don't want assets inlined since then they would be cached. See the docs for `inline-source-webpack-plugin`

      template: process.env.WEBPACK_DEV_SERVER

        ? "./src/index-dev.html"

        : "./src/index.html",

    }),

    new InlineSourcePlugin(),

    new UpdateContentfulExtensionPlugin({

      descriptor: path.join(__dirname, "extension.json"),

    }),

  ],

};

```

_index-dev.html_

```html

  

    

  

  

    


  


```

_index.html_

```html

  

    

    

  

  

    


    

  


```

## Configuration API

**dev**: `boolean` = `process.env.WEBPACK_DEV_SERVER`

Whether to serve the extension from `localhost` or to upload ut. Defaults to the value of the `WEBPACK_DEV_SERVER` environment variable set by `webpack-dev-server`.

---

**descriptor**: `string`

Required. An absolute path to `extension.json`.

---

**fileName**: `string` = `"index.html"`

The name of the output file. Only required if your output file name is different from `index.html`.

---

**https**: `boolean` = `false`

If set to `true`, will tell Contentful to load the local extension from `https://localhost`

---

**port**: `number` = `webpackOptions.devServer.port`

What port the local extension is available at. Defaults to the port used by `webpack-dev-server` if configured.

It seems like the `devServer` webpack option is required for the config object to contain the default port, but an empty object is enough (`devServer: {}`).