Creación de un blog en Svelte con la solución Oracle Content Management sin cabecera

Introducción

Svelte es un nuevo enfoque radical para crear interfaces de usuario. Mientras que los marcos tradicionales como React y Vue hacen la mayor parte de su trabajo en el navegador, Svelte cambia que trabajan en un paso de compilación que ocurre cuando se crea la aplicación. Sapper es un marco de aplicación con tecnología de Svelte y proporciona enrutamiento, representación en el servidor y generación de sitios estáticos. Pero, ¿qué sucede cuando se necesita un sistema de gestión de contenido (CMS) para servir todo el contenido? Afortunadamente, Oracle Content Management, con sus completas capacidades de CMS sin cabecera, tiene una solución elegante para las necesidades de administración y gobernanza de contenido.

En este tutorial, crearemos un blog simple en Svelte con Oracle Content Management como CMS sin cabecera, así como su kit de desarrollo de software (SDK) para la entrega de contenido en JavaScript. Este ejemplo de Svelte está disponible en GitHub.

El tutorial incluye tres pasos:

1. Preparación de Oracle Content Management
2. Construir el blog en Svelte
3. Preparar la aplicación para el despliegue

Requisitos

Antes de continuar con este tutorial, le recomendamos que lea primero la siguiente información:

• Conceptos clave
• Repositorios de activos

Para seguir este tutorial, necesitará:

• una suscripción a Oracle Content Management
• una cuenta oracle-content-management con el rol de administrador de contenido
• un equipo Windows o Mac con la versión 10 o superior del nodo

Lo que estamos creando

Nuestro blog consistirá en un sitio de tres páginas que permite a los visitantes explorar artículos de blogs organizados en temas. La primera página, la página inicial, consta de marcas (nombre y logotipo de la compañía), algunos enlaces y una lista de temas de blog.

Para echar un vistazo a lo que estamos creando, este es el estado final de nuestro tutorial, un blog básico de Svelte que consume contenido de Oracle Content Management:

https://headless.mycontentdemo.com/samples/oce-svelte-blog-sample

Este es el aspecto que tendrá la página inicial al final de este tutorial:

La segunda página, la página del tema, muestra las vistas previas de cada artículo de blog que pertenece al tema. A continuación, se muestra el aspecto de una página de tema individual:

Por último, la página de artículo presenta el artículo final del blog, incluida la información sobre el autor del blog. A continuación, se muestra cómo se verá una página de artículo individual:

Para continuar, necesitará tener una suscripción activa a Oracle Content Management y estar conectado con el rol de administrador de contenido.

Tarea 1: Preparación de Oracle Content Management

Si aún no tiene una instancia de Oracle Content Management, consulte Inicio rápido para obtener más información sobre cómo registrarse en Oracle Cloud, aprovisionar una instancia de Oracle Content Management y configurar Oracle Content Management como un CMS sin cabecera.

Para este tutorial, necesitará crear un modelo de contenido de dos formas. Hay un paquete de activos descargable disponible que rellena su repositorio vacío con tipos de contenido y contenido asociado, o bien puede crear su propio modelo de contenido y contenido.

Para preparar Oracle Content Management:

1. Cree un canal y un repositorio de activos.
2. Cree un modelo de contenido mediante uno de estos dos métodos:
   • Método 1: Importación del paquete de activos de muestras de Oracle Content Management
   • Método 2: Crear su propio modelo de contenido

Creación de un canal y un repositorio de activos

Primero debe crear un canal y un repositorio de activos en Oracle Content Management para poder publicar contenido.

Para crear un canal y un repositorio de activos en Oracle Content Management:

1. Conéctese a la interfaz web de Oracle Content Management como administrador.

2. Seleccione Contenido en el menú de navegación de la izquierda y, a continuación, seleccione Publicar canales en la lista de selección de la cabecera de página.

   

3. En la esquina superior derecha, haga clic en Crear para crear un nuevo canal. Asigne el nombre 'OCEGettingStartedChannel' al canal para este tutorial y mantenga el acceso público. Haga clic en Guardar para crear el canal.

   

