473,287 Members | 1,655 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

Problem between local and uploads of a server and its web application

Hi everyone
I have a problem:

Locally my form is sent, I receive the answer by email without worries:

> {status: 201, info: {…}}
FormContact.js:31 Email envoyé

On the other hand, the posting on Cpanel went well, the node js server starts perfectly, the site is reactjs is functional, but the contact form no longer works.

Error in console on the online website:

> POST http://chloe-sadry.fr/register 404 (Not Found)
> Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

how are my files arranged , here I noted the folders in bold and the files inside each folder in italic. I did not note all the files but only the relevant ones:

client :
__build
__public :
_____.htaccess
_____index.html
__src :
_____FormContact.js

server :
__config :
_____index.js
__routes :
_____router.js
__.env
__server.js


FILES'S CLIENT IN ORDER :

.htaccess :



Expand|Select|Wrap|Line Numbers
  1. <IfModule mod_rewrite.c>
  2.     RewriteEngine On
  3.     RewriteBase /
  4.     RewriteRule ^index\.html$ - [L]
  5.     RewriteCond %{REQUEST_FILENAME} !-f
  6.     RewriteCond %{REQUEST_FILENAME} !-d
  7.     RewriteCond %{REQUEST_FILENAME} !-l 
  8.     RewriteRule . /index.html [L]
  9.  </IfModule>


FormContact.js :


import React, { useState } from 'react';


Expand|Select|Wrap|Line Numbers
  1. const FormContact = () => {
  2.  
  3.     const [email, setEmail] = useState("")
  4.     const [fullName, setFullName] = useState('');
  5.     const [message, setMessage] = useState('');
  6.  
  7.     const sendEmail = async(e)=>{
  8.         e.preventDefault()
  9.         const res = await fetch("/register",{
  10.             method : "POST",
  11.             headers : {
  12.                 "Content-Type":"application/json"
  13.             },
  14.             body:JSON.stringify({
  15.                 fullName,
  16.                 email,
  17.                 message
  18.             })
  19.         });
  20.  
  21.         const data = await res.json();
  22.         console.log(data);
  23.  
  24.         if(data.status === 401 || !data){
  25.             console.log("error")
  26.         }else{
  27.  
  28.             console.log("Email envoyé");
  29.             setFullName("")
  30.             setEmail("")
  31.             setMessage("")
  32.         }
  33.     }
  34.     return (
  35.         <>
  36.  
  37.             <div className='form-contact'>
  38.                 <form>
  39.  
  40.                     <label>Prénom / Nom</label>
  41.                     <input
  42.                     value={fullName}
  43.                     onChange={(e) => setFullName(e.target.value)}
  44.                     required
  45.                     type="text"
  46.                     placeholder="Prénom Nom"
  47.                     className="fullname"
  48.                     />
  49.  
  50.                     <label htmlFor="email">Enter your email :</label>
  51.                     <input type="email" placeholder="E-mail" value={email} onChange={(e)=>setEmail(e.target.value)} required/>
  52.  
  53.                     <label>Message</label>
  54.                     <textarea
  55.                     required
  56.                     placeholder="Comment puis je vous aider ?"
  57.                     rows={3}
  58.                     className="message"
  59.                     value={message}
  60.                     onChange={(e) => setMessage(e.target.value)}
  61.                     />
  62.  
  63.                     <input type="submit" value="Envoyer" onClick={sendEmail}/>
  64.  
  65.                 </form>
  66.  
  67.             </div>
  68.  
  69.         </>
  70.     );
  71. };
  72.  
  73. export default FormContact;
packages.json :


Expand|Select|Wrap|Line Numbers
  1. {
  2.       "name": "my_retro_website",
  3.       "version": "0.1.0",
  4.       "private": true,
  5.       "homepage": "http://chloe-sadry.fr",
  6.       "proxy": "http://localhost:8006",
  7.       "dependencies": {
  8.         "@testing-library/jest-dom": "^5.16.5",
  9.         "@testing-library/react": "^13.4.0",
  10.         "@testing-library/user-event": "^13.5.0",
  11.         "axios": "^0.27.2",
  12.         "react": "^18.2.0",
  13.         "react-dom": "^18.2.0",
  14.         "react-icons": "^4.4.0",
  15.         "react-scripts": "5.0.1",
  16.         "react-toastify": "^9.0.8",
  17.         "web-vitals": "^2.1.4"
  18.       },
  19.       "scripts": {
  20.         "start": "react-scripts start",
  21.         "build": "react-scripts build",
  22.         "test": "react-scripts test",
  23.         "eject": "react-scripts eject",
  24.         "deploy": "gh-pages -d build"
  25.       },
  26.       "eslintConfig": {
  27.         "extends": [
  28.           "react-app",
  29.           "react-app/jest"
  30.         ]
  31.       },
  32.       "browserslist": {
  33.         "production": [
  34.           ">0.2%",
  35.           "not dead",
  36.           "not op_mini all"
  37.         ],
  38.         "development": [
  39.           "last 1 chrome version",
  40.           "last 1 firefox version",
  41.           "last 1 safari version"
  42.         ]
  43.       },
  44.       "devDependencies": {
  45.         "gh-pages": "^4.0.0"
  46.       }
  47.     }

FILES'S SERVER IN ORDER :

index.js IN config's case :



Expand|Select|Wrap|Line Numbers
  1. module.exports = {
  2.     port: process.env.PORT,
  3.     local_client_app: process.env.LOCAL_CLIENT_APP,
  4.     remote_client_app: process.env.REMOTE_CLIENT_APP,
  5.     allowedDomains: (
  6.         process.env.NODE_ENV === 'production' ? 
  7.         [
  8.         process.env.REMOTE_CLIENT_APP, 
  9.         process.env.REMOTE_SERVER_API
  10.     ] : [
  11.         process.env.LOCAL_CLIENT_APP,
  12.         process.env.LOCAL_SERVER_API
  13.         ])
  14. };


routers.js IN "routes"'s case :


Expand|Select|Wrap|Line Numbers
  1. const express = require("express");
  2. const router = new express.Router();
  3. const nodemailer = require("nodemailer");
  4.  
  5. router.post("/register",(req,res)=>{
  6.  
  7.  
  8.     try {
  9.         const { fullName,email,message} = req.body
  10.         const transporter = nodemailer.createTransport({
  11.             service:"gmail",
  12.             auth:{
  13.                 user:process.env.EMAIL,
  14.                 pass:process.env.PASSWORD
  15.             }
  16.         });
  17.         const mailOptions = {
  18.             from : process.env.EMAIL,
  19.             to : process.env.EMAIL,
  20.             subject : "send email success",
  21.             html :
  22.             `<p>FullName: <b>${fullName}</b></p>
  23.             <p>Email: <b>${email}</b></p>
  24.             <p>Message: <i>${message}</i></p>`
  25.         };
  26.         transporter.sendMail(mailOptions,(error,info)=>{
  27.             if (error) {
  28.                 console.log("Erreur", error)
  29.             }else{
  30.                 console.log("Email envoyé" + info.response);
  31.                 res.status(201).json({status:201,info})
  32.             }
  33.         })
  34.     } catch (error) {
  35.         res.status(201).json({status:401,error})
  36.     }
  37. });
  38.  
  39. module.exports = router;
  40.  
.env files :

I changed the email and the password to avoid any problem for my account..


Expand|Select|Wrap|Line Numbers
  1. EMAIL = XXXXXX
  2. PASSWORD = XXXXXX 
  3. PORT=8006
  4. HOST=localhost
  5. LOCAL_CLIENT_APP= http://localhost:3000
  6. REMOTE_CLIENT_APP=http://chloe-sadry.fr
  7. LOCAL_SERVER_API=http://localhost:8006
  8. REMOTE_SERVER_API=https://api.chloe-sadry.fr

server.js :

Expand|Select|Wrap|Line Numbers
  1. require("dotenv").config();
  2. const express = require("express");
  3. const app = express();
  4. const router = require("./routes/router");
  5. const cors = require("cors")
  6. const helmet = require("helmet");
  7. const compression = require("compression");
  8. const config = require("./config");
  9. const http = require("http");
  10. const server = http.createServer(app);
  11.  
  12. const {port, allowedDomains} = config;
  13.  
  14. app.use(express.json());
  15. app.use(cors({origin:allowedDomains, credentials : true}));
  16. app.use(router)
  17. app.use(helmet())
  18. app.use(compression())
  19.  
  20. app.get("/",(req,res)=>{
  21.   res.send("server start")
  22. })
  23.  
  24. server.listen(port,()=>{
  25.   console.log(`server start at :${port}`)
  26. })

Do you have a clue about the problem please? Should I give you more info? Thanks for help !
Sep 29 '22 #1
0 6280

Sign in to post your reply or Sign up for a free account.

Similar topics

5
by: Andy | last post by:
This morning I was quite happily working away when a Windows Update prompted me for install. I found a convenient brake point and duly installed it and rebooted, oh dear what a mistake LOL! Any...
1
by: Keith | last post by:
All, I have been told this is an ASP.NET issue and not an IIS issue, so I am posting this here. I have a problem with ASP.NET returning an HTTP 500 error when trying to run ASPX pages on...
2
by: Joe Bonavita | last post by:
Server Application Unavailable The web application you are attempting to access on this web server is currently unavailable. Please hit the "Refresh" button in your web browser to retry your...
1
by: Robert Halford | last post by:
On 4th May at 7.45 in the evening my asp.net web sites stopped working on my development server. The page that appears says: Server Application Unavailable The web application you are...
1
by: apoc69 | last post by:
Hi people, i have a own server application (written in .net) which proceess different message types, like XML, EDI, SPEC2000, SAP IDOCs. and so on... this application is doing a lot of different...
3
by: kkp40 | last post by:
Hi. I have a problem when I try to run an application against a local SQL- server, it works find when I run the application against a SQL-server on a server. The problem is this I have 2...
11
by: Jeff | last post by:
Hello everyone. I've searched through the archives here, and it seems that questions similar to this one have come up in the past, but I was hoping that I could pick your Pythonic brains a bit. ...
5
by: myth0s | last post by:
Hello everybody :) I have trouble getting my ASP application to work. I googled a lot for a solution... many solutions I tried came from The Scripts, but none of them worked. Nonetheless, I think...
6
by: Tony Johansson | last post by:
Hello! We have a C#.ASP.NET application that runs on a IIS 6. The application contains actually several asp pages but there is no GUI. The application receive an xml file that is processed....
0
by: tajabadi | last post by:
Hello I have installs the server application 10.1.2.0 .2 in Windows 2003 server. I have forms 6i that j' converted into forms 10g. The language that j' use is Persan. With posting in browser IE,...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.