时间戳

首页 > 解决方案 > 无法在 Contentful 上添加 UI 扩展。当我运行 nopm run start 时，我在 ui_config 上收到 404 错误

contentful - 无法在 Contentful 上添加 UI 扩展。当我运行 nopm run start 时，我在 ui_config 上收到 404 错误

问题描述

我是新来的。我正在尝试使用 Contentful SDK 在 Contentful 上开发 UI 扩展。

我遵循了本文中提到的所有步骤。

这是我在 index.js 中的代码。

import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { TextInput , Button } from '@contentful/forma-36-react-components';
import { init } from 'contentful-ui-extensions-sdk';
import '@contentful/forma-36-react-components/dist/styles.css';
import './index.css';

export class App extends React.Component {
  static propTypes = {
    sdk: PropTypes.object.isRequired
  };

  detachExternalChangeHandler = null;

  constructor(props) {
    super(props);
    this.state = {
      value: props.sdk.field.getValue() || ''
    };
  }

  componentDidMount() {
    this.props.sdk.window.startAutoResizer();

    // Handler for external field value changes (e.g. when multiple authors are working on the same entry).
    this.detachExternalChangeHandler = this.props.sdk.field.onValueChanged(this.onExternalChange);
  }

  componentWillUnmount() {
    if (this.detachExternalChangeHandler) {
      this.detachExternalChangeHandler();
    }
  }

  onExternalChange = value => {
    this.setState({ value });
  };

  onChange = e => {
    const value = e.currentTarget.value;
    this.setState({ value });
    if (value) {
      this.props.sdk.field.setValue(value);
    } else {
      this.props.sdk.field.removeValue();
    }
  };
  onButtonClick = async () => {
   console.log('hurray');
  };

  render() {
    return (
      <Button buttonType="primary" isFullWidth={false}
      onClick={this.onButtonClick}>
      Add Content from AEM DAM
      </Button>
    );
  }
}

理想情况下，我正在尝试创建一个用于内容空间的 UI 扩展。我下载了内容丰富的 SDK，并添加了一个按钮。但是我在控制台上收到此错误并且它不起作用屏幕截图：

在此处输入图像描述

标签： contentfulcontentful-management

解决方案

https://github.com/contentful/create-contentful-extension

转到此 Content Type 的内容并在您的浏览器中启用混合内容，以便本地计算机提供的开发版本可以在https://app.contentful.com中呈现。

更好的是：

我不是在浏览器中禁用混合内容设置的最大粉丝。我可以在开发模式下使用 HTTPS 吗？是的，您可以使用 HTTPS 提供您的扩展程序。添加 --https 以启动命令。

"start": "contentful-extension-scripts start --https"，它在后台使用 Parcel HTTPS，它会生成一个自签名证书，您可能需要配置您的浏览器以允许本地主机的自签名证书。

我认为这将解决 404 错误并使事情正常进行。

请仔细阅读自述文件，如果仍有问题，请发布单独的问题。

推荐阅读