4. Seleccione Contenido en el menú de navegación de la izquierda y, a continuación, elija Repositorios en la lista de selección de la cabecera de página.

   

5. En la esquina superior derecha, haga clic en Crear para crear un nuevo repositorio de activos. Asigne al repositorio de activos el nombre 'OCEGettingStartedRepository' para este tutorial.

   

6. En el campo Canales de publicación, seleccione el canal OCEGettingStartedChannel para indicar a Oracle Content Management que el contenido del repositorio OCEGettingStartedRepository se puede publicar en el canal OCEGettingStartedChannel. Haga clic en Guardar cuando termine.

   

Creación de un modelo de contenido

El siguiente paso es crear un modelo de contenido. Puede utilizar uno de los siguientes métodos:

• Método 1: Importación del paquete de activos de muestras de Oracle Content Management
• Método 2: Crear su propio modelo de contenido

Importación del paquete de activos de muestras de Oracle Content Management

Puede descargar un paquete de activos de ejemplo de Oracle Content Management preconfigurado que contiene todos los tipos de contenido y activos necesarios para este tutorial. Si lo prefiere, también puede crear su propio modelo de contenido en lugar de descargar el paquete de activos de ejemplo.

Puede cargar una copia del contenido que estamos utilizando en este tutorial desde Oracle Content Management Samples Asset Pack. Esto le permitirá experimentar con los tipos de contenido y modificar el contenido. Si desea importar el paquete de activos de muestras de Oracle Content Management, puede descargar el archivo de paquete de activos, OCESamplesAssetPack.zip y extraerlo a un directorio de su elección:

1. Descargue el paquete de activos de muestras de Oracle Content Management (OCESamplesAssetPack.zip) desde la página de descargas de Oracle Content Management. Extraiga el archivo zip descargado en una ubicación de la computadora. Después de la extracción, esta ubicación incluirá un archivo denominado OCEGettingStarted_data.zip.

2. Conéctese a la interfaz web de Oracle Content Management como administrador.

3. Seleccione Contenido en el menú de navegación de la izquierda y, a continuación, elija Repositorios en la lista de selección de la cabecera de página. A continuación, seleccione OCEGettingStartedRepository y haga clic en el botón Importar contenido de la barra de acción superior.

   

4. Cargue OCEGettingStarted_data.zip desde su equipo local en la carpeta Documents.

   

5. Una vez que se haya cargado, seleccione OCEGettingStarted_data.zip y haga clic en Aceptar para importar el contenido en su repositorio de activos.

   

6. Una vez que el contenido se haya importado correctamente, vaya a la página Activos y abra el repositorio OCEGettingStartedRepository. Verá que ahora se han agregado todas las imágenes y los elementos de contenido relacionados al repositorio de activos.

   

7. Haga clic en Seleccionar todo en la parte superior izquierda y, a continuación, en Publicar para agregar todos los activos importados al canal de publicación creado anteriormente, OCEGettingStartedChannel.

   

8. Antes de publicar, debe validar todos los activos. Primero agregue OCEGettingStartedChannel como canal seleccionado y, a continuación, haga clic en el botón Validar.

   

9. Después de validar los activos, puede publicar todos los activos en el canal seleccionado haciendo clic en el botón Publicar en la esquina superior derecha.

   

Una vez hecho esto, puede ver en la página Activos que todos los activos se han publicado. (Puede indicar el icono situado encima del nombre del activo).

Después de importar el paquete de activos de muestras de Oracle Content Management, puede iniciar la creación del blog en Svelte.

Crear su propio modelo de contenido

En lugar de importar el paquete de activos de muestras de Oracle Content Management, también puede crear su propio modelo de contenido.

Para este tutorial, estamos utilizando un tipo de contenido denominado 'OCEGettingStartedHomePage' para crear la página inicial de nuestro blog. Esta página inicial consta de marcas (nombre y logotipo de la compañía), algunas URL para enlaces y una lista de temas de blog que se deben incluir en la página.

Para crear tipos de contenido para el modelo de contenido:

