DEV Community

Tallan Groberg for ITNEXT

Posted on • Updated on

Setting up a news letter with React and mailchimp

In this tutorial, we are going to leverage mailchimp’s API to set up a sign up for a news letter.

If you follow any of my other tutorials, you will find this one to be my easiest yet. This is because mailchimp is designed for Marketers, not developers. Because of that fact, it is extremely friendly to set up.

Who is this tutorial for?

Everyone that is trying to set up a mailing list within a react application.

What does this tutorial teach?

We strive for simplicity, so to make sure that this tutorial isn't wasting anyone's time. Visit this site to see exactly what it does and sign up for my news-letter

Prerequisites

  1. create-react-app installed globally

  2. mail chimp account

  3. basic knowledge of react and javascript.

  4. npm installed globally so that we can install packages.

First thing we need to do is make a new react app. we can do this on the command line.

This is what it looks like on mac.

create-react-app news-letter
Enter fullscreen mode Exit fullscreen mode

cd into that folder and open it with the text editor of your choice. i will be using vs code.

In the src folder, open the App.js and delete the react boiler plate. inside the return statement.

return (
    <div>
      //blank
    </div>
  );
Enter fullscreen mode Exit fullscreen mode

Now that we have a blank canvas to work with,

Let's install a few packages.

npm i dotenv react-mailchimp-subscribe
Enter fullscreen mode Exit fullscreen mode

dotenv is for environment wide variables, so that you don't push your mailchimp url to git hub.

react-mailchimp-subscribe

This is so that we can use mailchimp's subscribe component to capture emails for us.

Next, if you are using vs code, right-click the src folder to make a .env file to keep our url private.

Alt Text

Alt Text

In the .env file, lets add the environment wide variable for our url.

These variables have to start with REACT_APP in screaming snake case in order to work.

REACT_APP_MAILCHIMP_URL='url goes here'
Enter fullscreen mode Exit fullscreen mode

Now lets add mailchimp subscribe to the App.js

Used almost all from the docs.

import "react-mailchimp-subscribe" in the App.js at the top.

import MailchimpSubscribe from "react-mailchimp-subscribe"
Enter fullscreen mode Exit fullscreen mode

Now add the mailchimp component.

Subscribe
<MailchimpSubscribe url={process.env.REACT_APP_MAILCHIMP_URL} />
Enter fullscreen mode Exit fullscreen mode

We need our url, to do this, go to mailchimps site.

You will have to make an account and this can be a long process.

Once everything is set up and you have a mailchimp dashboard, we can finish the tutorial.

Now that you have a mailchimp dashboard, we should make our first email.

Click the create-button in the top right corner.

Alt Text

At the bottom click on the signup form.

Alt Text

click begin.

Alt Text

we have to find the action url in the copy and paste for the embedded form.

press cmd + f or on windows crl + f and type action into the field.

Alt Text

In the mess of HTML elements is the action url on the form, copy everything inside the quotations.

Alt Text

Go back to the .env file and paste the action url in the quotations for the variable.

REACT_APP_MAILCHIMP_URL='https://https://codeharp.us19.list-manage.com/subscribe/post?u=ca'sdo;dea'sdfha;lkajsd;lfkajs;dlfkja;slkfja;lj;'
Enter fullscreen mode Exit fullscreen mode

Now when you enter an email into your input field in your react app. It will add that email to your email list.

Be sure to restart your server and put the .env file in the root of your directory and not the src folder.

finished website

I hope you found this helpful.

This was really hard to slowly poke around and figure out but now that it is in this tutorial, It should save you a lot of time!

Please Like and follow if you found this helpful.

Comment if you have questions or feed back.

May you have Happy dev days ahead!!

Discussion (12)

Collapse
jnvee profile image
Jahnavi Jainwal

hello I wanted to ask that since this is the mailchimp component
Subscribe
,
Do I directly put this in app.js? And if I do then I red squiggly lines under the code, so what is " Subscribe" exactly like just a piece of text, a message? i tried putting a semicolon after it and it resolves the squiggly lines issue but its still an error

Collapse
tallangroberg profile image
Tallan Groberg Author

Sorry for the late response,

Where I wrote subscribe is intended to be seen as text to the user saying indicating what the box is for.

Best practice is to put this in an HTML tag.

This was an oversight on my part because it didn’t cause my machine to crash.

Collapse
cgobbet profile image
Cassiano Gobbet

Tallan, thanks for the tutorial. I created a separated component, but I still have a problem: the component does not find the URL on the .env file, it says it's undefined. Does .env must have only REACT_APP_MAILCHIMP_URL='Mailchimp_URL' and nothing else?

Collapse
tallangroberg profile image
Tallan Groberg Author

So you can have more than one environment variable. A good way to trouble shoot this would be to see if you could console log the process.env. REACT_APP_MAILCHIMP_URL If you think other things in your .env could be causing problems, my suggestion would be to take out everything that wasn’t an env variable in the file. No commas or semi colons etc.

I hope this helps

Collapse
raphaelpinel profile image
Raphaël Pinel

You need to put the .env file in the root folder, not in src and restart your server. Also the dotenv package is not needed anymore, it should work out of the box.
The .env file can contain multiple variables

Collapse
tobitech profile image
Tobi Omotayo • Edited on

How do I style the form?

Collapse
tallangroberg profile image
Tallan Groberg Author

I hope I’m not to late to answer your question.

This is an nmp package that gives you a little more control over the form But does the same subscription functionality.

npmjs.com/package/react-mailchimp-...

React-mail-chimp-form is more declarative meaning you have to write more code but you can style it and get more Info from your users.

I didn’t use it in my tutorial Because I try and show examples that are as simple as possible but you could replace what you did in this tutorial with the new npm package very easily by following what is in the link at the top.

Collapse
nerdicaveman profile image
Inioluwa Sogelola

I believe reactmailchimpsubscribe has a render prop where you can pass a function that returns a jsx Element. The function accepts 3 arguments, I can't remember all of them but it's in the doc.

Collapse
raphaelpinel profile image
Raphaël Pinel

From what I read, you don't need dotenv anymore with create-react-app. It is supported out of the box
Create your .env file in the root folder, not in src.
And be sure to restart your server.
Source: stackoverflow.com/questions/491081...

I also noticed that react-mailchimp-subscribe 2.1.1 was not yet supporting React 17, and I had to install it with npm i react-mailchimp-subscribe --force

Collapse
tanishadalwadi profile image
Tanisha Dalwadi • Edited on

Hello, Where can I find the source code of your tutorial. I have set up the mailchimp but I want to take a look at the whole thing. Because when I hit the subscribe button it just reloads the whole page. I do not know where I am wrong as it does not give any errors...
Please let me know thank you

Collapse
cordial profile image
cordial

I'm getting a CORS error is i try this in a next.js react app. does react-mailchimp-subscribe actually work in next.js?

Collapse
saiafonua profile image
Saia Fonua

I'd like to figure out how I can send email newletters like how smore.com/ does it.