Tutorial: Creación y actualización de una aplicación React

Como autor de planos, puedes desarrollar y añadir planos personalizados al catálogo de planos de tu espacio. Luego, los miembros del espacio pueden usar estos planos para crear nuevos proyectos o agregarlos a proyectos existentes. Puedes seguir realizando cambios en tus planos para que luego estén disponibles como actualizaciones a través de solicitudes de extracción de información.

En este tutorial se ofrece un recorrido desde la perspectiva del autor del plano y del usuario del mismo. El tutorial muestra cómo crear un plano de aplicación web de una sola página para React. Luego, el plano se usa para crear un nuevo proyecto. Cuando el blueprint se actualiza con los cambios, el proyecto creado a partir del blueprint incorpora esos cambios mediante una solicitud de extracción.

Requisitos previos

Para crear y actualizar un esquema personalizado, debes haber completado las tareas de la siguiente maneraConfigurar e iniciar sesión en CodeCatalyst:

• Tenga un ID de AWS constructor para iniciar CodeCatalyst sesión.

• Pertenece a un espacio y tienes asignado el rol de administrador del espacio o usuario avanzado en ese espacio. Para obtener más información, consulte Crear un espacio, Concesión de permisos de espacio a los usuarios y Función de administrador de espacios.

Paso 1: Crea un plano personalizado

Al crear un plan personalizado, se crea un CodeCatalyst proyecto que contiene el código fuente del plan y las herramientas y los recursos de desarrollo. Tu proyecto es el lugar donde desarrollarás, probarás y publicarás el plan.

1. Abra la CodeCatalyst consola en https://codecatalyst.aws/.

2. En la CodeCatalyst consola, navegue hasta el espacio en el que desee crear un plano.

3. Seleccione Configuración para ir a la configuración del espacio.

4. En la pestaña de configuración del espacio, selecciona Planos y selecciona Crear plano.

5. Actualice los campos del asistente de creación de planos con los siguientes valores:

   • En el nombre del plano, introduzca. react-app-blueprint

   • En Nombre para mostrar del esquema, introduzca. react-app-blueprint

6. Si lo desea, seleccione Ver código para obtener una vista previa del código fuente del blueprint de su blueprint. Del mismo modo, elija Ver flujo de trabajo para obtener una vista previa del flujo de trabajo que se creará en el proyecto que crea y publica el blueprint.

7. Elija Crear esquema.

8. Una vez creado el plano, se le redirigirá al proyecto del plano. Este proyecto contiene el código fuente del plan, junto con las herramientas y los recursos que necesita para desarrollar, probar y publicar el plan. Se generó un flujo de trabajo de publicación que publicó automáticamente tu plan en el espacio.

9. Ahora que el plano y el proyecto de anteproyecto están creados, el siguiente paso es configurarlos actualizando el código fuente. Puedes usar Dev Environments para abrir y editar tu repositorio de código fuente directamente en tu navegador.

   En el panel de navegación, selecciona Código y, a continuación, selecciona Entornos de desarrollo.

10. Elija Crear entorno de desarrollo y, a continuación, elija AWS Cloud9 (en el navegador).

11. Mantenga la configuración predeterminada y elija Crear.

12. En la AWS Cloud9 terminal, navegue hasta el directorio de su proyecto de blueprint ejecutando el siguiente comando:

    cd react-app-blueprint

13. Al crear un plano, se crea y rellena automáticamente una static-assets carpeta. En este tutorial, eliminarás la carpeta predeterminada y generarás una nueva para el blueprint de una aplicación de React.

    Elimine la carpeta static-assets ejecutando el siguiente comando:

    rm -r static-assets

    AWS Cloud9 se basa en una plataforma basada en Linux. Si utilizas un sistema operativo Windows, puedes usar el siguiente comando en su lugar:

    rmdir /s /q static-assets

14. Ahora que se ha eliminado la carpeta predeterminada, cree una static-assets carpeta para un blueprint de react-app ejecutando el siguiente comando:

    npx create-react-app static-assets

    Si se te solicita, ingresa y para continuar.

    Se creó una nueva aplicación de reacción en la static-assets carpeta con los paquetes necesarios. Los cambios deben enviarse a su repositorio de CodeCatalyst código fuente remoto.