1. Conéctese a la interfaz web de Oracle Content Management como administrador.
2. Seleccione Contenido en el menú de navegación de la izquierda y, a continuación, seleccione Tipos de activos en la lista de selección de la cabecera de página.
3. Haga clic en Crear en la esquina superior derecha.
4. Elija crear un tipo de contenido (no un tipo de activo digital). Repita esta acción para todos los tipos de contenido necesarios.

Crearemos cuatro tipos de contenido, cada uno con su propio juego de campos:

• OCEGettingStartedHomePage
• OCEGettingStartedTopic
• OCEGettingStartedAuthor
• OCEGettingStartedArticle

El primer tipo de contenido, OCEGettingStartedHomePage, debe tener los siguientes campos:

Nombre mostrado	Tipo de campo	necesario	Nombre de máquina
Nombre de compañía	Campo de texto de un solo valor	X	company_name
Logo de compañía	Campo de texto de un solo valor	X	company_logo
Temas	Campo de referencia de varios valores	X	temas
URL de Contacto	Campo de texto de un solo valor	X	contact_url
Acerca de URL	Campo de texto de un solo valor	X	about_url

Es el aspecto que debe tener la definición del tipo de contenido OCEGettingStartedHomePage:

El segundo tipo de contenido, OCEGettingStartedTopic, debe tener el siguiente campo:

Nombre mostrado	Tipo de campo	necesario	Nombre de máquina
Miniatura	Campo de imagen de valor único	X	vista en miniatura

Este es el aspecto del tipo de contenido OCEGettingStartedTopic:

El tercer tipo de contenido, OCEGettingStartedAuthor, debe tener los siguientes campos:

Nombre mostrado	Tipo de campo	necesario	Nombre de máquina
Avatar	Campo de imagen de valor único	X	avatar

Este es el aspecto del tipo de contenido OCEGettingStartedAuthor:

El cuarto y último tipo de contenido, OCEGettingStartedArticle, deben tener los siguientes campos:

Nombre mostrado	Tipo de campo	necesario	Nombre de máquina
Fecha de publicación	Campo de fecha de valor único	X	published_name
Autor	Campo de referencia de valor único	X	autor
Imagen	Campo de imagen de valor único	X	imagen
Leyenda de Imagen	Campo de texto de un solo valor	X	image_caption
Contenido de artículo	Campo de texto grande de valor único	X	article_content
Tema	Campo de referencia de valor único	X	Tema

Este es el aspecto del tipo de contenido OCEGettingStartedArticle:

Una vez que haya creado los tipos de contenido, puede agregar estos tipos de contenido al repositorio que ha creado anteriormente, OCEGettingStartedRepository:

1. Conéctese a la interfaz web de Oracle Content Management como administrador.
2. Navegue hasta OCEGettingStartedRepository.
3. Edite el repositorio y, en Tipos de activos, especifique los cuatro tipos de contenido recién creados. Haga clic en el botón Save (Guardar) para guardar los cambios.

Después de agregar los tipos de contenido al repositorio, puede abrir el repositorio OCEGettingStartedRepository en la página Activos y empezar a crear los elementos de contenido para todos los tipos de contenido.

Tarea 2: Construir el blog en Svelte

Para consumir nuestro contenido de Oracle Content Management en una aplicación Svelte representada en el servidor, podemos utilizar el ejemplo de blog de Svelte, que está disponible como repositorio de código abierto en GitHub.

Nota: Recuerde que el uso del ejemplo de Svelte es opcional y lo utilizamos en este tutorial para empezar a utilizarlo rápidamente. También puede crear su propia aplicación Svelte.

Para construir el blog en Svelte:

1. Clonar el repositorio de ejemplo e instalar dependencias
2. Configuración de la aplicación Svelte
3. Trabajar con el SDK de Oracle Content Management Content
4. Uso del SDK de contenido para recuperar el contenido

Clonación del repositorio de ejemplo e instalación de dependencias

La muestra de blog de Svelte está disponible como repositorio de código abierto en GitHub.

Primero deberá clonar el ejemplo de GitHub en el equipo local y cambiar el directorio a la raíz del repositorio:

