nuxtjs支持api接口,serverMiddleware

2020-02-22 17:57:05

参考地址 Sending emails through Nuxt.js

Who can’t relate to this: You’ve built a small portfolio page for someone, maybe a company, a friend or yourself. And the only API endpoint you’d need is one for a form. What now? Scaffolding a new service just for this one endpoint?

Fear no more! It’s possible to send emails almost directly through Nuxt but only in SSR mode with a Node.js server running. No more additional API server necessary if you just want to send a mail with data coming from a contact form.

Before diving into the implementation and ideas behind it, here is the full source code I’m referring to through this blog post. It’s from my company’s website developmint.de.

The main goal was a simple API endpoint accessible through Nuxt.js to handle the three contact form fields (nameemail and message) and to send an email with the data if everything is alright.

 Let’s get it on - serverMiddleware

While developing the redirect-module for Nuxt, I came in touch with serverMiddleware. Those run before the actual vue-server-renderer and are usually used for handling static assets, forcing HTTPS or, in case of redirect-module, rewriting routes.

But as they are highly customizable and flexible, why not use them as endpoints instead?

This is possible. An example middleware could look like this:

export default (req, res) => {
    res.write('Hey!')
    res.end()}

When saved to app/test.js for example, you can then add it to your Nuxt config:

export default {
  // ...
  serverMiddleware: [
    { path: '/api/test', handler: '~/api/test' },
  ],
  // ...}

If you rebuild your project in dev mode (yarn run dev) and visit /api/test, you can see Hey! as the page content. Great!

So we can use server middleware to serve content… But there must be a drawback, right?

Right (one could think…)

As Nuxt uses connect as middleware layer (to reduce overhead as it suffices the complexity needed), we are missing some “critical” features in comparison to express.

Besides typical convenience features and routing (which isn’t even mandatory in our case), we can’t get the passed parameters from our req object at the moment. Without those, there is no content for our contact form mail. So what now?

We could use the body-parser package and apply it to the route before we use our custom middleware but then we’d face more “problems” like decoding JSON or setting headers “correctly” sooner or later. Likely it would work from a certain point on but there must be a better way. If we could just use express

 Express in Nuxt.js?

Possibly you have heard it the other way: An express app with Nuxt.js as renderer (like in express-template).

But did you know that you can use express inside a serverMiddleware?

import express from 'express'const app = express()app.post('/', (req, res) => {
    // Validate, sanitize and send})export default {
  path: '/api/contact',
  handler: app}

We declare the express app as the middleware handler and Nuxt is magically gluing everything together.

Now we can save this short snippet under api/contact.js and register our custom server middleware only as path string (because path and handler are inside).

export default {
  // ...
  serverMiddleware: [
    '~/api/contact'
  ],
  // ...}

 Still missing: the mailer!

The last coding part might be less spectacular for everybody who already set up nodemailer in an express app.

Fun fact: Before this implementation I did not as I mostly write backends in Laravel (♥️).

 Inserting the body-parser

Since version 4.16.0, express has its own JSON middleware based on body-parser. To get our JSON parameters out of the POST body, we will need it:

import express from 'express'import nodemailer from 'nodemailer'const app = express()app.use(express.json())// ...

 Validate and sanitize

Now we can get back to our post route. You may wonder why it’s declared as / instead of /api/contact. That’s because our express app’s base route is /api/contact (set through the path export).

import express from 'express'import validator from 'validator'import xssFilters from 'xss-filters'const app = express()app.use(express.json())app.post('/', (req, res) => {
  const attributes = ['name', 'email', 'msg'] // Our three form fields, all required

  // Map each attribute name to the validated and sanitized equivalent (false if validation failed)
  const sanitizedAttributes = attributes.map(n => validateAndSanitize(n, req.body[n]))

  // True if some of the attributes new values are false -> validation failed
  const someInvalid = sanitizedAttributes.some(r => !r)

  if (someInvalid) {
    // Throw a 422 with a neat error message if validation failed
    return res.status(422).json({ 'error': 'Ugh.. That looks unprocessable!' })
  }

  // Upcoming here: sending the mail})

Let’s take a look at the validateAndSanitize function. It could be replaced with another express middleware or plugin but why not writing our own this time:

const rejectFunctions = new Map([
  [ 'name', v => v.length < 4 ],
  [ 'email', v => !validator.isEmail(v) ],
  [ 'msg', v => v.length < 25 ]])const validateAndSanitize = (key, value) => {
  // If map has key and function returns false, return sanitized input. Else, return false
  return rejectFunctions.has(key) && !rejectFunctions.get(key)(value) && xssFilters.inHTMLData(value)}

Each possible attribute receives a rejectFunction that defines in which case the validation will fail. If the function returns false, the validation passed. It looks weird first but I like the reversed approach here because we can avoid a cascade of ifs.

 Send it out

After validating and sanitizing, we are confident that we can send the mail out!



 















import express from 'express'import nodemailer from 'nodemailer'import validator from 'validator'import xssFilters from 'xss-filters'// ...app.post('/', (req, res) => {
  // ...

  if (someInvalid) {
    return res.status(422).json({ 'error': 'Ugh.. That looks unprocessable!' })
  }

  sendMail(...sanitizedAttributes)
  res.status(200).json({ 'message': 'OH YEAH' })})

We use the ES6 spread syntax to pass the sanitized values to the sendMail function:

const sendMail = (name, email, msg) => {
  const transporter = nodemailer.createTransport({
    sendmail: true,
    newline: 'unix',
    path: '/usr/sbin/sendmail'
  })
  transporter.sendMail({
    from: email,
    to: 'support@developmint.de',
    subject: 'New contact form message',
    text: msg  })}

Inside we create a nodemailer transporter and send the email out. We could do this through SMTP, other providers (eg. SES) or (classically) through sendmail as I did. If you want to know more about the setup of nodemailer, here you go.

 Finally we can send emails - A conclusion

So, we did it! If we now send a POST request (eg with axios) through our form, the email will be sent.

Was it worth it? - Definitely! Instead of blocking another port for such a simple API, we can run it together with our Nuxt server (in SSR mode).

Should I adapt my whole API to leverage Nuxt server middleware now? - You could do this, but I would rather not recommend it, as pointed out in a recent article. It’s a great solution for simple and small APIs, but as soon as complexity or the request count increases, better go with own API servers (not only because of performance, also because of better scalability and no “single point of failure”).

 Closing remarks

I hope you enjoyed the article! If so it’d be cool if you could spread the word ☺️

Questions left? Critics? Hit me up on Twitter (@TheAlexLichter) or write me a mail (blog at lichter dot io). I’m curious to hear from you!


  • 2020-12-14 15:06:50

    youtube-dl视频下载神器

    youtube-dl 是一款命令行下的视频下载工具,看着名称像是 YouTube 下载工具,其实这款工具不仅支持 YouTube ,还支持非常多的视频网站,比如优酷、爱奇艺、 bilibili 等,在写这篇日志的时候,暂时不支持腾讯视频。

  • 2020-12-15 20:06:43

    更多WebTorrent例子

    WebTorrent是第一个运行在浏览器的Torrent客户端。是的,没错。就是浏览器! 它完全是用JavaScript编写的,并使用WebRTC实现了真正的点对点传输。不需要浏览器插件、扩展或安装。 使用开放的Web标准,WebTorrent将网站用户连接在一起,形成一个分布式的、分散的Browser-to-browser网络,以实现高效的文件传输。

  • 2020-12-16 06:43:06

    WebRTC 实现Android点到点互连(含Demo)

    WebRTC被誉为是web长期开源开发的一个新启元,是近年来web开发的最重要创新。WebRTC允许Web开发者在其web应用中添加视频聊天或者点对点数据传输,不需要复杂的代码或者昂贵的配置。目前支持Chrome、Firefox和Opera,后续会支持更多的浏览器,它有能力达到数十亿的设备。

  • 2020-12-16 22:04:03

    基于本地代理的边下边播技术分析

    我们熟知的边下边播技术,是迅雷提供的,还有之前的快播、快车等工具,它们使用的技术基本上都是P2P下载技术。 P2P下载技术,本质上它并不是C-S的架构,P2P----> Peer to Peer,实际上它将各个客户端的资源调度起来,给上传资源种子,方便后续的下载者可以快速有效的下载资源,这种方式需要服务器整合各个Client,在有用户需要下载的情况下,服务器能及时调度资源,开始给下载者提供资源信息,保证下载者下载资源越快越好。P2P的下载方式后面我们专门介绍一下。这儿不继续展开了。

  • 2020-12-16 22:07:44

    Android视频点播-边播边缓存

    一些知名的视频app客户端(优酷,爱奇艺)播放视频的时候都有一些缓存进度(二级进度缓存),qq,微信有关的小视频,还有一些短视频app,都有边播边缓的处理。还有就是当文件缓存完毕了再次播放的话就不再请求网络了直接播放本地文件了。既节省了流程又提高了加载速度。 今天我们就是来研究讨论实现这个边播边缓存的框架,因为它不和任何的业务逻辑耦合。

  • 2020-12-16 22:46:44

    基于coturn项目的stun/turn服务器搭建

    webrtc是google推出的基于浏览器的实时语音-视频通讯架构。其典型的应用场景为:浏览器之间端到端(p2p)实时视频对话,但由于网络环境的复杂性(比如:路由器/交换机/防火墙等),浏览器与浏览器很多时候无法建立p2p连接,只能通过公网上的中继服务器(也就是所谓的turn服务器)中转。示例图如下:

  • 2020-12-16 23:06:05

    Rocket.Chat推送信息

    Rocket.Chat推送消息 Rocket.Chat是一个开源实时通讯平台, 支持Windows, Mac OS, Linux. 支持聊天, 文件上传, 视频通话, 语音通话功能. 向Rocket.Chat推送消息 以下示例可以转为别的语言的版本, 本示例使用Linux平台的curl测试, curl非常强大. 登陆 首先需要登陆Rocket.Chat服务器