15. Asegúrese de tener los cambios más recientes y, a continuación, confirme e inserte los cambios en el repositorio CodeCatalyst fuente del blueprint ejecutando los siguientes comandos:

    git pull

    git add .

    git commit -m "Add React app to static-assets"

    git push

Cuando se envía un cambio al repositorio de origen del blueprint, el flujo de trabajo de publicación se inicia automáticamente. Este flujo de trabajo incrementa la versión del blueprint, crea el blueprint y lo publica en tu espacio. En el siguiente paso, navegarás hasta la ejecución del flujo de trabajo de la versión para ver su rendimiento.

Paso 2: Ver el flujo de trabajo de las versiones

1. En la CodeCatalyst consola, en el panel de navegación, selecciona CI/CD y, a continuación, selecciona Flujos de trabajo.

2. Elija el flujo de trabajo del blueprint-release.

3. Puede ver que el flujo de trabajo incluye acciones para crear y publicar el blueprint.

4. En Última ejecución, elija el enlace de ejecución del flujo de trabajo para ver la ejecución a partir del cambio de código que realizó.

5. Una vez finalizada la ejecución, se publica la nueva versión del plan. Las versiones de planos publicadas se pueden ver en la configuración del espacio, pero no se pueden usar en proyectos hasta que se agreguen al catálogo de planos del espacio. En el siguiente paso, añadirá el plano al catálogo.

Paso 3: Añadir el plano al catálogo

Al añadir un plano al catálogo de planos del espacio, el plano estará disponible para su uso en todos los proyectos de un espacio. Los miembros del espacio pueden usar el plano para crear nuevos proyectos o añadirlos a proyectos existentes.

1. En la CodeCatalyst consola, vuelve al espacio.

2. Selecciona Configuración y, a continuación, selecciona Planos.

3. Elija y react-app-blueprint, a continuación, elija Añadir al catálogo.

4. Seleccione Guardar.

Paso 4: Crea un proyecto con blueprint

Ahora que el plano se ha añadido al catálogo, se puede utilizar en proyectos. En este paso, creará un proyecto con el plano que acaba de crear. En un paso posterior, actualizará este proyecto actualizando y publicando una nueva versión del blueprint.

1. Seleccione la pestaña Proyectos y, a continuación, elija Crear proyecto.

2. Seleccione Planos de espacio y, a continuación, elija react-app-blueprint.

   nota

   Una vez elegido el plano, podrás ver el contenido del archivo del plano. README.md

3. Elija Siguiente.

4. nota

   El contenido de este asistente de creación de proyectos se puede configurar en el plano.

   Introduzca el nombre del proyecto como usuario del blueprint. En este tutorial, escriba react-app-project. Para obtener más información, consulte Desarrollo de un plan personalizado para cumplir con los requisitos del proyecto.

A continuación, actualizará el esquema y agregará la nueva versión al catálogo, que utilizará para actualizar este proyecto.

Paso 5: Actualizar el esquema

Una vez que se haya utilizado un plano para crear un proyecto nuevo o se haya aplicado a proyectos existentes, podrá seguir realizando actualizaciones como autor del modelo. En este paso, realizará cambios en el esquema y publicará automáticamente una nueva versión en el espacio. A continuación, la nueva versión se puede añadir como versión del catálogo.

1. Navegue hasta el react-app-blueprintproyecto creado enTutorial: Creación y actualización de una aplicación React.

2. Abra el entorno de desarrollo creado enTutorial: Creación y actualización de una aplicación React.

   1. En el panel de navegación, elija Código y, a continuación, elija Entornos de desarrollo.

   2. En la tabla, busca el entorno de desarrollo y, a continuación, selecciona Abrir en AWS Cloud9 (en el navegador).

3. Cuando se ejecutó el flujo de trabajo de publicación del blueprint, se incrementó la versión del blueprint al actualizar el archivo. package.json Para obtener ese cambio, ejecute el siguiente comando en la terminal: AWS Cloud9

   git pull

4. Navegue hasta la static-assets carpeta ejecutando el siguiente comando:

   cd /projects/react-app-blueprint/static-assets

