/nui.com.mx

Landing page for Nui - Tecnologías Educativas

Primary LanguageVueMIT LicenseMIT

My company's webpage with a serverless function to mail the contact form

Netlify Status

A Nuxt.js static website with animations, transitions and a serverless Contact Form

Features

  • Nuxt.js Static Site Generation for easy hosting.
  • Netlify's lambda for Contact Form.
  • SendGrid mailing for Contact Form.
  • Netlify compilation on each commit, with automatic deployment to their CDN (once you finish all the steps).

Getting started

Check out this guide for a more thorough reading on Nuxt and Netlify, or jump straight ahead for more concise instructions.

What's needed

  • Github account
  • Netlify account
  • Vue/Nuxt understanding

Fork the repo

Using your Github account, go ahead and fork the repo or just clone it.

Get a SendGrid API Key

  • Go to Sign Up and create an account.
  • Then, go to the 'API Keys' page inside of 'Settings', and click 'Create API Key'.
  • Give your API key a name.
  • Select 'Restricted Access' and then choose the 'Mail Send' permission.
  • Click 'Create and View'.
  • Copy your API Key to .envexample and rename te file to .env.
    • This will let you do local testing.
    • Change the email that will receive the Contact Form info on MAIL_TO.
  • Go to the Netlify's project 'Setting' page.
  • Choose 'Build & deploy > Environment' and copy the API Key there as well.
    • This will let you work on production.

Build Setup

Install all the dependencies

npm i

Now, you can run the code in development with:

npm run dev

This will serve your page in localhost:3000 with hot reload. It will also run a netlify-lambda server with the function for local testing. It works through @nuxt/proxy that is configured on nuxt.config.js.

Once you're ready to generate your static assets for production:

npm run generate

This will create a /dist folder with the assets. This folder is not committed.
This is what Netlify will be building on their server, and then uploading the results to their CDN.

Customizing the site

  • Besides what was mentioned, it's just a regular Vue + Nuxt app.
  • The code is commented to try to assist anyone in modifying the views.
  • Configure Nuxt in: nuxt.config.js.
  • Check the Vue.js and Nuxt.js documentation.

I'm ready, now what?

If you run npm run dev and you like what you see, you're ready to deploy to Netlify!

Go to Netlify

  • Go to Netlify
  • Choose Github and authorize Netlify, if you haven't already
  • Choose this repo
  • Leave the settings as they are and click on Deploy Site

You're done!

Now, with every commit you do, Netlify will compile your site with npm run generate and deploy it on their CDN.

Issues

If you have any problems implementing this, please don't hesitate and create a Github Issue or send me a tweet.

Built with

Hosted in