diff --git a/src/content/docs/en/pages/guides/index.mdx b/src/content/docs/en/pages/guides/index.mdx index 54ac176d09..48f62fe9c0 100644 --- a/src/content/docs/en/pages/guides/index.mdx +++ b/src/content/docs/en/pages/guides/index.mdx @@ -88,6 +88,7 @@ permalink: /documentation/products/guides/ - [How to deploy edge applications with the Vue Boilerplate](/en/documentation/products/guides/vue-boilerplate/) - [How to deploy edge applications with the Vue3/Vite Boilerplate](/en/documentation/products/guides/vue-vite-boilerplate/) - [How to deploy the Azion Starter Kit](/en/documentation/products/guides/azion-starter-kit/) +- [How to deploy the Book Store React template](/en/documentation/products/guides/book-store-react/) - [How to deploy the DevsCard template](/en/documentation/products/guides/devscard/) - [How to deploy the Docusaurus JavaScript Boilerplate](/en/documentation/products/guides/docusaurus-javascript-boilerplate/) - [How to deploy the Docusaurus TypeScript Boilerplate](/en/documentation/products/guides/docusaurus-typescript-boilerplate/) diff --git a/src/content/docs/en/pages/guides/marketplace/templates/gatsby-ecomerce-theme.mdx b/src/content/docs/en/pages/guides/marketplace/templates/gatsby-ecomerce-theme.mdx index dda3b6804c..6d74903745 100644 --- a/src/content/docs/en/pages/guides/marketplace/templates/gatsby-ecomerce-theme.mdx +++ b/src/content/docs/en/pages/guides/marketplace/templates/gatsby-ecomerce-theme.mdx @@ -4,7 +4,7 @@ description: >- This template contains the configurations to create an e-commerce application based on the Gatsby framework. meta_tags: >- templates, guides, Azion Marketplace, e-commerce, Gatsby, web -namespace: docs_guides_gatsby_ecomerce_theme +namespace: docs_guides_gatsby_ecommerce_theme permalink: /documentation/products/guides/gatsby-ecommerce-theme/ --- diff --git a/src/content/docs/en/pages/guides/marketplace/templates/react-book-store.mdx b/src/content/docs/en/pages/guides/marketplace/templates/react-book-store.mdx new file mode 100644 index 0000000000..3e69a0b523 --- /dev/null +++ b/src/content/docs/en/pages/guides/marketplace/templates/react-book-store.mdx @@ -0,0 +1,93 @@ +--- +title: How to deploy an e-commerce using the Book Store React template +description: >- + This template contains the configurations to create an e-commerce application based on the React framework. +meta_tags: >- + templates, guides, Azion Marketplace, e-commerce, React, web +namespace: docs_guides_book_store_react +permalink: /documentation/products/guides/book-store-react/ +--- + +import Tag from 'primevue/tag'; + + +Preview + + +The **Book Store React** template contains the configurations for creating a React-based e-commerce application in a few steps. It includes styled components and tools to add functionality, simplifying customization. + +The deployment of this template creates a GitHub repository containing your project, as well as an edge application and a domain to facilitate your access and management through Azion Edge Platform. + +This template uses React version `16.13.1`. + +--- + +## Requirements + +- A [GitHub account](https://github.com/signup) to connect with Azion and create your new repository. + - Every push will be deployed automatically to this repository to keep your project updated. +- This template uses [Application Accelerator](/en/documentation/products/build/edge-application/application-accelerator/), [Edge Functions](/en/documentation/products/build/edge-application/edge-functions/), and [Edge Cache](https://www.azion.com/en/documentation/products/build/edge-application/edge-cache/), and it could generate usage-related costs. Check the [pricing page](https://www.azion.com/en/pricing/) for more information. + +--- + +## Deploying the template + +You can obtain and configure your template through the Azion Console. To easily deploy it at the edge, click the button below. + + + +--- + +## Setting up the template + +In the configuration form, you must provide the information to configure your application. Fill in the presented fields. + +Fields identified with an asterisk are mandatory. + +1. Connect Azion with your GitHub account. + - A pop-up window will open to confirm the installation of the [Azion GitHub App](/en/documentation/products/guides/azion-github-app/), a tool that connects your GitHub account with Azion's platform. + - Define your permissions and repository access as desired. +2. Select the **Git Scope** to work with. +3. Define a name for your edge application. + - The bucket for storage and the edge function will use the same name. + - Use a unique and easy-to-remember name. If the name has already been used, the platform returns an error message. +4. Click the **Deploy** button to start the deployment process. + +During the deployment, you'll be able to follow the process through a window showing off the logs. When it's complete, the page shows information about the application and some options to continue your journey. + +:::note +The link to the edge application allows you to see it on the browser. However, it takes a certain time to propagate and configure the application in Azion's edge locations. It may be necessary to wait a few minutes for the URL to be activated and for the application page to be effectively displayed in the browser. +::: + +--- + +## Managing the template + +Considering that this initial setup may not be optimal for your specific edge application, all settings can be customized any time you need by using Azion's platform. + +To manage and edit your edge application's settings, follow these steps: + +1. [Access Azion Console](https://console.azion.com). +2. On the upper-left corner, select **Products menu**, the icon with three horizontal lines, > **Edge Application**. + - You'll be redirected to the **Edge Application** page. It lists all the edge applications you've created. +3. Find the edge application related to your template and select it. + - The list is organized alphabetically. You can also use the **search bar** located in the upper-left corner of the list; currently, it filters only by **Application Name**. + +After selecting the edge application you'll work on, you'll be directed to a page containing all the settings you can configure. + +:::tip +Read the documentation about [managing edge applications](/en/documentation/products/build/edge-application/first-steps/) for more details. +::: + +### Adding a custom domain + +The edge application created during the deployment has an assigned Azion domain to make it accessible through the browser. The domain has the following format: `xxxxxxxxxx.map.azionedge.net/`. However, you can add a custom domain for users to access your edge application through it. + +import LinkButton from 'azion-webkit/linkbutton'; + + diff --git a/src/content/docs/en/pages/main-menu/additional-resources/templates-and-integrations/understand-azion-templates.mdx b/src/content/docs/en/pages/main-menu/additional-resources/templates-and-integrations/understand-azion-templates.mdx index e8ac4cc703..6f66f2be1a 100644 --- a/src/content/docs/en/pages/main-menu/additional-resources/templates-and-integrations/understand-azion-templates.mdx +++ b/src/content/docs/en/pages/main-menu/additional-resources/templates-and-integrations/understand-azion-templates.mdx @@ -148,6 +148,19 @@ The Astro E-commerce Templates collection presents a number of templates to depl icon-pos="left" /> +#### Book Store React + +This template helps you build an e-commerce application based on the React framework. + + + + + #### DevsCard This template helps you deploy an online resume using the DevsCard project. diff --git a/src/content/docs/pt-br/pages/guias/guides.mdx b/src/content/docs/pt-br/pages/guias/guides.mdx index 518f739f69..457538584e 100644 --- a/src/content/docs/pt-br/pages/guias/guides.mdx +++ b/src/content/docs/pt-br/pages/guias/guides.mdx @@ -90,6 +90,7 @@ permalink: /documentacao/produtos/guias/ - [Como implantar o Hugo Boilerplate](/pt-br/documentacao/produtos/guias/hugo-boilerplate/) - [Como implantar o Jekyll Boilerplate](/pt-br/documentacao/produtos/guias/jekyll-boilerplate/) - [Como implantar o MongoDB Atlas Boilerplate](/pt-br/documentacao/produtos/guias/mongodb-atlas/) +- [Como implantar o template Book Store React](/pt-br/documentacao/produtos/guias/book-store-react/) - [Como implantar o template DevsCard](/pt-br/documentacao/produtos/guias/devscard/) - [Como implantar o template Docusaurus with Material UI](/pt-br/documentacao/produtos/guias/docusaurus-material-ui-template/) - [Como implantar o template Dynamic and Static File Optimization](/pt-br/documentacao/produtos/guias/dynamic-static-file-optimization-template/) diff --git a/src/content/docs/pt-br/pages/guias/marketplace/templates/astro-ecommerce-collection.mdx b/src/content/docs/pt-br/pages/guias/marketplace/templates/astro-ecommerce-collection.mdx index 8be119c992..4ccaab937f 100644 --- a/src/content/docs/pt-br/pages/guias/marketplace/templates/astro-ecommerce-collection.mdx +++ b/src/content/docs/pt-br/pages/guias/marketplace/templates/astro-ecommerce-collection.mdx @@ -78,7 +78,7 @@ Os campos identificados com um asterisco são obrigatórios. Durante a implantação, você poderá acompanhar o processo através de uma janela que mostra os logs. Quando estiver completo, a página mostra informações sobre a aplicação e algumas opções para continuar sua jornada. :::note -O link para a edge application permite que você a veja no navegador. No entanto, leva um certo tempo para propagar e configurar a aplicação nas localizações de borda da Azion. Pode ser necessário esperar alguns minutos para que a URL seja ativada e para que a página da aplicação seja efetivamente exibida no navegador. +O link para a edge application permite que você a veja no navegador. No entanto, leva um certo tempo para propagar e configurar a aplicação nas edge locations da Azion. Pode ser necessário esperar alguns minutos para que a URL seja ativada e para que a página da aplicação seja efetivamente exibida no navegador. ::: --- diff --git a/src/content/docs/pt-br/pages/guias/marketplace/templates/eleventy-ecommerce-collection.mdx b/src/content/docs/pt-br/pages/guias/marketplace/templates/eleventy-ecommerce-collection.mdx index 21060b1fc0..a5493eeef6 100644 --- a/src/content/docs/pt-br/pages/guias/marketplace/templates/eleventy-ecommerce-collection.mdx +++ b/src/content/docs/pt-br/pages/guias/marketplace/templates/eleventy-ecommerce-collection.mdx @@ -71,7 +71,7 @@ Os campos identificados com um asterisco são obrigatórios. Durante a implantação, você poderá acompanhar o processo através de uma janela que mostra os logs. Quando estiver completo, a página mostra informações sobre a aplicação e algumas opções para continuar sua jornada. :::note -O link para a edge application permite que você a veja no navegador. No entanto, leva um certo tempo para propagar e configurar a aplicação nas localizações de borda da Azion. Pode ser necessário esperar alguns minutos para que a URL seja ativada e para que a página da aplicação seja efetivamente exibida no navegador. +O link para a edge application permite que você a veja no navegador. No entanto, leva um certo tempo para propagar e configurar a aplicação nas edge locations da Azion. Pode ser necessário esperar alguns minutos para que a URL seja ativada e para que a página da aplicação seja efetivamente exibida no navegador. ::: --- diff --git a/src/content/docs/pt-br/pages/guias/marketplace/templates/gatsby-ecommerce-theme.mdx b/src/content/docs/pt-br/pages/guias/marketplace/templates/gatsby-ecommerce-theme.mdx index 4ef77d4eb5..ec1e988f57 100644 --- a/src/content/docs/pt-br/pages/guias/marketplace/templates/gatsby-ecommerce-theme.mdx +++ b/src/content/docs/pt-br/pages/guias/marketplace/templates/gatsby-ecommerce-theme.mdx @@ -4,7 +4,7 @@ description: >- Este template contém as configurações para criar uma aplicação e-commerce baseada no framework Gatsby. meta_tags: >- templates, guides, Azion Marketplace, e-commerce, Gatsby, web -namespace: docs_guides_gatsby_ecomerce_theme +namespace: docs_guides_gatsby_ecommerce_theme permalink: /documentacao/produtos/guias/gatsby-ecommerce-theme/ --- @@ -61,7 +61,7 @@ Os campos identificados com um asterisco são obrigatórios. Durante a implantação, você poderá acompanhar o processo através de uma janela que mostra os logs. Quando estiver completo, a página mostra informações sobre a aplicação e algumas opções para continuar sua jornada. :::note -O link para a edge application permite que você a veja no navegador. No entanto, leva um certo tempo para propagar e configurar a aplicação nas localizações de borda da Azion. Pode ser necessário esperar alguns minutos para que a URL seja ativada e para que a página da aplicação seja efetivamente exibida no navegador. +O link para a edge application permite que você a veja no navegador. No entanto, leva um certo tempo para propagar e configurar a aplicação nas edge locations da Azion. Pode ser necessário esperar alguns minutos para que a URL seja ativada e para que a página da aplicação seja efetivamente exibida no navegador. ::: --- diff --git a/src/content/docs/pt-br/pages/guias/marketplace/templates/hugo-ecommerce-collection.mdx b/src/content/docs/pt-br/pages/guias/marketplace/templates/hugo-ecommerce-collection.mdx index c3710afe68..95713c454e 100644 --- a/src/content/docs/pt-br/pages/guias/marketplace/templates/hugo-ecommerce-collection.mdx +++ b/src/content/docs/pt-br/pages/guias/marketplace/templates/hugo-ecommerce-collection.mdx @@ -71,7 +71,7 @@ Os campos identificados com um asterisco são obrigatórios. Durante a implantação, você poderá acompanhar o processo através de uma janela que mostra os logs. Quando estiver completo, a página mostra informações sobre a aplicação e algumas opções para continuar sua jornada. :::note -O link para a edge application permite que você a veja no navegador. No entanto, leva um certo tempo para propagar e configurar a aplicação nas localizações de borda da Azion. Pode ser necessário esperar alguns minutos para que a URL seja ativada e para que a página da aplicação seja efetivamente exibida no navegador. +O link para a edge application permite que você a veja no navegador. No entanto, leva um certo tempo para propagar e configurar a aplicação nas edge locations da Azion. Pode ser necessário esperar alguns minutos para que a URL seja ativada e para que a página da aplicação seja efetivamente exibida no navegador. ::: --- diff --git a/src/content/docs/pt-br/pages/guias/marketplace/templates/jekyll-ecommerce-collection.mdx b/src/content/docs/pt-br/pages/guias/marketplace/templates/jekyll-ecommerce-collection.mdx index 9de6086bc3..eb106a9b75 100644 --- a/src/content/docs/pt-br/pages/guias/marketplace/templates/jekyll-ecommerce-collection.mdx +++ b/src/content/docs/pt-br/pages/guias/marketplace/templates/jekyll-ecommerce-collection.mdx @@ -71,7 +71,7 @@ Os campos identificados com um asterisco são obrigatórios. Durante a implantação, você poderá acompanhar o processo através de uma janela que mostra os logs. Quando estiver completo, a página mostra informações sobre a aplicação e algumas opções para continuar sua jornada. :::note -O link para a edge application permite que você a veja no navegador. No entanto, leva um certo tempo para propagar e configurar a aplicação nas localizações de borda da Azion. Pode ser necessário esperar alguns minutos para que a URL seja ativada e para que a página da aplicação seja efetivamente exibida no navegador. +O link para a edge application permite que você a veja no navegador. No entanto, leva um certo tempo para propagar e configurar a aplicação nas edge locations da Azion. Pode ser necessário esperar alguns minutos para que a URL seja ativada e para que a página da aplicação seja efetivamente exibida no navegador. ::: --- diff --git a/src/content/docs/pt-br/pages/guias/marketplace/templates/react-book-store.mdx b/src/content/docs/pt-br/pages/guias/marketplace/templates/react-book-store.mdx new file mode 100644 index 0000000000..2bebba9249 --- /dev/null +++ b/src/content/docs/pt-br/pages/guias/marketplace/templates/react-book-store.mdx @@ -0,0 +1,93 @@ +--- +title: Como implantar um e-commerce usando o template Book Store React +description: >- + Este template contém as configurações para criar uma aplicação e-commerce baseada no framework React. +meta_tags: >- + templates, guides, Azion Marketplace, e-commerce, React, web +namespace: docs_guides_book_store_react +permalink: /documentacao/produtos/guias/book-store-react/ +--- + +import Tag from 'primevue/tag'; + + +Preview + + +O template **Book Store React** contém as configurações para criar uma aplicação de e-commerce baseada em React em poucos passos. Ele inclui componentes estilizados e ferramentas para adicionar funcionalidades, simplificando a personalização. + +A implantação deste template cria um repositório do GitHub contendo seu projeto, além de uma edge application e um domínio para facilitar seu acesso e gerenciamento através da Plataforma de Edge da Azion. + +Este template usa a versão `16.13.1` do React. + +--- + +## Pré-requisitos + +- Uma [conta GitHub](https://github.com/signup) para se conectar com a Azion e criar seu novo repositório. + - Cada push será implantado automaticamente nesse repositório para manter seu projeto atualizado. +- O template usa [Edge Functions](/pt-br/documentacao/produtos/build/edge-application/edge-functions/), [Application Accelerator](/pt-br/documentacao/produtos/build/edge-application/application-accelerator/), e [Edge Cache](/pt-br/documentacao/produtos/build/edge-application/edge-cache/). Isso pode gerar custos relacionados ao uso. Consulte a [página de preços](/pt-br/documentacao/produtos/precos/) para mais informações. + +--- + +## Implante o template + +Você pode obter e configurar seu template através do Azion Console. Para implantá-lo facilmente no edge, clique no botão abaixo. + + + +--- + +## Configure o template + +No formulário de configuração, você deve fornecer as informações para configurar sua aplicação. Preencha os campos apresentados. + +Os campos identificados com um asterisco são obrigatórios. + +1. Conecte a Azion com sua conta do GitHub. + - Uma janela pop-up será aberta para confirmar a instalação do [Azion GitHub App](/pt-br/documentacao/produtos/guias/azion-github-app/), uma ferramenta que conecta sua conta do GitHub com a plataforma da Azion. + - Defina suas permissões e acesso ao repositório como desejado. +2. Selecione o **Git Scope** com o qual trabalhar. +3. Defina um nome para sua edge application. + - O bucket para armazenamento e a edge function usarão o mesmo nome. + - Use um nome único e fácil de lembrar. Se o nome já tiver sido usado, a plataforma retornará uma mensagem de erro. +4. Clique no botão **Deploy** para iniciar o processo de implantação. + +Durante a implantação, você poderá acompanhar o processo através de uma janela que mostra os logs. Quando estiver completo, a página mostra informações sobre a aplicação e algumas opções para continuar sua jornada. + +:::note +O link para a edge application permite que você a veja no navegador. No entanto, leva um certo tempo para propagar e configurar a aplicação nas edge locations da Azion. Pode ser necessário esperar alguns minutos para que a URL seja ativada e para que a página da aplicação seja efetivamente exibida no navegador. +::: + +--- + +## Gerencie o template + +Considerando que essa configuração inicial pode não ser ótima para sua edge application específica, todas as configurações podem ser personalizadas a qualquer momento que você precise, usando a plataforma da Azion. + +Para gerenciar e editar as configurações da sua aplicação edge, siga esses passos: + +1. [Acesse o Azion Console](https://console.azion.com). +2. No canto superior esquerdo, selecione **Products Menu**, o ícone de três linhas horizontais, > **Edge Application**. + - Você será redirecionado para a página **Edge Application**. Ela lista todas as edge application que você criou. +3. Encontre a edge application relacionada ao seu template e selecione-a. + - A lista está organizada alfabeticamente. Você também pode usar a **barra de busca** localizada no canto superior esquerdo da lista; atualmente, ela filtra apenas pelo campo **Application Name**. + +Depois de selecionar a aplicação edge que você trabalhará, você será direcionado para uma página contendo todas as configurações que você pode configurar. + +:::tip +Leia a documentação sobre [gerenciamento de edge application](/pt-br/documentacao/produtos/build/edge-application/primeiros-passos/) para mais detalhes. +::: + +### Adicione um domínio personalizado + +A edge application criada durante a implantação tem um domínio Azion atribuído para torná-la acessível através do navegador. O domínio tem o seguinte formato: `xxxxxxxxxx.map.azionedge.net/`. No entanto, você pode adicionar um domínio personalizado para que os usuários acessem sua edge application através dele. + +import LinkButton from 'azion-webkit/linkbutton'; + + diff --git a/src/content/docs/pt-br/pages/guias/marketplace/templates/webpage-to-pdf-resume.mdx b/src/content/docs/pt-br/pages/guias/marketplace/templates/webpage-to-pdf-resume.mdx index 303383246f..5599f78701 100644 --- a/src/content/docs/pt-br/pages/guias/marketplace/templates/webpage-to-pdf-resume.mdx +++ b/src/content/docs/pt-br/pages/guias/marketplace/templates/webpage-to-pdf-resume.mdx @@ -61,7 +61,7 @@ Os campos identificados com um asterisco são obrigatórios. Durante a implantação, você poderá acompanhar o processo através de uma janela que mostra os logs. Quando estiver completo, a página mostra informações sobre a aplicação e algumas opções para continuar sua jornada. :::note -O link para a edge application permite que você a veja no navegador. No entanto, leva um certo tempo para propagar e configurar a aplicação nas localizações de borda da Azion. Pode ser necessário esperar alguns minutos para que a URL seja ativada e para que a página da aplicação seja efetivamente exibida no navegador. +O link para a edge application permite que você a veja no navegador. No entanto, leva um certo tempo para propagar e configurar a aplicação nas edge locations da Azion. Pode ser necessário esperar alguns minutos para que a URL seja ativada e para que a página da aplicação seja efetivamente exibida no navegador. ::: --- diff --git a/src/content/docs/pt-br/pages/menu-principal/recursos-adicionais/templates-e-integracoes/templates-visao-geral.mdx b/src/content/docs/pt-br/pages/menu-principal/recursos-adicionais/templates-e-integracoes/templates-visao-geral.mdx index 88ab0e2062..a7bfaa5e4d 100644 --- a/src/content/docs/pt-br/pages/menu-principal/recursos-adicionais/templates-e-integracoes/templates-visao-geral.mdx +++ b/src/content/docs/pt-br/pages/menu-principal/recursos-adicionais/templates-e-integracoes/templates-visao-geral.mdx @@ -149,6 +149,19 @@ A coleção Astro E-commerce Templates apresenta uma série de templates para im icon-pos="left" /> +#### Book Store React + +Este template permite construir uma aplicação de e-commerce baseada no framework React. + + + + + #### DevsCard Este template permite implantar um currículo online usando o projeto DevsCard.