Не удалось добавить расширение пользовательского интерфейса в Contentful. Когда я запускаю nopm run start, я получаю ошибку 404 в ui_config.

Я новичок в контенте. Я пытаюсь разработать расширение пользовательского интерфейса для Contentful, используя Contentful SDK.

Я выполнил все шаги, указанные в этой статье.

Это код, который у меня есть в 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>
    );
  }
}

В идеале я пытаюсь создать расширение пользовательского интерфейса, которое будет использоваться в наполненном контентом пространстве. Я скачал содержательный SDK и вставил кнопку. Но я получаю эту ошибку на консоли, и она не работает Скриншот:

введите здесь описание изображения


person VHaarish    schedule 10.02.2020    source источник
comment
Пожалуйста, опубликуйте код.   -  person Michael Ribbons    schedule 11.02.2020
comment
@MichaelRibbons добавил код. Спасибо   -  person VHaarish    schedule 11.02.2020
comment
Хорошая работа, Вандана, теперь у тебя гораздо больше шансов получить ответ. Извините, я больше ничем не могу помочь, я просто просматривал очереди на проверку.   -  person Michael Ribbons    schedule 12.02.2020
comment
Является ли ваш пример кода полным? Я не вижу никакого импорта.   -  person Michael Ribbons    schedule 12.02.2020
comment
Привет, @MichaelRibbons да.. Я добавил импорт в код.. не вставлял его сюда.. В любом случае, я обновил код здесь.   -  person VHaarish    schedule 12.02.2020


Ответы (1)


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

Перейдите к содержимому этого типа контента и включите смешанный контент в своем браузере, чтобы версия для разработки, которая обслуживается с вашего локального компьютера, могла отображаться в пределах https://app.contentful.com.

Еще лучше:

Я не самый большой поклонник отключения настройки смешанного содержимого в браузерах. Могу ли я использовать HTTPS в режиме разработки? Да, вы можете обслуживать свое расширение с помощью HTTPS. Добавьте --https для запуска команды.

"start": "contentful-extension-scripts start --https", Он использует Parcel HTTPS под капотом, который генерирует самозаверяющий сертификат, возможно, вам придется настроить свой браузер, чтобы разрешить самозаверяющие сертификаты для локального хоста.

Я думаю, что это исправит ошибку 404 и все заработает.

Пожалуйста, внимательно следуйте readme и задайте отдельный вопрос, если у вас все еще есть проблемы.

person Michael Ribbons    schedule 11.02.2020
comment
Спасибо .. Я попытался включить смешанный контент. и я все еще получаю эту ошибку 404 на ui_config. Я не вижу ошибки «Смешанное содержимое» в своем браузере. но я вижу ошибку 404 в конфигурации пользовательского интерфейса - person VHaarish; 12.02.2020
comment
Я вижу предупреждение о смешанном содержании на вашем снимке экрана. Попробуйте использовать метод https. - person Michael Ribbons; 13.02.2020