git clone https://github.com/oracle/oce-svelte-blog-sample.git
    cd oce-svelte-blog-sample

Ahora que tiene su base de código, debe descargar dependencias para la aplicación. Ejecute el siguiente comando desde el directorio raíz:

npm install

Configuración de la aplicación Svelte

En este ejemplo de blog de Svelte, debe configurar algunos fragmentos de información para que el SDK de Oracle Content Management Content (y cualquier otra solicitud) pueda dirigir la URL de instancia y la versión de API correctas con el token de canal correcto. Estos valores se utilizan en src/scripts/server-config-utils.js para instanciar un nuevo cliente de entrega.

Esta aplicación utiliza un archivo .env que lee Webpack cuando agrupa las aplicaciones cliente y servidor. Mediante webpack.DefinePlugin, los valores leídos del archivo .env se pueden poner a disposición de cualquier parte de la aplicación.

Abra el archivo .env en un editor de texto. Verá la siguiente información:

# The connection details for the Oracle Content Management server to be used for this application
    SERVER_URL=https://samples.mycontentdemo.com
    API_VERSION=v1.1
    CHANNEL_TOKEN=47c9fb78774d4485bc7090bf7b955632

Cambie cada par clave-valor para reflejar la URL de la instancia, la versión de API a la que desea dirigirse y el token de canal asociado al canal de publicación. El canal de este tutorial es OCEGettingStartedChannel.

Trabajar con el SDK de Oracle Content Management Content

Oracle Content Management ofrece un SDK de contenido en dos versiones distintas, en función de si lo está aprovechando en un contexto del cliente (paquete de exploradores) o en un contexto del servidor (Node.js).

Ambos SDK están disponibles como bibliotecas de código abierto en GitHub:

• SDK de contenido (explorador)
• SDK de contenido (Node.js)

Además, el SDK de contenido está disponible como módulo NPM con cada instancia de Oracle Content Management, donde {server} a continuación representa la URL de la instancia (consulte Inicio rápido para obtener información sobre cómo recuperar la URL de la instancia):

• Explorador: {server}/sitesclouddelivery/renderer/app/sdk/npm/contentsdk-1.1.0.tgz
• Node.js: {server}/sitesclouddelivery/renderer/app/sdk/npm/contentsdk-node-1.1.0.tgz

Es posible que también desee utilizar el paquete minificado del cliente: {server}/_sitesclouddelivery/renderer/app/sdk/js/content.min.js

Uso del SDK de contenido para recuperar el contenido

Ahora podemos aprovechar el SDK de Oracle Content Management Content para recuperar contenido de forma que podamos presentarlo en nuestra aplicación de Svelte.

La carpeta src/scripts contiene el código para obtener datos de Oracle Content Management mediante el SDK de contenido.

El archivo src/scripts/server-config-utils.js importa el SDK de Oracle Content Management Content y, a continuación, crea un cliente de entrega mediante la configuración especificada en .env.

El siguiente comando importa el SDK:

import { createDeliveryClient, createPreviewClient } from '@oracle/content-management-sdk';

El siguiente comando crea el cliente de entrega:

return createDeliveryClient(serverconfig);

El archivo src/scripts/services.js contiene todo el código para obtener datos para la aplicación. Hay una función principal para cada componente de página en la aplicación para obtener todos los datos de esa página. Para presentar las imágenes, services.js proporciona un método auxiliar para recuperar el juego de orígenes de un activo que se construye a partir de las entregas para el activo.

function getSourceSet(asset) {
      const urls = {};
      urls.srcset = '';
      urls.jpgSrcset = '';
      if (asset.fields && asset.fields.renditions) {
        asset.fields.renditions.forEach((rendition) => {
          addRendition(urls, rendition, 'jpg');
          addRendition(urls, rendition, 'webp');
        });
      }
      // add the native rendition to the srcset as well
      urls.srcset += `${asset.fields.native.links[0].href} ${asset.fields.metadata.width}w`;
      urls.native = asset.fields.native.links[0].href;
      urls.width = asset.fields.metadata.width;
      urls.height = asset.fields.metadata.height;
      return urls;
    }

Datos de la página inicial

La página inicial necesita varias llamadas de datos para obtener todos sus datos:

1. En primer lugar, se consultan los elementos del canal especificado en .env.
2. Para cada uno de los elementos de tema, recuperamos sus detalles.

Abra src/scripts/services.js y busque la función getTopicsListPageData(), que obtiene todos los datos de la página inicial.

La función fetchHomePage(), llamada por la función getTopicsListPageData(), obtiene todos los elementos del canal. De esta forma se obtiene el ID del logotipo, el nombre de la compañía, las direcciones URL de información y contacto, así como una lista de temas. A continuación, se llama a la función fetchTopic() para que cada ID de tema obtenga todos los detalles del tema.

Se llama a las siguientes funciones para recuperar todos los datos necesarios para la página inicial:

export function getTopicsListPageData() {
      const client = getClient();
      return fetchHomePage(client)
        .then((data) => (
          getRenditionURLs(client, data.logoID)
            .then((renditionUrls) => {
              data.companyThumbnailRenditionUrls = renditionUrls;
              return data;
            })
        ));
    }

    function fetchHomePage(client) {
      return client.queryItems({
        q: '(type eq "OCEGettingStartedHomePage" AND name eq "HomePage")',
      }).then((data) => {
        const logoID = data.items[0].fields.company_logo.id;
        const title = data.items[0].fields.company_name;
        const aboutUrl = data.items[0].fields.about_url;
        const contactUrl = data.items[0].fields.contact_url;

        const { topics } = data.items[0].fields;
        const promises = [];

        topics.forEach((origTopic) => {
          // add a promise to the total list of promises to get the full topic details
          promises.push(
            fetchTopic(client, origTopic.id)
              .then((topic) => topic),
          );
        });

        // execute all the promises returning a single dimension array of all
        // of the topics and the other home page data
        return Promise.all(promises)
          .then((allTopics) => (
            {
              logoID,
              companyTitle: title,
              aboutUrl,
              contactUrl,
              topics: flattenArray(allTopics),
            }
          )).catch((error) => logError('Fetching topics failed', error));
      }).catch((error) => logError('Fetching home page data failed', error));
    }

    // Fetch details about the specific topic
    function fetchTopic(client, topicId) {
      return client.getItem({
        id: topicId,
        expand: 'fields.thumbnail',
      }).then((topic) => {
        topic.renditionUrls = getSourceSet(topic.fields.thumbnail);
        return topic;
      }).catch((error) => logError('Fetching topic failed', error));
    }

    function getRenditionURLs(client, identifier) {
      return client.getItem({
        id: identifier,
        expand: 'fields.renditions',
      }).then((asset) => getSourceSet(asset))
        .catch((error) => logError('Fetching Rendition URLs failed', error));
    }

Página de tema

La página de tema recibe un ID de tema y necesita varias llamadas de datos para obtener todos sus datos:

1. Obtenga todos los artículos para el tema especificado.
2. Para cada artículo, obtenga sus URL de representación.

Abra src/scripts/services.js y busque la función fetchTopicArticles(topicId), que se utiliza para obtener todos los datos de la página del tema.

export function fetchTopicArticles(topicId) {
      const client = getClient();
      return client.queryItems({
        q: `(type eq "OCEGettingStartedArticle" AND fields.topic eq "${topicId}")`,
        orderBy: 'fields.published_date:desc',
      }).then((data) => {
        const promises = [];
        const articles = data.items;

        articles.forEach((article) => {
          // add a promise to the total list of promises to get the article url
          promises.push(
            getRenditionURLs(client, article.fields.image.id)
              .then((renditionUrls) => {
                article.renditionUrls = renditionUrls;
                return {
                  ...article,
                };
              }),
          );
        });

        // execute all the promises and return all the data
        // execute all the promises and return all the data
        return Promise.all(promises)
          .then((allArticles) => ({
            topicId,
            articles: flattenArray(allArticles),
          }));
      }).catch((error) => logError('Fetching topic articles failed', error));
    }

Página de Artículo

