Sobre

O Ignews é uma aplicação onde os usuários podem se interar de assuntos próprios do mundo React e aprimorar seus conhecimentos. Esse site foi usado como método de estudo no módulo III da trilha ReactJS do curos Ignite da Rocketseat.
Foram usados nesse site diversos conceitos como SSR (Server-side Rendering), JAMstack, Serverless e CMS.

Single-page Application

O Single-page Application (SPA) é um modelo bastante usado e, de certa forma, o que é mais comum encontrarmos. O Browser lado do cliente faz uma comunicação com o código React bundle.js que se comunica, por sua vez, com o Back-end servidor mandando dados (Nesse exemplo, mandam dados relacionados ao usuário) e retornando dados em formato JSON. Após o término dessa comunicação é renderizado o código HTML.

Server-side Rendering

O Server-side Rendering (SSR) tem uma abordagem diferente. O browser lado do cliente faz uma comunicação com o NextJS um servidor NodeJS que se comunica com o código React bundle.js. O bundle manda dados para o Back-end servidor e obtem um retorno em JSON. Após isso os dados são renderizados em Html, que retornam ao NextJS e após isso é retornado, ainda, ao Browser. Dessa forma todas as requisições que podem dar aquela renderização repentina na sua aplicação, são feitas no servidor Next e só após isso são realmente mandadas ao Browser, evitando-as.

Rodando a aplicação

Há alguns pontos que devem ser atentados antes de rodar o ignews.

.ENV

Você precisará criar um arquivo .env que terá como exemplo o arquivo .env.example. Observe que há algumas API's externas que vão precisar de chaves, então vou tentar explicar como fazer essa configuração.

Stripe

Para configurar o Stripe, é necessário que crie sua conta no site Stripe e que siga os passos abaixo:

• Crie um produto com o valor 9.90 dólares em forma recorrente de pagamento
• Acesse, na sessão para desenvolvedores, as suas chaves de API
• Crie a variável NEXT_PUBLIC_STRIPE_PUB_KEY no seu .env e coloque como valor a sua chave publicável
• Crie a variável STRIPE_API_KEY no seu .env e coloque como valor a sua chave secreta

O Ignews utiliza Webhooks para ouvir atualizações no stripe devido a alguma alteração automática ou influenciada por alguma ação. Para isso, acesse o site Stripe Webhooks e instale o Stripe CLI na sua máquina. Siga os passos abaixo:

• Instalar o Stripe CLI
• Realizar o login através do comando stripe login no seu terminal
• Crie a variável STRIPE_WEBHOOK_SECRET no seu .env e troque pela sua chave que aparecerá após o comando stripe listen --forward-to localhost:3000/api/webhooks no seu terminal
• Replique as variáveis STRIPE_SUC_URL e STRIPE_CAN_URL no seu .env

Ao adicionar as palavras NEXT_PUBLIC_ antes de uma variável, a torna pública. Tome cuidado ao adicionar essas palavras. O Stripe CLI é necessério ao desenvolver a aplicação. Para informações sobre o modo produção, acesse: Stripe Webhooks Production.

Github

Para configurar o Github, é necessário acessar a opção Developer settings nas settings do Github e seguir os passos abaixo:

• Acesse o OAuth Apps
• Crie um novo OAuth App com o valor http://localhost:3000/api/auth/callback no campo Authorization callback URL
• Crie a variável GITHUB_CLIENT_ID no seu .env e coloque como valor seu Client ID
• Cria a variável GITHUB_SECRET_ID no seu .env e coloque como valor seu Client Secrets
• No campo Homepage URL coloque como valor http://localhost:3000

FaunaDB

Para configurar o Fauna, é necessário que crie sua conta no site Fauna e que siga os passos abaixo:

• Criar um database chamado ignews
• Criar a collection subscriptions e a collection users
• Criar o index user_by_email com o valor data.email, sendo unico, no campo terms e source collection sendo users
• Criar o index user_by_stripe_customer_id com o valor data.stripe_customer_id no campo terms e source collection sendo users
• Criar o index subscription_by_id com o valor data.id no campo terms e source collection sendo subscriptions
• Criar o index subscription_by_status com o valor data.status, no campo terms e source collection sendo subscriptions
• Criar o index subscription_by_user_ref com o valor data.userId no campo terms e source collection sendo subscriptions
• Na sessão Security crie uma nova chave com o nome ignews-next-app e coloque a chave secreta na variável FAUNADB_KEY do seu .env

Cuidado! Só é possível visualizar uma vez a sua chave secreta.

Prismic CMS

Para configurar o Primic, acesse o site Prismic CMS, crie uma conta e siga os passos abaixo:

• Crie um repositório para a aplicação
• Acesse a sessão Custom Types e crie um novo tipo no estilo Repeatable Type e de o nome de post
• Na criação do tipo, coloque os campos: UID tendo um field name como UID
• Na criação do tipo, coloque os campos: Title Field tendo um field name como title e configuração h1
• Na criação do tipo, coloque os campos: Rich Text tendo um field name como content todas as configurações possíveis
• Salve o tipo e adicione alguns posts
• Na sessão settings entre em API & Security e escolha Private API – Require an access token for any request no campo API access em Repository security e clique em Change the API visibility
• Adicione um access token, crie no seu .env a variável PRISMIC_ACCESS_TOKEN e coloque como valor seu Permanent access token
• Crie a variável PRISMIC_ENTRYPOINT_URL e coloque como valor o link disponivel em API Endpoint

---

Lembre-se de rodar o Stripe CLI toda a vez que for iniciar a aplicação

Iniciando a aplicação

Instale as dependências utilizando

yarn

e rode o Ignews

yarn dev