https://github.com/underewarrr/template-vercel-serverless-fullstack
Template para criação rapida de um app fullstack com deploy configurado na vercel. Siga o readme para lançar seu projeto em segundos.
https://github.com/underewarrr/template-vercel-serverless-fullstack
axios high-order-component javascript jsonwebtoken nextjs react react-bootstrap-components react-router-v6 serverless-functions typescript
Last synced: about 2 months ago
JSON representation
Template para criação rapida de um app fullstack com deploy configurado na vercel. Siga o readme para lançar seu projeto em segundos.
- Host: GitHub
- URL: https://github.com/underewarrr/template-vercel-serverless-fullstack
- Owner: Underewarrr
- Created: 2023-06-14T19:05:08.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-06-29T15:51:52.000Z (over 2 years ago)
- Last Synced: 2025-06-21T00:03:25.462Z (8 months ago)
- Topics: axios, high-order-component, javascript, jsonwebtoken, nextjs, react, react-bootstrap-components, react-router-v6, serverless-functions, typescript
- Language: TypeScript
- Homepage: https://template-vercel-serverless-fullstack.vercel.app
- Size: 179 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
### Health Status
...
### Vercel
- As funções [Serverless](https://vercel.com/docs/concepts/functions/serverless-functions) permitem que os desenvolvedores escrevam funções em JavaScript e outras linguagens para lidar com autenticação de usuário, envios de formulários, consultas de banco de dados e muito mais.
- Logs nas funções Serverless.
### NextJS
- Seguindo o padrão da documentação da [vercel + nextjs](https://vercel.com/docs/frameworks/nextjs), você pode entender melhor sobre a organização das rotas da api ou paginas.
#### Front-end Routes :
##### OBS : Para as rotas e as requisições a pasta pages não será incluida a rota final sendo : /user/pagename.
`/pages/user/pagename`
- OBS: Observe que nesse exemplo teriamos um arquivo pagename.ts
- OBS: Se o nome do arquivo/pagina for index.ts então será carregado com o nome da pasta do arquivo exemplo :
`/pages/user/login`
- OBS: Observe que nesse caso teriamos um arquivo index.ts
#### Back-end Routes :
##### OBS : Para as rotas e as requisições a pasta pages não será incluida a rota final sendo : /api/user/pagename.
`/pages/api/user/pagename`
- OBS: Observe que nesse exemplo teriamos um arquivo pagename.ts
- OBS: Se o nome do arquivo/pagina for index.ts então será carregado com o nome da pasta do arquivo exemplo :
`/pages/api/user/login`
- OBS: Observe que nesse caso teriamos um arquivo index.ts
## Como rodar
OBS: Database ainda não configurada nesse repo.
### (Vercel-Pro-Way)
Fork o respositorio, entre no site da [vercel](https://vercel.com/) e importe o projeto, pronto agora é só esperar a vervel criar o dominio e colocar o app online!
### (Vercel-Config)
Após importar o projeto tudo feito, agora espere o build, enquanto isso podemos configurar nossas variaveis de ambiente direamente na vercel.
Infelizmente a vercel não importa diretamente do .env é necessario adicionar na interface do proprio website da vercel.
```
JWT_SECRET = JWT_SECRET
DB_USER =
DB_PASS =
DB_NAME =
DB_HOST = www.db4free.net
REACT_APP_API_PORT = 3000
```
### NodeConfig (NPM)
Lembre-se usando o ORM(squelize) é necessario antes rodar as migrations e seeders para popular a sua database.
com o comando `db:reset`
Para configurar o usuario do Sequelize utilize o .env.example do projeto.
## AuthSystem
O sistema de proteção de rotas funciona com uma hoc [(High Order Component)](https://github.com/Underewarrr/template-vercel-serverless-fullstack/blob/master/pages/hoc/withAuth.tsx), como esse component é recarregado apenas nas rotas que o usuario tem permissão então algumas verificações e dados podem ser salvos e usados nesse component quando necessario!
Para proteger uma rota inicie o component ``
#### OBS : Ainda esta faltando configurar corretamente o middleware do Jsonwebtoken.
####
# Ferramentas
## Front-End
### Frameworks
- React
- Bootstrap
### JustLibs
- jsonWebToken
- mdb-react-ui-kit
- axios
- react-dom
- swr NOT USED
## Back-End
### Frameworks
- NextJS
### JustLibs
- Sequelize
- Mysql2
### Languages
Typescript, Javascript
## Configuração de ORM (Database)
- [x] [User](https://github.com/Underewarrr/template-vercel-serverless-fullstack/blob/master/database/models/User.ts)
## Rotas Front-End
- /user
- /login
- /register
## Rotas Back-end
- /api
- /user
- /login
- /register