La página de artículo recibe un ID de artículo y requiere varias llamadas de datos para obtener todos sus datos:

1. Obtenga los detalles del artículo especificado.
2. Para el autor del artículo, obtenga las URL de representación del avatar.

Abra src/scripts/services.js y busque la función fetchArticleDetails(articleId), que obtiene los datos de la página del artículo.

export function fetchArticleDetails(articleId) {
      const client = getClient();
      return client.getItem({
        id: articleId,
        expand: 'all',
      }).then((article) => {
        const title = article.fields.author.name;
        const date = article.fields.published_date;
        const content = article.fields.article_content;
        const imageCaption = article.fields.image_caption;
        const { name } = article;
        const renditionUrls = getSourceSet(article.fields.image);
        const avatarID = article.fields.author.fields.avatar.id;
        // Get the author's avatar image
        return getRenditionURLs(client, avatarID)
          .then((authorRenditionUrls) => (
            // return an object with just the data needed
            {
              id: articleId,
              name,
              title,
              date,
              content,
              imageCaption,
              renditionUrls,
              authorRenditionUrls,
            }
          ));
      }).catch((error) => logError('Fetching article details failed', error));
    }

Ahora que tenemos nuestras consultas de datos, podemos presentar las respuestas en nuestros componentes nuevos.

Componentes nuevos

La aplicación de blog desglosa cada página en una serie de componentes más pequeños.

En las siguientes secciones se proporciona una visión general de cómo Svelte presenta nuestra aplicación en cada uno de nuestros componentes:

• Rutas
• Componente TopicsListPage
• Componente de cabecera
• Componente TopicsListItem
• Componente ArticesListPage
• Componente ArticesListItem
• Componente ArticleDetailsPage
• Rutas de navegación y componentes de rutas de navegación

Rutas

Las páginas en Sapper son componentes Svelte escritos en archivos .svelte. Cuando un usuario visita la aplicación por primera vez, se les proporcionará una versión representada por el servidor de la ruta en cuestión, además de algún JavaScript que "hidrata" la página e inicializa un enrutador del lado del cliente. Desde ese punto en adelante, navegar a otras páginas se maneja por completo en el cliente para una sensación rápida similar a la de la aplicación. El nombre de archivo determina la ruta.

En nuestro sitio, queremos proporcionar tres rutas:

• La página inicial, que consta de la lista de temas.
• Página de tema, que muestra todos los artículos del tema seleccionado
• La página de artículo individual, que muestra el artículo seleccionado

El archivo src/routes/index.svelte sirve a la página inicial. src/routes/articles/[slug].svelte sirve a la página del tema y src/routes/article/[slug].svelte sirve a la página del artículo.

Componente TopicsListPage

La página inicial consta de una lista de temas en un canal. Lo presenta el componente, ubicado en src/routes/index.svelte.

El componente importa la API para obtener datos del archivo services.js. En preload(), llamada durante el tiempo de creación, el componente obtiene todos los datos necesarios para presentar la página inicial.

<script context="module">
      import { getTopicsListPageData } from "../scripts/services.js";
      export async function preload() {
        const data = await getTopicsListPageData();
        return { data };
      }
    </script>

Componente de cabecera

El componente TopicsListPage utiliza el componente Cabecera para mostrar el título de la compañía, el logotipo de la compañía y los enlaces Contacto/Acerca de nosotros.

Se encuentra en src/components/Header.svelte y recibe todos sus datos como propiedades. No obtiene ningún dato adicional del servidor.

Componente TopicsListItem

El componente TopicsListPage utiliza el componente TopicsListItem para mostrar el tema individual en la lista.

El componente TopicsListItem, ubicado en src/components/TopicsListItem.svelte, recibe todos sus datos como propiedades. No obtiene ningún dato adicional del servidor.

Componente ArticlesListPage

La página Tema muestra los artículos del tema cuyo ID se transfiere al componente de la URL. Lo presenta el componente ArticlesListPage, ubicado en src/routes/articles/[slug].svelte.

El componente importa la API para obtener los datos del archivo services.js.

