How to send emails

Hi everyone. How I can send emails from a contact form? What should I use? Thanks

20 Replies

First of all there are several ways to do this. And this is nothing solidjs specific. Easiest way ist to have an action=mailto:“[email protected]“ But this leakes your email address to bots and you‘ll get lots of spam. I like to use nodemailer. But this requires that you have a server. Here’s a guide for it: https://www.w3schools.com/nodejs/nodejs_email.asp In solid you would create an action with the “use server“ directive so you don’t leak sensitive information like your password etc. Here’s the docs to actions: https://docs.solidjs.com/solid-router/reference/data-apis/action#action

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

Daniel Sousa @TutoDSOP•4mo ago

Already use nodemailer. Ok so I can use action to send the email using nodemailer?

Jasmin•4mo ago

And for the email service I can really recommend Amazon's Simple Email Service. It's basically free ($0.10/1000 emails). https://aws.amazon.com/ses/

Amazon Web Services, Inc.

Cloud Email Sending Service - Amazon Simple Email Service - AWS

Amazon Simple Email Service (SES) is a cost-effective, flexible, and scalable email service provider that allows developers to send email from within any application.

Jasmin•4mo ago

I haven't found anything that's cheaper and you can't get away free here if you want something legit (not abusing your personal gmail)

Daniel Sousa @TutoDSOP•4mo ago

Hi everyone I'm trying to create my action, like:

const sendEmail = action(async (data: FormData) => {
  await transporter.sendMail({
    from: env.email.email,
    subject: 'Formulário de contacto',
    text: 'Olá',
  });
  // throw redirect("/", { revalidate: getUser.keyFor(data.id) }); // throw a response to do a redirect
});

const sendEmail = action(async (data: FormData) => {
  await transporter.sendMail({
    from: env.email.email,
    subject: 'Formulário de contacto',
    text: 'Olá',
  });
  // throw redirect("/", { revalidate: getUser.keyFor(data.id) }); // throw a response to do a redirect
});

But my page stops rendering this way I build my form using tanstack forms Only renders the footer and the header when I remove this piece of code everything works I don't know whyh

Jasmin•4mo ago

@Daniel Sousa @TutoDS I can only speculate but maybe it stops rendering because you're accessing a private env variable on the client? You probably want to put this function behind a "use server" https://docs.solidjs.com/solid-start/reference/server/use-server#use-server because the client shouldn't be able to send mails as this would expose all your email credentials

Daniel Sousa @TutoDSOP•4mo ago

Can I call the action inside the tanstack form?

onSubmit: async ({ value }) => {
      await sendEmail(value);
    },

onSubmit: async ({ value }) => {
      await sendEmail(value);
    },

like this

Jasmin•4mo ago

I guess? try it

Daniel Sousa @TutoDSOP•4mo ago

isn't working

Daniel Sousa @TutoDSOP•4mo ago

Daniel Sousa @TutoDSOP•4mo ago

const submit = useAction(myAction); this way works only env vars aren't accessible I need to add VITE_ on all the env vars? inside the action the .env vars without VITE keep appearing as undefined

Madaxen86•4mo ago

https://docs.solidjs.com/configuration/environment-variables#environment-variables

Daniel Sousa @TutoDSOP•4mo ago

OK should be without VITE_ to avoid expose the SMTP password but that way inside the action the env var appears as undefined Any idea how I can solve it without exposing? Anyone?

Daniel Sousa @TutoDSOP•4mo ago

Hi everyone I think I solve the problem with the .env, but now I'm facing this error:

Daniel Sousa @TutoDSOP•4mo ago

Can anyone help me please? Solved 👍 One last question, any way to check if the email has sended with success? @Madaxen86 you are using something for the layouts?

Madaxen86•4mo ago

https://jsx.email/docs/

Daniel Sousa @TutoDSOP•4mo ago

I'm trying it, but I'm facing issues because it's for react, like Its return type ReactNode is not a valid JSX element.

Madaxen86•4mo ago

You can also try to use solids renderToString and render any solid component. just be aware that HTML for emails is very different from the web. You may not use flexbox/grid as it won't work on some mail clients correctly. There's also MJML . I've also used liquidjs in the past, but don't like it very much. It just depends how many mails and how complex their layouts is.

npm

mjml-solid

SolidJS component library to generate the HTML emails on the fly. Latest version: 1.0.1, last published: 6 months ago. Start using mjml-solid in your project by running npm i mjml-solid. There are no other projects in the npm registry using mjml-solid.

Daniel Sousa @TutoDSOP•4mo ago

For now, is only for contact form I like the jsx.email but is for react

Madaxen86•4mo ago

Well then you could just do a simple layout with a solid jsx component and use renderToString and pass that to the mail.

Gaming

Programming

How to send emails