Angular 7 Form in production

Question

I am trying to put into operation a form that sends me data to the mail with nodemailer in localhost: 3000 it works well but when loading my project on the server with the community I can not get this code to work

an application in the root of the project called nodeMensajeria / src / node modules, app.js and configMensaje.js

mira la raiz de mi proyecto app.js

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const configMensaje = require('./configMensaje');

const app = express();
app.use(bodyParser.json());
app.use(cors())

app.post('/formulario', (req, res) => {
  configMensaje(req.body);
  res.status(200).send();
})

app.listen(3000, () => {
  console.log('Servidor corriendo')
});

configMensaje.js

const nodemailer = require('nodemailer');

module.exports = (formulario) => {
  var transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: 'correoorigen', 
      pass: 'contraseña' 
    }
  });

  const mailOptions = {
    from: `"${formulario.nombre} 👻" <${formulario.email}>`,
    to: 'correodestino', // 
    subject: formulario.asunto,
    html: `
    <strong>Nombre:</strong> ${formulario.nombre} <br/>
    <strong>Asunto:</strong> ${formulario.asunto} <br/>
    <strong>E-mail:</strong> ${formulario.email}  <br/>
    <strong>Número de contacto:</strong> ${formulario.contacto}  <br/>
    <strong>Mensaje:</strong> ${formulario.mensaje}
    `
  };

  transporter.sendMail(mailOptions, function (err, info) {
    if (err)
      console.log(err)
    else
      console.log(info);
  });
}

the service message.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'

@Injectable({
  providedIn: 'root'
})
export class MessageService {

  constructor(private _http: HttpClient) { }

  sendMessage(body) {
    return this._http.post('http://107.180.59.131:3000/formulario', body);
  }
}

I am using the ip of my domain

app.component.ts

import { Component, OnInit } from '@angular/core';
import { MessageService } from '../services/message.service';

import swal from 'sweetalert';
import { VirtualTimeScheduler } from 'rxjs';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {



  constructor(public _MessageService: MessageService) { }

  contactForm(form) {
    this._MessageService.sendMessage(form).subscribe(() => {
      swal("Formulario de contacto", "Mensaje enviado correctamente", 'success');

    });

  }



  ngOnInit() {

  }

}

It shows me that the app is executed

but when sending the form in production it shows me the following error

Failed to load resource: net::ERR_CONNECTION_TIMED_OUT main.5cb5f6b8477568c35bd7.js:1 ERROR e {headers: t, status: 0, statusText: "Unknown Error", url: " http://107.180.59.131:3000/formulario ", ok: false, …}

look at the error

Answer 1

you have to deploy the express api into your server, this link could help you https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/deployment

you are using the developement mode to work in the production server and your firewall its blocking the port 3000, when you deploy the api, you've to send the post to http://YOUR_IP/endpoint or http://api.IP/endpoint