Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140331

Vue and Node JS deployment

$
0
0

I'm trying to make my first app using Vue Js for the front and Node for the back.

On my computer I created a folder "project" which contains this 2 folders : . Client => for the Vue Js Front . Serveur => for the back with Node JS

My project

On my differents Vue and Component, I call different request (see example below)

Request Call

I understand that when I have to deploy, I have to a "npm run build" for my Vue JS. So I export this build to "/serveur/public".

But unfortunately, when I make a test of my app locally, I have this error : "vue-router.esm.js:2051 Uncaught (in promise) undefined"

Error localhost:3000

When I deploy It on Heroku i've got this error : "OPTIONS http://localhost:3000/read/login net::ERR_CONNECTION_REFUSED"

For this error I change localhost:3000 by localhost:5000 and https://tranquil-tor-67272.herokuapp.com/ but It's still happen

Online error

Here is my app.js :

    // 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)
});

And my package.json

{
  "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"
  }
}

Can somebody can help me to resolve this please ?

Thank You :)

/-------------------------------/

I found why I've got the error : "vue-router.esm.js:2051 Uncaught (in promise) undefined"

It's because of my method "beforeRouteEnter" that I use on my profil page. But I don't know why its acts like this ?

If someone can help me please to resolve It :)

 beforeRouteEnter: (to, from, next) => {
    if (localStorage.length > 1) {
      let recupLocalStore = localStorage.getItem(`userInfoConnect`);
      recupLocalStore = JSON.parse(recupLocalStore);
      let id_utilisateur = recupLocalStore.id_user;
      if (id_utilisateur == 1 || id_utilisateur == 2 || id_utilisateur == 3) {
        next();
      } else {
        next("/login");
      }
    } else {
      next("/login");
    }
  },

Viewing all articles
Browse latest Browse all 140331

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>