0

i have server which is done with node js and client code done with vuejs. Initially nodejs was not done, so vuejs works correctly. But now i have separated into two part, client folder which has front-end and remaining things are server side which is done in node.js.

I'm issue how to run nodejs inside vuejs for firebase deploy. Now issue shown on console is

we're sorry but projectname doesn't work properly without JavaScript enabled. Please enable it to continue.

My project structure:

  • client [folder]
  • dist[folder]
  • models
  • node_modules
  • app.js
  • Dokerfiles
  • firebase.json
  • package.json
  • package-lock.json
  • publish-firebase-test.yaml
  • update-buildtools-.yaml

Firebase.json

 {
"hosting": {
"public": "dist",
"rewrites": [
  {
    "source": "**",
    "destination": "/index.html",
    "function": "app"
  }
],
"ignore": [
  "firebase.json",
  "**/.*",
  "**/node_modules/**"
],
"headers": [ {
  "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",

  "headers": [ {
    "key": "Access-Control-Allow-Origin",
    "value": "*"
  } ]
}, {
  "source": "**/*.@(jpg|jpeg|gif|png)",
  "headers": [ {
    "key": "Cache-Control",
    "value": "max-age=7200"
  } ]
}, {
  "source": "404.html",
  "headers": [ {
    "key": "Cache-Control",
    "value": "max-age=300"
  } ]
 } ],

  "cleanUrls": true
  }
 }

client[folder] -> vue.config.

const path = require('path')

module.exports = {
devServer: {
compress: true,
disableHostCheck: true,
  },
 outputDir: path.resolve(__dirname, '../dist'), // build all the assets inside server/dist folder
 pluginOptions: {
 'style-resources-loader': {
  preProcessor: 'scss',
  patterns: [path.resolve(__dirname, './src/styles/global.scss')]
 }
 },
 chainWebpack: config => {
  if (config.plugins.has('optimize-css')) {
  config.plugins.delete('optimize-css')
  }
 }
}

Client[folder] -> src -> services -> Api.js

 import axios from 'axios'

  export default() => {
  return axios.create({
  baseURL: `https://dev-xxxxxxx-com.firebaseapp.com`
  // https://dev-xxxxxxx-com.firebaseapp.com/
  // http://localhost:8081
  })
 }

app.js [node js code]

const express = require('express')
const bodyParser = require('body-parser')
 const cors = require('cors')
const morgan = require('morgan')
var firebase = require('firebase');
const functions = require('firebase-functions');

 const axios = require('axios');
 const credentials = new Buffer('testing:testing123').toString('base64')


 const app = express()
 app.use(morgan('combined'))
app.use(bodyParser.json())
app.use(cors())


var Post = require("./models/post");

  const firebaseConfig = {
  apiKey: "AIzaSyBDwqFKPt4D0eIspjsziweLI0nc49BRDrU",
  authDomain: "cloudthrifty-demo.firebaseapp.com",
 databaseURL: "https://cloudthrifty-demo.firebaseio.com",
 projectId: "cloudthrifty-demo",
 storageBucket: "cloudthrifty-demo.appspot.com",
 messagingSenderId: "638814042535",
appId: "1:638814042535:web:221da9fcf361554b"
};
firebase.initializeApp(firebaseConfig);
var db = firebase.firestore();


app.get('/GCPScheduler', (req, res) => {
res.send(
 [{
   title: "Hello World!",
  description: "Hi there! How are you?"
  }]
 )
})
 // serve dist folder
 if (process.env.NODE_ENV === 'production') {
 // Static folder
 app.use(express.static(__dirname + '/dist'));
 // Handle SPA
 app.get('*', (req, res) => res.sendFile(__dirname + '/dist/index.html'));

}

 // Add new post
app.post('/list-server', (req, res) => {
 var token = req.body.token;
 var ccExp = req.body.ccExp;
 var cardNumber = req.body.cardNumber;
 var currentUserUUID = req.body.currentUserUUID;
 var amount = req.body.amount;
 console.log(token);
console.log(ccExp);
console.log(cardNumber);
console.log(currentUserUUID);
console.log(amount);

(async() => {

const paymentRequest = await getAuthTokenForThePayment({
    account: cardNumber,
    merchid: '496160873888',
    amount: amount, // Smallest currency unit. e.g. 100 cents to charge $1.00
    expiry: ccExp,
    currency: 'USD'
});

const charge = await makeCharge({
    merchid: paymentRequest.data.merchid, 
    retref: paymentRequest.data.retref
});

console.log(charge);
console.log(charge.data.respstat)

if (charge.data.respstat == 'A'){

  var data = db.collection('transactionTable').doc(charge.data.retref);

  var setAlan = data.set({
    'respstat': charge.data.respstat,
    'retref': charge.data.retref,
    'account': charge.data.account,
    'token': charge.data.token,
    'batchid': charge.data.batchid,
    'amount': charge.data.amount,
    'resptext': charge.data.resptext,
    'respcode': charge.data.respcode,
    'commcard': charge.data.commcard,
    'setlstat': charge.data.setlstat,

  });

  res.send(charge.data.respstat);


} else if(charge.data.respstat == 'B'){

  console.log("Declined");
  res.send(charge.data.respstat);


}else if(charge.data.respstat == 'C'){
  console.log("Retry");
  res.send(charge.data.respstat);


}





})();

  const getAuthTokenForThePayment = async (data) => {

  try {

  const config = {
      headers: {
          'Content-Type': 'application/json',
          'Authorization': `Basic ${credentials}`
      }
  };

  const URL = 'https://fts.cardconnect.com:6443/cardconnect/rest/auth';

  return await axios.put(URL, data, config);

} catch (error) {

  throw (error);

  }
}

const makeCharge = async (data) => {

   try {

  const config = {
      headers: {
          'Content-Type': 'application/json',
          'Authorization': `Basic ${credentials}`
      }
  };

  const URL = 'https://fts.cardconnect.com:6443/cardconnect/rest/capture';

  return await axios.put(URL, data, config);

 } catch (error) {

  throw (error);

  }
}

 // app.listen(process.env.PORT || 8081)
exports.app = functions.https.onRequest(app);

Any help much appreciated pls..

PvUIDev
  • 95
  • 1
  • 9
  • 38
  • 1
    You can't host a Node.js server on Firebase Hosting, which is a static hosting, you have to use Cloud Functions: https://stackoverflow.com/questions/45537195/how-to-host-nodejs-project-to-firebase – yuriy636 Jun 09 '19 at 10:07
  • thanks for reply i'm totally new to this. can you help me out of this. How to use cloud function for my code and setup vue.config.js and firebase.json file – PvUIDev Jun 09 '19 at 10:28
  • @yuriy636 i have updated my code. i have app.js nodejs code, where i have creating api .. – PvUIDev Jun 09 '19 at 10:56
  • @yuriy636 think its rewite path issue ffom firebase.json – PvUIDev Jun 09 '19 at 15:28

0 Answers0