Discussion :

[Yassuke]

Bonjour à tous,

J'essaye actuellement de déployer une application faite en Vue JS (côté front) et en Node JS (côté back) pour mon projet de fin d'étude.
J'ai donc dans un même dossier :

• Un dossier client (Front)
• Un dossier serveur (Back)

A terme je souhaiterai mettre en ligne cette app chez un hébergeur qui dispose notamment d'une interface cPanel.

Je fais donc mes tests en local :

1. Je fais un build côté client, je récupère le dossier "public" que je mets dans dans le dossier serveur
2. Je fais un "npm start" et j'ai la page d'accueil qui s'affiche dans mn navigateur en entrant "localhost:3000" (qui est une page de login)

Problème dès lors que je fais appelle à une fonction de Vue JS qui fait appelle à une route Node j'ai une erreur :
"vue-router.esm.js:2051 Uncaught (in promise) undefined"

J'ai également fait un test en mettant en ligne mon app sur Heroku j'ai également une erreur mais différente :
"OPTIONS http://localhost:3000/read/login net::ERR_CONNECTION_REFUSED"
A noter que sur Heroku j'ai essayé également en remplaçant http://localhost:3000 par "localhost:5000" and "https://tranquil-tor-67272.herokuapp.com/" mais rien ne change.

Voici le code de mon app.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
   // CREATION DES DEPENDANCES DE MODULES
//MODULE DE JS.NODE
const https = require('https');
const fs = require('fs');
// var http = require("http");
const express = require('express');
const app = express();
const router = express.Router();
const cors = require("cors");
const mysql = require('mysql');
const bodyParser = require('body-parser');
const mysqlApostrophe = require("mysql-apostrophe");
//Module permettant de faire des refresh en SPA
const history = require('connect-history-api-fallback');
 
//IMPORT DES MODULES CREES
var dataBase = require('./routes/dataBase');
 
app.use(history());
app.use(cors());
// MISE EN PLACE DU BODY PARSER QUI PERMET DE LIRE LES JSON ET URL ENVOYE PAR LE FORMULAIRE
app.use(bodyParser.json()); // LIRE LES BODY ENCODES EN JSON
app.use(bodyParser.urlencoded({ // LIRE LES BODY ENCODES EN URL
    extended: true
}));
 
//Mise en place de express
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
 
// MISE EN PLACE DE mysqlApostrophe
app.use(mysqlApostrophe); //PERMET D'INSERER DES CHAMPS CONTENANT DES APOSTROPHES
 
 
// RECUPERATION DES FICHIERS ROUTES DANS LE DOSSIER ROUTES
const creation = require("./routes/create");
const lecture = require("./routes/read");
const maj = require("./routes/update");
const suppression = require("./routes/delete")
 
// UTILISATION DES ROUTES
app.use("/create", creation);
app.use("/read", lecture);
app.use("/update", maj);
app.use("/delete", suppression)
 
//Gestion de la mise en production
if (process.env.NODE_ENV === 'production') {
    //Static folder
    app.use(express.static(__dirname + '/public/')).use
    //Handle SPA
    app.get(/.*/, (req, res) => res.sendFile(__dirname + '/public/index.html'));
} else {
    //Static folder
    app.use(express.static(__dirname + '/public/')).use
    //Handle SPA
    app.get(/.*/, (req, res) => res.sendFile(__dirname + '/public/index.html'));
}
 
// CHOIX DU PORT UTILISE PAR LE SERVEUR
const port = process.env.PORT || 3000; //RECUPERE UN PORT LIBRE SINON 3000
app.listen(port, function () {
    console.log("Le serveur utilise le port : " + port)
});

Et voici mon package.json:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
{
  "name": "projetweb",
  "version": "1.0.0",
  "engines": {
    "node": "10.16.3"
  },
  "description": "projet web gestion des appareils",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Yassine Gharbi",
  "license": "ISC",
  "dependencies": {
    "babel-register": "^6.26.0",
    "bcrypt": "^3.0.6",
    "body-parser": "^1.19.0",
    "connect-history-api-fallback": "^1.6.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "morgan": "^1.9.1",
    "mysql": "^2.17.1",
    "mysql-apostrophe": "^1.0.8",
    "webpack-node-externals": "^1.7.2"
  }
}

Pouvez-vous svp à résoudre ce problème.
Si vous avez besoin de plus d'informations n'hésitez pas.

Merci à vous