yveshema/contact-form.js

## contact-form.js
class ContactForm extends React.Component {
   handleSubmit = (e) => {
    e.preventDefault();
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;
    axios({
      method: "POST",
      url: "/send",
      data: {
	email: email,
	message:message
      }
    }).then((response) => {
      if ( response.data.msg === 'success' ){
	this.displayFeedback(true);
	this.resetForm()
      } else if ( response.data.msg === 'fail' ){
	this.displayFeedback(false);
	console.log('Message failed to send.')
      }
    })
  };

  displayFeedback = (value) => {
    let feedbackWrapper = document.getElementById('form-feedback');
    let feedback = '';

    if (value) {
      feedback = 'Thank you for your message!';
      feedbackWrapper.classList.add('form-success');
    } else {
      feedback = 'Oops! Looks like something went wrong. Please try again later.';
      feedbackWrapper.classList.add('form-error');
    }

    feedbackWrapper.innerHTML = feedback;
  }

  resetForm = () => document.getElementById( 'contact-form' ).reset();

  render(){
    return (
      <form id="contact-form" onSubmit={ this.handleSubmit } method="POST">
	<div id="form-feedback"></div>
	<div className="input-field">
	  <i className="material-icons prefix">email</i>
	  <input type="email" id="email" required />
	  <label htmlFor="email">Your Email</label>
	</div>
	<div className="input-field">
	  <i className="material-icons prefix">message</i>
	  <textarea name="message" id="message"
		    className="materialize-textarea" required></textarea>
	  <label htmlFor="message">Your message</label>
	</div>
	<div className="input-field center">
	  <button className="btn">Submit</button>
	</div>
      </form>
    )
  }
}

ReactDOM.render(<ContactForm />,
		document.getElementById('contact-root'));

## docker-compose.dev.yml
version: "3"

services:
  app:
    image: node:12-alpine
    user: "node"
    working_dir: /home/node/app
    environment:
       VIRTUAL_HOST: app.localhost
       NODE_ENV: production
    volumes:
      - ./site:/home/node/app
    expose:
      - "3000"
    restart: always
    command: "npm start"
    container_name: myapp

networks:
  default:
    external:
      name: nginx-proxy

## docker-compose.yml
version: "3"

services:
  app:
    image: node:12-alpine
    user: "node"
    working_dir: /home/node/app
    environment:
       VIRTUAL_HOST: your_valid_domain
       LETSENCRYPT_HOST: your_valid_host
       LETSENCRYPT_EMAIL: your_valid_email_address
       NODE_ENV: production
    volumes:
      - ./site:/home/node/app
    expose:
      - "3000"
    restart: always
    command: "npm start"
    container_name: myapp

networks:
  default:
    external:
      name: nginx-proxy

## index.html
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <link href="css/styles.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
      <header>
	<h1>My Awesome Website</h1>
      </header>

      <!-- contact form -->
      <section>
	<div>
	  <p>
            Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa, eget egestas purus viverra accumsan in nisl nisi, scelerisque eu ultrices. In vitae turpis massa sed elementum tempus egestas sed sed risus!
	  </p>
	</div>
        <div  id="contact-root"></div>
      </section>

      <!-- footer -->
      <footer >
        <p>Mauris, cursus mattis molestie a, iaculis at erat pellentesque. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius duis at consectetur lorem donec!</p>
          <p>&copy;2019. All rights reserved.</p>
      </footer>

      <!-- Compiled and minified ReactJS-->
      <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
      <!--Axios library-->
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

      <script src="js/contact-form.js"></script>
    </body>
    </html>

## server.js
const nodemailer = require('nodemailer');
const express = require('express');
const bodyParser = require('body-parser');

const creds = require('./config');

const  app = express();

app.use(bodyParser.json());

app.use(express.static('assets'));

const port = 3000;
app.listen(port, function() {
    console.log('Server listening on port ' + port)
});

//Configure nodemailer transport
const transport = {
    host: creds.HOST,
    port: 465,
    secure: true,
    auth: {
	user: creds.USER,
	pass: creds.PASS
    }
}

const transporter = nodemailer.createTransport(transport);

//Check that all is well with the mailer
transporter.verify((error,success) => {
    if (error) {
	console.log(error);
    } else {
	console.log('Server is ready to take messages');
    }
});

