Criando o seu primeiro projeto com Frontity

No post anterior eu fiz uma introdução sobre Frontity nesse post eu irei mostrar o passa-a-passo de como criar o seu primeiro Projeto com Frontity.

Para isso teremos alguns pré-requisitos:

• Node.js instalado na nossa máquina
• Terminal de linha de comando
• Um editor de texto para codificar o nosso tema no meu caso irei utilizar o vs code
• Ter uma aplicação WordPress para conectar com a sua aplicação Frontity

Inicializando um projeto Frontity

Agora com tudo pronto precisamos abrir o nosso terminal na página que queremos criar o nosso projeto e rodar o seguinte comando:

npx frontity create frontity-tutorial 

Esse comando irá criar um projeto na pasta frontity-tutorial nesse caso podemos utilizar qualquer nome para o nosso projeto. O processo de instalação utiliza npx, mas caso não conheça ele tem o comportamento similar ao npm, mas com uma diferença ele irá. Remover os pacotes uma vez que executados. Caso queira saber mais sobre o recurso acesse este artigo.

Quando executado o comando o recurso irá rodar um passo-a-passo, com duas perguntas a primeira qual será o tema inicial Mars theme ou Twenty Twenty e a segunda pergunta caso queira se inscrever na newsletter do Frontity. Uma vez criado podemos entrar na pasta que criamos e rodar a nossa a aplicação em modo desenvolvimento:

cd frontity-tutorial && npx frontity dev 

Agora acessando a pasta frontity-tutorial temos a seguinte estrutura:

my-app/
|__ node_modules/
|__ package.json
|__ frontity.settings.js
|__ favicon.ico
|__ packages/
    |__ mars-theme/

Uma vez que rodamos frontity em modo desenvolvimento teremos nossa aplicação rodando no endereço localhost:3000

Como podemos ver a nossa aplicação está lendo posts de uma aplicação WordPress, mas precisamos adicionar a nossa própria aplicação, caso esteja rodando uma aplicação local você também pode apontar para ela. Mas no meu teste eu vou utilizar o meu blog pessoal e para isso precisamos alterar as configurações do nosso projeto no arquivo frontity.settings.js que contém o seguinte código

const settings = {
  "name": "frontity-tutorial",
  "state": {
    "frontity": {
      "url": "https://test.frontity.org",
      "title": "Test Frontity Blog",
      "description": "WordPress installation for Frontity development"
    }
  },
  "packages": [
    {
      "name": "@frontity/mars-theme",
      "state": {
        "theme": {
          "menu": [
            [
              "Home",
              "/"
            ],
            [
              "Nature",
              "/category/nature/"
            ],
            [
              "Travel",
              "/category/travel/"
            ],
            [
              "Japan",
              "/tag/japan/"
            ],
            [
              "About Us",
              "/about-us/"
            ]
          ],
          "featured": {
            "showOnList": false,
            "showOnPost": false
          }
        }
      }
    },
    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "api": "https://test.frontity.org/wp-json"
        }
      }
    },
    "@frontity/tiny-router",
    "@frontity/html2react"
  ]
};

export default settings;
Code language: JavaScript (javascript)

Como podemos ter inicialmente algumas configurações do nosso projeto e na parte final temos um endereço guardado na propriedade API esse é um blog de test do frontity para o meu test irei substituir o endereço test.frontity.org por blog.fellyph.com.br assim teremos o seguinte resultado:

Como podemos ver a minha aplicação frontity passou a carregar os posts do meu blog pessoal, mas o header ainda contínua com o conteúdo antigo. Nesse caso essa informação é controlada pelo nosso arquivo de configuração nas propriedades título, descrição e os links pela propriedade menu, assim com a atualização o nosso arquivo ficará o seguinte:

const settings = {
  "name": "frontity-tutorial",
  "state": {
    "frontity": {
      "url": "blog.fellyph.com.br",
      "title": "Blog Frontity Fellyph Cintra",
      "description": "Theme created to the frontity tutorial"
    }
  },
  "packages": [
    {
      "name": "@frontity/mars-theme",
      "state": {
        "theme": {
          "menu": [
            [
              "Home",
              "/"
            ],
            [
              "Tutoriais",
              "/category/tutoriais/"
            ],
            [
              "Curso PWA",
              "/curso-online-progressive-web-apps/"
            ],
            [
              "Sobre",
              "/sobre/"
            ]
          ],
          "featured": {
            "showOnList": false,
            "showOnPost": false
          }
        }
      }
    },
    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "api": "https://blog.fellyph.com.br/wp-json"
        }
      }
    },
    "@frontity/tiny-router",
    "@frontity/html2react"
  ]
};

export default settings;
Code language: JavaScript (javascript)

Se você navegar pela aplicação verá que todos os posts páginas de categorias serão renderizados. Agora o próximo passo caso queira alterar o tema padrão você irá precisar ir à pasta packages/mars-theme/ para entender mais sobre acesse a documentação do tema.

Mas para essa série de posts vamos criar o nosso tema do zero e entender os conceitos por trás do Frontity, mas isso eu irei deixar guardado para o próximo post. Para ler mais posts sobre WordPress acesse a página da categoria WordPress.