1 pièce(s) jointe(s)
Déploiement Vue JS et Node
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)
Pièce jointe 517782
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 :
- Je fais un build côté client, je récupère le dossier "public" que je mets dans dans le dossier serveur
- 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:
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:
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 :)