//Handle the contact form data
app.post('/send', (req,res) => {
    let email = req.body.email;
    let message = req.body.message;
    let content = `email: ${ email } \n message: ${ message } `;

    let mail = {
	from: creds.USER,
	to: creds.RECIPIENT,
	subject: 'New Message from Contact Form',
	text: content
    }

    transporter.sendMail(mail, (err,data) => {
	if ( err ) {
	    console.log(err);
	    res.json({
		msg: 'fail'
	    });
	} else {
	    res.json({
		msg: 'success'
	    });
	}
    });
});
	class ContactForm extends React.Component {
	handleSubmit = (e) => {
	e.preventDefault();
	const email = document.getElementById('email').value;
	const message = document.getElementById('message').value;
	axios({
	method: "POST",
	url: "/send",
	data: {
	email: email,
	message:message
	}
	}).then((response) => {
	if ( response.data.msg === 'success' ){
	this.displayFeedback(true);
	this.resetForm()
	} else if ( response.data.msg === 'fail' ){
	this.displayFeedback(false);
	console.log('Message failed to send.')
	}
	})
	};

	displayFeedback = (value) => {
	let feedbackWrapper = document.getElementById('form-feedback');
	let feedback = '';

	if (value) {
	feedback = 'Thank you for your message!';
	feedbackWrapper.classList.add('form-success');
	} else {
	feedback = 'Oops! Looks like something went wrong. Please try again later.';
	feedbackWrapper.classList.add('form-error');
	}

	feedbackWrapper.innerHTML = feedback;
	}

	resetForm = () => document.getElementById( 'contact-form' ).reset();

	render(){
	return (
	<form id="contact-form" onSubmit={ this.handleSubmit } method="POST">
	<div id="form-feedback"></div>
	<div className="input-field">
	<i className="material-icons prefix">email</i>
	<input type="email" id="email" required />
	<label htmlFor="email">Your Email</label>
	</div>
	<div className="input-field">
	<i className="material-icons prefix">message</i>
	<textarea name="message" id="message"
	className="materialize-textarea" required></textarea>
	<label htmlFor="message">Your message</label>
	</div>
	<div className="input-field center">
	<button className="btn">Submit</button>
	</div>
	</form>
	)
	}
	}

	ReactDOM.render(<ContactForm />,
	document.getElementById('contact-root'));
	version: "3"

	services:
	app:
	image: node:12-alpine
	user: "node"
	working_dir: /home/node/app
	environment:
	VIRTUAL_HOST: app.localhost
	NODE_ENV: production
	volumes:
	- ./site:/home/node/app
	expose:
	- "3000"
	restart: always
	command: "npm start"
	container_name: myapp

	networks:
	default:
	external:
	name: nginx-proxy
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link href="css/styles.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
	<header>
	<h1>My Awesome Website</h1>
	</header>

	<!-- contact form -->
	<section>
	<div>
	<p>
	Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa, eget egestas purus viverra accumsan in nisl nisi, scelerisque eu ultrices. In vitae turpis massa sed elementum tempus egestas sed sed risus!
	</p>
	</div>
	<div id="contact-root"></div>
	</section>

	<!-- footer -->
	<footer >
	<p>Mauris, cursus mattis molestie a, iaculis at erat pellentesque. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius duis at consectetur lorem donec!</p>
	<p>©2019. All rights reserved.</p>
	</footer>

	<!-- Compiled and minified ReactJS-->
	<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
	<!--Axios library-->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	<script src="js/contact-form.js"></script>
	</body>
	</html>
	const nodemailer = require('nodemailer');
	const express = require('express');
	const bodyParser = require('body-parser');

	const creds = require('./config');

	const app = express();

	app.use(bodyParser.json());

	app.use(express.static('assets'));

	const port = 3000;
	app.listen(port, function() {
	console.log('Server listening on port ' + port)
	});

	//Configure nodemailer transport
	const transport = {
	host: creds.HOST,
	port: 465,
	secure: true,
	auth: {
	user: creds.USER,
	pass: creds.PASS
	}
	}

	const transporter = nodemailer.createTransport(transport);

	//Check that all is well with the mailer
	transporter.verify((error,success) => {
	if (error) {
	console.log(error);
	} else {
	console.log('Server is ready to take messages');
	}
	});

	//Handle the contact form data
	app.post('/send', (req,res) => {
	let email = req.body.email;
	let message = req.body.message;
	let content = `email: ${ email } \n message: ${ message } `;

	let mail = {
	from: creds.USER,
	to: creds.RECIPIENT,
	subject: 'New Message from Contact Form',
	text: content
	}

	transporter.sendMail(mail, (err,data) => {
	if ( err ) {
	console.log(err);
	res.json({
	msg: 'fail'
	});
	} else {
	res.json({
	msg: 'success'
	});
	}
	});
	});