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..