<script context="module">
      import { fetchTopicArticles } from "../../scripts/services.js";
      export async function preload(page) {
        const topicId = page.params.slug;
        const topicName = page.query.topicName;
        const articlesData = await fetchTopicArticles(topicId);
        return { topicId, topicName, articlesData };
      }
    </script>

Componente ArticlesListItem

El componente ArticlesListPage utiliza el componente ArticlesListItem para mostrar los artículos individuales de la lista.

El componente ArticlesListItem está ubicado en src/components/ArticlesListItem.svelte y recibe todos sus datos como propiedades. No obtiene ningún dato adicional del servidor.

Componente ArticleDetailsPage

La página Artículo muestra detalles del artículo cuyo ID se transfiere a la URL. Lo presenta el componente ArticleDetails, ubicado en src/routes/article/[slug].svelte.

El componente importa la API para obtener los datos del archivo services.js.

<script context="module">
      import { fetchArticleDetails } from "../../scripts/services.js";
      export async function preload(page) {
        const articleId = page.params.slug;
        const topicId = page.query.topicId;
        const topicName = page.query.topicName;
        const article = await fetchArticleDetails(articleId);
        return { topicId, topicName, article };
      }
    </script>

Rutas de navegación y componentes de rutas de navegación

Los componentes ArticlesListPage y ArticleDetailsPage utilizan las rutas de navegación y los componentes de la ruta de navegación para mostrar las rutas de navegación en la parte superior de la página, lo que permite al usuario volver a la página Tema o a la página inicial. Ambos componentes reciben todos sus datos como propiedades; no obtienen datos adicionales del servidor.

Tarea 3: Preparación de la aplicación para el despliegue

Ahora que hemos creado nuestro sitio de blog de Svelte, necesitamos verlo en un servidor de desarrollo local para depurar cualquier problema y obtener una previsualización de la aplicación antes de que se active.

Prepare la aplicación para el despliegue en tres pasos:

1. Cree la aplicación
2. Ejecutar la aplicación mediante el nodo
3. Utilizar scripts para crear y ejecutar la aplicación en desarrollo

Creación de la aplicación

Sapper permite exportar un sitio estático con un único comando de exportación de sapper de configuración cero. Para crear la aplicación, ejecute el siguiente comando.

npm run export

Esto creará una carpeta sapper/exportadora con una compilación de su sitio preparada para la producción.

Ejecución de la aplicación mediante el nodo

Una vez creada la carpeta de creación, puede iniciarla de la siguiente manera:

npm run start

A continuación, abra el explorador en http://localhost:5000 para ver el sitio en acción.

Uso de scripts para crear y ejecutar la aplicación en desarrollo y producción

El archivo package.json ubicado en la raíz del proyecto contiene una secuencia de comandos que facilitan la creación de los paquetes y la ejecución de la aplicación.

Desarrollo

Puede utilizar el script de desarrollo durante el desarrollo:

npm run dev

Producción

El script de producción de Sapper incluye dos versiones: compilación y exportación. El comando 'build' generará una aplicación de nodo hostil y la exportación generará una versión estática del sitio. Para la producción, puede utilizar:

npm run build
    npm run startbuild

O para la versión estática, utilice

npm run export
    npm run start

Conclusión

En este tutorial, creamos un sitio de blog en Svelte, que puede encontrarse en GitHub. Este sitio utiliza Oracle Content Management como CMS sin cabecera. Después de configurar Oracle Content Management con un canal de contenido publicado para el tutorial del sitio de blog, hemos instalado y ejecutado el sitio de Svelte para recuperar el contenido necesario y crear el sitio.

Para obtener más información sobre Svelte, vaya al sitio web de Savelte.

Obtenga información sobre los conceptos importantes de Oracle Content Management en la documentación.

Puede encontrar más ejemplos como este en la página Ejemplos de Oracle Content Management en el Centro de ayuda de Oracle.

---

Título e Información de Copyright

Creación de un blog en Svelte con la solución Oracle Content Management sin cabecera

F51069-01

Diciembre de 2021

Copyright © 2021, Oracle and/or its affiliates.

Autor Principal: Oracle Corporation