5. Cree un hello-world.txt archivo en static-assets la carpeta ejecutando el siguiente comando:

   touch hello-world.txt

   AWS Cloud9 se basa en una plataforma basada en Linux. Si utilizas un sistema operativo Windows, puedes usar el siguiente comando en su lugar:

   echo > hello-world.text

6. En el panel de navegación de la izquierda, haz doble clic en el hello-world.txt archivo para abrirlo en el editor y añade el siguiente contenido:

   Hello, world!

   Guarde el archivo.

7. Asegúrese de tener los cambios más recientes y, a continuación, confirme e inserte los cambios en el repositorio CodeCatalyst fuente del blueprint ejecutando los siguientes comandos:

   git pull

   git add .

   git commit -m "prettier setup"

   git push

Al introducir los cambios, se inició el flujo de trabajo de publicación, que publicará automáticamente la nueva versión del blueprint en el espacio.

Paso 6: Actualice la versión del catálogo publicada del blueprint a la nueva versión

Una vez que se haya utilizado un plano para crear un proyecto nuevo o se haya aplicado a proyectos existentes, podrá seguir actualizándolo como autor del modelo. En este paso, realizará cambios en el esquema y cambiará la versión del catálogo del esquema.

1. En la CodeCatalyst consola, vuelve al espacio.

2. Selecciona Configuración y, a continuación, selecciona Planos.

3. Elija y react-app-blueprint, a continuación, elija Administrar la versión del catálogo.

4. Elija la nueva versión y, a continuación, seleccione Guardar.

Paso 7: Actualice el proyecto con una nueva versión del plan

Ya hay una nueva versión disponible en el catálogo de planos del espacio. Como usuario de blueprint, puede actualizar la versión del proyecto creado en. Paso 4: Crea un proyecto con blueprint Esto garantiza que dispone de los cambios y correcciones más recientes necesarios para cumplir con las prácticas recomendadas.

1. En la CodeCatalyst consola, navegue hasta el react-app-projectproyecto creado enPaso 4: Crea un proyecto con blueprint.

2. En el panel de navegación, elija Blueprints (Esquemas).

3. Selecciona Actualizar esquema en el cuadro de información.

4. En el panel de cambios de código de la derecha, puedes ver las actualizaciones hello-world.txt y package.json las actualizaciones.

5. Selecciona Aplicar actualización.

Al seleccionar Aplicar actualización, se crea una solicitud de cambios en el proyecto con los cambios respecto a la versión actualizada del blueprint. Para realizar las actualizaciones en el proyecto, debes fusionar la solicitud de extracción. Para obtener más información, consulte Revisión de una solicitud de extracción y Fusión de una solicitud de extracción.

1. En la tabla de planos, busca el plano. En la columna Estado, selecciona Solicitud de extracción pendiente y, a continuación, selecciona el enlace a la solicitud de extracción abierta.

2. Revisa la solicitud de extracción y, a continuación, selecciona Fusionar.

3. Elija Fusión rápida para mantener los valores predeterminados y, a continuación, elija Fusionar.

Paso 8: Ver los cambios en el proyecto

Los cambios en el plano ya estarán disponibles en su proyecto posteriormentePaso 7: Actualice el proyecto con una nueva versión del plan. Como usuario del blueprint, puede ver los cambios en el repositorio de origen.

1. En el panel de navegación, elija Repositorios de origen y, a continuación, elija el nombre del repositorio de origen creado cuando se creó el proyecto.

2. En Archivos, puede ver el hello-world.txt archivo en Paso 5: Actualizar el esquema el que se creó.

3. Elija esta opción hello-world.txt para ver el contenido del archivo.

La gestión del ciclo de vida proporciona a los autores de los planos la posibilidad de gestionar de forma centralizada el ciclo de vida de desarrollo de software de cada proyecto que contenga un plan concreto. Como se muestra en este tutorial, puede introducir actualizaciones en el plan para luego incorporarlas en los proyectos que lo hayan utilizado para crear un nuevo proyecto o lo hayan aplicado a un proyecto existente. Para obtener más información, consulte Trabajar con la administración del ciclo de vida como autor de un plan.