i18next-fs-backend VS MJML

Compare i18next-fs-backend vs MJML and see what are their differences.

i18next-fs-backend

i18next-fs-backend is a backend layer for i18next using in Node.js and for Deno to load translations from the filesystem. (by i18next)

MJML

MJML: the only framework that makes responsive-email easy (by mjmlio)
Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • talent.io - Download talent.io’s Tech Salary Report
  • SonarQube - Static code analysis for 29 languages.
  • Scout APM - Less time debugging, more time building
i18next-fs-backend MJML
2 74
58 14,331
- 2.5%
4.8 7.4
about 2 months ago 15 days ago
JavaScript JavaScript
MIT License MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

i18next-fs-backend

Posts with mentions or reviews of i18next-fs-backend. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-01-28.

MJML

Posts with mentions or reviews of MJML. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-09-20.
  • Sending Emails with ReactJS
    3 projects | dev.to | 20 Sep 2022
    import React from 'react'; export default class extends React.Component { constructor(props) { super(props); this.state = { feedback: '', name: 'Name', email: '[email protected]' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } render() { return ( Let's see if it works ) } handleChange(event) { this.setState({feedback: event.target.value}) } handleSubmit() { } }
    Enter fullscreen mode Exit fullscreen mode

    Now we need to add a handleSubmit() function to our component to call sendFeedback() function that will, as a result, trigger email sending via EmailJS. To keep it simple, we’ll use the default emailjs.send function.

    handleSubmit (event) {
        const templateId = 'template_id';
        this.sendFeedback(templateId, {message_html: this.state.feedback, from_name: this.state.name, reply_to: this.state.email})
      }
      sendFeedback (templateId, variables) {
        window.emailjs.send(
        'gmail', templateId,
        variables
        ).then(res => {
            console.log('Email successfully sent!')
        })
        // Handle errors here however you like, or use a React error boundary
        .catch(err => console.error('Oh well, you failed. Here some thoughts on the error that occured:', err))
      }
    
    Enter fullscreen mode Exit fullscreen mode

    Replace the function parameters with your own and test if everything went smoothly in the EmailJS dashboard.

    Don’t forget to import and use your Form component from the main component of your application which is located at src/App.js.

    Image description

    That’s all! Went pretty smoothly, huh?

    Setting up an Express backend and connecting 3rd parties

    If EmailJS won’t work for your use case, there’s an option to set up your own backend quickly and connect the 3rd party tool for email sending. As mentioned in the beginning of this article, ReactJS itself doesn’t have sending capabilities.

    The set up is very easy. This guide takes you step by step through the steps required to quickly build an Express Node.js backend.

    Once you have the backend, it’s time to connect a service specializing in sending emails. Follow this example to see how Mailjet can be implemented with your Express backend. Of course, many other tools such as SendGrid, Sendinblue or Mandrill can be implemented too thanks to their APIs. Please refer to their documentation for more details.

    As you can see, this approach is fairly quick to set up and will do its job for basic things, such as most contact forms. Since emails sent this way land usually in your inboxes, you don’t care much about formatting and styles. If the email workflow you just added is meant for the user’s inbox (for example, a newsletter confirmation form), you probably want to beautify the message a little bit. Let’s talk about how to do it.

    Building an HTML template in ReactJS

    As you know, ReactJS projects are built using reusable components, pieces of UI that can be grouped with one another and placed around web pages with almost no effort. To no surprise, building an email template in React works in exactly the same fashion.

    If you’ve ever tried to build and deliver emails with any framework, you know how painful it can be. What looks great on your testing environment, might render as a completely random set of styles and copy on users’ devices. Many browsers recognize tags but others will omit them. Others work with inline styles but, again – not all of them. As a result, even if you test your emails inside out, possibly something is bound to go wrong.

    One tool that aims to prevent such troubles is Mjml. It’s a markup language that makes it easy to generate fully-responsive HTML templates. It comes with a large set of frequently used components that can be inserted in your mailings without coding them from scratch.

    Another really useful tool you can use is React-html-email. It’s used to quickly build reusable components of your choice. You insert your code sample, however long it is, and immediately get a single-line code component you can use throughout the project. See the example below:

    import React from 'react';
    import { Email, Item, A} from 'react-html-email';
    export default function InlineLink({name, children}) {
      return (
      
        
           Hello {name}
           Click me!
        
        
          {children}
        
      
    )};
    
    Enter fullscreen mode Exit fullscreen mode

    Add the code from above to a file in your client project to src directory and call it Email.js. Don’t forget to add react-html-email component to your project. Then import this component to client/src/Form.js and renderEmail from react-html-email to client/src/Form.js.

    import MyEmail from './Email'
    import { renderEmail } from 'react-html-email'
    
    Enter fullscreen mode Exit fullscreen mode

    After that you can use the following line to generate HTML code of your message:

    const messageHtml =  renderEmail(); // HTML code
    
    Enter fullscreen mode Exit fullscreen mode

    React-html-email comes with an email validator that immediately checks and informs you if there were any errors in the component’s code.

    There’s also a really interesting WYSIWYG email editor for React with drag & drop features, aptly known as React Email Editor. Check it out and see if it can accelerate your development.

    Finally, whether you use these tools or not, there’s a bunch of tips to take into consideration when trying to build a responsive email template. This article makes for a fairly compelling source.

    Sending emails with Nodemailer

    Now, let’s assume we want to use Nodemailer to build a backend for our React email client. It’s perfectly doable and not so hard to set up.

    Nodemailer is a go-to module for anyone needing to send emails with Node.js framework. If you followed the example above, you should have already both Create-React-App and Express server set up. If you don’t, do it before we start as we’ll be using both.

    In this example, we’ll refer to a web form you could add to your website, for example, to let customers reach out quickly to your sales and support teams. Start off with building the UI of such form in ReactJS. Need some inspiration? Check out this list of 45 ready-to-implement React forms.

    Now, add the code to handle the form submissions. There are tons of parameters that can be used with Nodemailer, review them here and add according to your needs. Here’s an example:

    handleSubmit(event){
    const messageHtml =  renderEmail(
       {this.state.feedback}
    );
            axios({
                method: "POST",
                url:"http://localhost:3000/send",
                data: {
            name: this.state.name,
            email: this.state.email,
            messageHtml: messageHtml
                }
            }).then((response)=>{
                if (response.data.msg === 'success'){
                    alert("Email sent, awesome!");
                    this.resetForm()
                }else if(response.data.msg === 'fail'){
                    alert("Oops, something went wrong. Try again")
                }
            })
        }
    
    Enter fullscreen mode Exit fullscreen mode

    Add axios to your client application. In express_react_example/client run:

    npm install axios --save
    
    Enter fullscreen mode Exit fullscreen mode

    And add the import to the

    express_react_example/client/Form.js:

    import axios from ‘axios’;
    
    Enter fullscreen mode Exit fullscreen mode

    Make sure you reset the form once a message is submitted, in case a user wants to send another one.

    resetForm(){
            this.setState({feedback: ''});
        }
    
    Enter fullscreen mode Exit fullscreen mode

    Now, it’s about time we add Nodemailer to our project (the backend part):

    npm install nodemailer --save
    
    Enter fullscreen mode Exit fullscreen mode

    and create a config file to store the credentials of an account we’re going to use. We’re adding it to the backend so there are no security concerns this time. Put this file next to your server source code and call it config.js.

    module.exports = {
        USER: 'YOUR_EMAIL_ADDRESS',
        PASS: 'PASSWORD_FOR_EMAIL'
    }
    
    Enter fullscreen mode Exit fullscreen mode

    Then, we’ll want to set up the transporter to deliver our messages. Nodemailer can be used with different types of transporters. We recommend the default one, referred to as SMTP transporter, due to the simplicity of installation and its reliability. If you’re not happy with it, you can also integrate other transporters with your Nodemailer campaign. We’ll stick with the default one here.

    First of all, we need to share our credentials with the SMTP transporter. Add the following code to your server source code which should be called server.js if you followed the Express.js setup instructions:

    const nodemailer = require('nodemailer');
    const creds = require('./config');
    var transport = {
      host: 'your_host_here', // e.g. smtp.gmail.com
      auth: {
        user: creds.USER,
        pass: creds.PASS
      }
    }
    var transporter = nodemailer.createTransport(transport)
    transporter.verify((error, success) => {
      if (error) {
        console.log(error);
      } else {
        console.log('All works fine, congratz!');
      }
    });
    
    Enter fullscreen mode Exit fullscreen mode

    Once done, we set up the post route to take our emails to its final destination – our inbox!

    app.use(express.json()); app.post('/send', (req, res, next) => {
      const name = req.body.name
      const email = req.body.email
      const message = req.body.messageHtml
      var mail = {
        from: name,
        to: 'RECEIVING_EMAIL_ADDRESS_GOES_HERE',
        subject: 'Contact form request',
        html: message
      }
      transporter.sendMail(mail, (err, data) => {
        if (err) {
          res.json({
            msg: 'fail'
          })
        } else {
          res.json({
            msg: 'success'
          })
        }
      })
    })
    
    Enter fullscreen mode Exit fullscreen mode

    Now run the backend by running the following command in the root of your application:

    node server.js
    
    Enter fullscreen mode Exit fullscreen mode

    And run the frontend part too by running the command at the client directory:

    npm start
    
    Enter fullscreen mode Exit fullscreen mode

    All done! You should receive an email, the form will reset and a user should see the confirmation you added in your React project.

    Image description


    Summary
    We’ve tried to summarize various methods that can be used to send emails in ReactJS. Given how powerful and useful React is for nearly all kinds of projects, you don’t want to get stuck on something as simple as form submission. By all means, try them all and see which fits best for your project. Best of luck!

    I hope you enjoyed our tutorial on how to send emails with attachments via ReactJS that was originally published on Mailtrap Blog.

  • Win $500 in total in a .NET performance contest
    4 projects | reddit.com/r/csharp | 27 Aug 2022
    we created a port of MJML for .NET (https://github.com/SebastianStehle/mjml-net). MJML is rendering engine for responsive HTML emails, developed in NodeJS: https://github.com/mjmlio/mjml
  • Email Doesn't Suck. It's Email Clients That Need Improving
    3 projects | news.ycombinator.com | 24 Aug 2022
    I will say that it sucks just as a much from the developer front. I had to build some email templates for a project a few weeks ago and I was shocked how wired it was compared to regular webdev.

    Using a framework is almost a requirement if you don't want to spend all your time on little differences between email clients. The layout is really wired too, with the recommendation to use a ton of nested tables. Not to mention wired bugs like Apple Mail not rendering a background unless you have an image on the page.

    The best solution I've found thus far is to use MJML React [1]. This sorta normalizes things and lets you write normal react code that gets transpiled into some abomination that Outlook can read. But it sucks that the only two options that are actually worth a damn seem to be MJML[2] and Foundation[3]. If anyone has had good experiences with other frameworks I'm very much open to suggestions.

    [1]: https://github.com/wix-incubator/mjml-react

    [2]: https://mjml.io/

    [3]: https://get.foundation/emails.html

  • Is it possible to use modern HTML/CSS when targeting e-mail clients?
    2 projects | reddit.com/r/node | 5 Jul 2022
  • How to make this email template with css? no assets are given and should be done with bootstrap
    2 projects | reddit.com/r/css | 4 Jul 2022
    This tool might help with simplifying the process of building a responsive email. You will have to make some design elements tho https://mjml.io/
  • Not working pseudo-classes in emails
    2 projects | reddit.com/r/webdev | 9 Jun 2022
    CSS support in email is really really poor. Take a look at CanIEmail, it's the email version of CanIUse. There's also some email specific frameworks that assist in this, like MJML: https://mjml.io/
    2 projects | reddit.com/r/webdev | 9 Jun 2022
  • Need a WYSIWYG HTML editor
    2 projects | reddit.com/r/reactjs | 9 May 2022
    Three or four years ago I had a similar idea under the frustration of building newsletter by hand (and some simple automations) and I have created a few proof-of-concepts tests. Long story short, I resorted to generate text string at the frontend and generate the actual email html using mjml, https://mjml.io/. Saved me a lot of headaches.
  • How I Build and Deliver B2B SaaS Software as a 1.5* Person Indie Developer
    12 projects | dev.to | 19 Apr 2022
    On the client, Assetbots is written in TypeScript using React. Like the server, the client is a monorepo using Yarn workspaces and contains the code for all of the web applications produced by the Visual Studio solution, as well as some additional services like MJML email templating.
  • Google is still using this deprecated center tag
    3 projects | reddit.com/r/webdev | 10 Apr 2022

What are some alternatives?

When comparing i18next-fs-backend and MJML you can also consider the following projects:

Nodemailer - ✉️ Send e-mails with Node.JS – easy as cake!

mjml-react - React component library to generate the HTML emails on the fly

email-templates - Create, preview (in the browser and in the iOS Simulator), and send custom email templates for Node.js. Highly configurable and supports automatic inline CSS, stylesheets, embedded images and fonts, and much more! Made for @forwardemail and @ladjs.

i18next - i18next: learn once - translate everywhere

responsive-html-email-template - A free simple responsive HTML email template

aws-lambda-ses-forwarder - Serverless email forwarding using AWS Lambda and SES

react-i18next - Internationalization for react done right. Using the i18next i18n ecosystem.

emailjs - html emails and attachments to any smtp server with nodejs

react-html-email - Create elegant HTML email templates using React.

aws-lambda-fastify - Insipired by aws-serverless-express to work with Fastify with inject functionality.

i18next-http-middleware - i18next-http-middleware is a middleware to be used with Node.js web frameworks like express or Fastify and also for Deno.

next-i18next - The easiest way to translate your NextJs apps.