We recently released (public beta). We’re excited to help teams build amazing modern products together with new serverless solutions. Cosmic Functions In this short tutorial, I’m going to show you how to get up and running with the to send emails via SendGrid (to view more example functions login and go to ). SendGrid Email Function Your Bucket > Settings > Functions Deploying the Function 1. Install the function To install the SendGrid function, go to , find the SendGrid function, and click “Install Function”. Your Bucket > Settings > Functions 2. Add keys, and deploy After you install the function, you will be redirected to a page to add your AWS credentials and environment variables. Follow the steps to add your AWS creds (if you don’t have them handy). Go to your SendGrid account and find your API Secret Key located in (you may need to create a new one) and add this as the value to SENDGRID_API_KEY. Settings > API Keys Once you have your keys added, click “Deploy Function” and in a minute your function will be deployed and ready for requests. Code a Web Contact Form Next, let’s create a contact form to access the newly deployed endpoint. Follow these steps to install the : React Starter npm i -g cosmic-cli cosmic init react-starter cosmic develop Now go to your app codebase and go to the default page component located in pages/default.js and edit it to look like this: React Router bucket Page PageNotFound Header Footer Nav { getInitialProps({ req, query }) { slug = query.slug (!slug)
      slug = page { res = bucket.getObject({ slug })
      page = res.object
    } (e) {
      page = { : , : }
    } { page }
  }
  handleSubmit(e) {
    e.preventDefault() email = e.target.email.value first_name = e.target.first_name.value last_name = e.target.last_name.value url = data = { : , : email, : , : , : }
    fetch(url, { : , : .stringify(data), :{ : }
    }).then( res.json())
    .then( .log( , .stringify(response)))
    .catch( .error( , error));
  }
  render() { ( <Header page={ this.props.page }/>
        <div className="main">
          {this.props.page.component && this.props.page.component==='404' ? (
            <PageNotFound />
          ) : (
            <Page page={this.props.page} />
          )}
          <Nav />
          <form onSubmit={this.handleSubmit}>
            <div>
              <input type="email" name="email" placeholder="Email"/>
            </div>
            <div>
              <input type="text" name="first_name" placeholder="First Name"/>
            </div>
            <div>
              <input type="text" name="last_name" placeholder="Last Name"/>
            </div>
            <div>
              <button type="submit">Send Email</button>
            </div>
          </form>
        </div>
        <Footer />
      </div>
    );
  }
}

export default DefaultPage import from 'react' import from 'next/router' import from '../config' import from '../components/page' import from '../components/404' import from '../components/header' import from '../components/footer' import from '../components/nav' . class DefaultPage extends React Component static async let if 'home' let try const await catch title 'Page not found' component '404' return const const const var 'https://your-cosmic-function-endpoint-here.lambda.aws.com' // ADD YOUR ENDPOINT HERE var to 'your_email@gmail.com' // EDIT THIS TO YOUR EMAIL from subject `Contact form submission: ` ${first_name} ${last_name} text_body `Contact form submission: ` ${first_name} ${last_name} html_body `Contact form submission: <br /><b> </b><br /> ` ${first_name} ${last_name} ${email} method 'POST' body JSON headers 'Content-Type' 'application/json' => res => response console 'Success:' JSON => error console 'Error:' return < > div Notice a couple things here: 1. We’ve added a form element to take the input for email, first name, and last name. 2. We've added the handleSubmit method to handle the form submission which takes the values of the form and sends the data to our Cosmic Function endpoint. We’ve now got an endpoint that receives the data from our form and sends it to the SendGrid API for processing. And that’s it! Benefits Less Code We didn’t have to worry about building an API endpoint in our app to send the data to SendGrid. Less Config Hassles We don’t have to worry about config hassles like possibly leaking secret keys client-side. We don’t have to share API keys with anyone else, just the endpoint. Config is handled in the Cosmic Function as an Environment Variable. Reusable We can use this endpoint in any other app that needs to send an email. I hope you enjoyed this quick tour of the SendGrid Function, now ready for installation and deployment (go to ). Let me know if you have any questions or comments. and . Your Bucket > Settings > Functions Reach out to us on Twitter join our Slack community

Slack

Twitter

cosmic js

Read My Stories

Too Long; Didn't Read

Developers: Build Less. Deliver More. [Learn how]	

Sending Emails with the SendGrid Cosmic Function

Too Long; Didn't Read

Companies Mentioned

Tony Spiro

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Sending Emails with the SendGrid Cosmic Function

Too Long; Didn't Read

Companies Mentioned

Tony Spiro

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES