Categorias
WordPress

Criando 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 em 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 sua aplicação 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 dentro da 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.

Terminal rodando o script para criar um projeto frontity

Quando executado o comando as 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

Tema mars rodando no localhost

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;

Como podemos temos 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:

Tema inicial apontado para meu blog

Como podemos ver minha aplicação frontity passou a carregar os posts do meu blog pessoal mas o header ainda continua 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;

Se você navegar pela a 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 na 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.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *