A different way to deploy a server

When we do a project, we usually like to deploy it, so if someone sees our profile, they can quickly see the project live. Without having to run on the machine, the point is that it is not always possible to find services that do this in a not so expensive way. After all, leaving an app active is expensive, and before long your app would be unavailable for viewing.

It was then that I thought of vercel.

Vercel is a hosting and deployment platform for web applications, mainly focused on the frontend.

Motivation

Manage to send a fullstack project for development. And manage to send the entire application in just one service, in this case vercel. In this article we will focus on how to deploy the backend.

In a frontend application using next js, there is a node. who is responsible for server-side rendering (SSR) and that allows implementations such as: routing, static and dynamic pre-render. We'll use this concept to accomplish our goal.

For example in Nextjs API directory:

• pages
  • api
    • hello.ts

export default function handler(res) {
   res.status(200).json({ name: 'John Doe' })
}

Accessing localhost/pages/api/hello will have "John doe" returned, so what if we could just send the server without any interface to vercel? This is possible thanks to the concept of serveless functions.

As expected, there are some limitations, including: The server is not always active (only when accessed, which can be a little slower), Native dependencies,reading from or writing to the filesystem

Starting

Create a vercel.json file and leave it in the root of the project. When you build your application vercel will detect this file and treat it as serveless.

{
  "version": 2,
  "builds": [
 {
  "src": "src/index.ts",
  "use": "@vercel/node"
 }
  ],
 "routes": [
{
 "src": "/(.*)",
 "dest": "src/index.ts"
}
 ],
}

"src": "src/index.ts" - It's where your main file that connects to the server is.
"src": "/(.*)" - Will make all routes available (example: localhost:4000/users?name='john doe')

To exemplify we have a simple application that registers and lists users using graphql:

• modules/
  • Users/

index.ts:

const uri = process.env.MONGODB_URI
const main = async () => {
await mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology: true })
};

const app = new Koa();
const router = new Router();

main()
.then(() => console.log('🎉 connected to database successfully'))
.catch(error => console.error(error));

const graphQLSettingsPerReq = async (_req, _res) => {

return{
graphiql: true,
schema,
pretty: true
}
}
const graphQlServer = graphqlHTTP(graphQLSettingsPerReq);
router.all('/graphql', graphQlServer);

app.use(cors({ credentials: true }));
app.use(bodyParser());
app.use(router.routes());
app.use(router.allowedMethods());

const server = http.createServer(app.callback());
server.listen(3000, () => {
console.log("server is running");
});

Initial setup should be enough, you can also use vercel cli

Common Mistakes

• If you use an ORM as a Prisma. Don't forget to put a 'migrate' command when deploying, as this process is not automatic.

• If you get an error like "Serverless function crashed". Add /_logs to your URL and track errors. As said, there are some limitations in this kind of approach, this link might be useful

In Conclusion

Deploying a simple application this way can be a great way to make it live for a long time. Someone who enters your under construction profile will be able to quickly get what you are up to. If your application scales, it's time to venture into the cloud world.

Deploy link: https://deploy-server-topaz.vercel.app/graphql
Repository: https://github.com/Thiago-Mota-Santos/deploy-server