We Keep Coding

NuxtJs deployed with docker using traefik PathPrefix won't detect page

We have blog in a NuxtJs project deployed using docker and traefik's PathPrefix('/blog') so instead of being served from https://example.com/ is served from
https://example.com/blog/
version: "3.9"
services:
{{ project_id }}-awesome-blog-{{ awesome_blog_env }}:
# etc..
labels:
- traefik.http.routers.awesome_blog-{{ awesome_blog_env }}-router.rule=Host(`{{ awesome_blog_host_dns }}`) && PathPrefix(`/blog`)
# etc..
- {{ docker_network }}
networks:
{{ docker_network }}:
external: true
The issue is that because of the PathPrefix Nuxt does not seem to know the actual page. As it's receiving /blog/ as path it doesn't match any expected route
this is what this.$router prints out in the server on the server from https://example.com/blog/
{
"name": null,
"meta": {},
"path": "/blog/",
"hash": "",
"query": {},
"params": {},
"fullPath": "/blog/",
"matched": []
}
And this is what it prints in local from http://localhost.com:3000/
{
"name": "index___en",
"meta": {},
"path": "/",
"hash": "",
"query": {},
"params": {},
"fullPath": "/",
"matched": [{
//...etc
name: "index___en",
// ..etc
}]
}
I tried using the
router: {
base: '/blog/
}
Which in local works but in the server seems not to work (doesn't even get to the nuxt site and printing the server 404)
As an "ugly" alternative I tried copying all the pages inside the /blog/ folder and they do respond but my serverMiddleware does not (returns 404)
this serverMiddleware is setup like this:
nuxt.config.js
serverMiddleware: ['~/server-middleware/index.js'],
server-middleware/index.js
const nocache = require('nocache');
const express = require('express')
const buildRouter = require('../server/router.js')
const app = express()
app.use(express.json())
app.use(nocache());
buildRouter(app)
module.exports = app
server/router.js
module.exports = function (app) {
const buildApiRoute = require('./controllers/api')
buildApiRoute(app, '/api')
}
Tried with /blog/api, too
module.exports = function (app) {
const buildApiRoute = require('./controllers/api')
buildApiRoute(app, '/blog/api')
}
Anyways, is there any way to tell nuxt to ignore the /blog/ slug of the url o something similar?
Magic code
// Before anything
this.$router.fullPath = this.$router.fullpath.replace('/blog', '/')
this.$router.path = this.$router.path.replace('/blog', '/')

redis port and host undefined even though env are set

I am using the redis npm package and whenever I try to connect to it, it's saying the host and port are undefined. I print out my process.env object and I can see that the host and port have values set. It's only when I pass the values into my constructor for my Redis model class, that it becomes undefined. Any ideas?
index.js
require('dotenv').config()
function startRedis() {
const redisInstance = new Redis(
process.env.REDIS_HOST,
process.env.REDIS_PORT
);
redisInstance.init();
}
class Redis {
constructor(redishost, redisport) {
this.redishost = redishost;
this.redisport = redisport;
}
async init() {
try {
this.redisClient = redis.createClient({
port: this.redisport,
host: this.redishost
});
console.log("port: ", this.port)
console.log("host: ", this.host)
} catch(error) {
console.log(`Error creating client due to: ${error}`)
}
}
.env
REDIS_HOST="value here"
REDIS_PORT="port value here"
package.json
{
"name": "app",
"version": "0.0.1",
"dependencies": {
"redis": "^3.0.2",
"dotenv": "^10.0.0"
},
"engines": {
"node": ">=10.0.0"
},
"main": "index.js",
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"redis": "^3.0.2",
"dotenv": "^10.0.0"
}
}
Update 1: Added my package.json

As I can see here if process.env.REDIS_HOST having value.
You have new on wrong class name
Your start function should be like
function startRedis() {
const redisInstance = new Redis(
process.env.REDIS_HOST,
process.env.REDIS_PORT
);
redisInstance.init();
}
And you are console.log wrong value
class Redis {
constructor(redishost, redisport) {
this.redishost = redishost;
this.redisport = redisport;
}
async init() {
try {
this.redisClient = redis.createClient({
port: this.redisport,
host: this.redishost
});
console.log("port: ", this.redisport)
console.log("host: ", this.redishost)
} catch(error) {
console.log(`Error creating client due to: ${error}`)
}
}

ZEIT Now Serverless Functions - Routes with Parameters

I created 4 serverless routes
/api/list (GET)
/api/add (POST)
/api/update/:id (PUT)
/api/remove/:id (DELETE)
I included them in the api/now.json file like this:
{"src": "/api/list", "dest": "./list.js", "methods": ["GET"]},
{"src": "/api/add", "dest": "./add.js", "methods": ["POST"]},
{"src": "/api/update/*", "dest": "./update.js", "methods": ["PUT"]},
{"src": "/api/remove/*", "dest": "./remove.js", "methods": ["DELETE"]}
The /api/list and /api/add routes which don't use parameters are working, but /api/update and /api/remove aren't working, because I probably didn't use the regex on the api path in the above quoted now.json file correctly.
The handler for the router looks like this (only the relevant path)
app.put('/api/update/:id', (req, res) => {
...
});
module.exports = app;

The src is the incoming request path that you want to match, and dest is the file that should execute.
That means you don't need any routes for your first two because visiting /api/list will execute the function in your file /api/list.js and /api/add will execute /api/add.js.
You can use rewrites in a now.json file to define routes similar to express patterns:
{
"rewrites": [
{ "source": "/update/:id", "destination": "/api/update" },
{ "source": "/remove/:id", "destination": "/api/remove" }
]
}
An example function in /api/remove.js would look like:
module.exports = (req, res) => {
const { id } = req.query;
res.send('Removing ID ' + id);
});
Alternatively, you could name your file /api/remove/[id].js and then you wouldn't need to define rewrites configuration at all. This is called Path Segments.

using config files with angularjs

I'm creating a angular app that talks to a node backend express application and using a config file to set env variables in my node app I can access my config file like this:
index.js
var port = config.get("server:port");
var server = app.listen(port, function() {});
My config file looks like this:
app.config.js
module.exports =
{
"server":{
"host":"localhost",
"port":3000
},
"mongodb": "",
"redis": {
"loadBalancerInstance": {
"host": "server",
"port": {
"default": "6379"
}
}
},
"elastic": {
"server": "server",
"port": "9200",
"user":"foo",
"password":"bar"
},
"log": {
"level": "info",
"filename": "",
"console": true,
"logio": {
"port": "28777",
"node_name": "this-server-name",
"host": "server"
}
}
};
I have statically defined the route/port to a backend
datafactory.js
angular.module('dashboard.factories')
.factory('DataFactory', function($http, $q, FormatFactory) {
var backend = function(apiEndPoint, clientKey) {
clientKey = clientKey || "";
var deferred = $q.defer();
$http.get("http://localhost:3000/<-(pull this from config file)" + apiEndPoint + "/" + clientKey)
My question is how can I access app.config.js within angular and dynamically set host/port within my angular service

I suppose if you're stuck on using the same configuration file that your node server uses, you'll have to make the .js file available to a GET request from your app, which you'll then have to parse out the string into JSON.
Edit:
You're going to have to have two configuration files, one available to your node server, and one for your angular app. Now, if you want the source to be one file, you could build that into your build process - if you use something like gulp or grunt, this would be reasonably easy. It could take the singular config file and build two files - the node server config file, and an angular module (I would suggest a constant or value) that you could inject into your data services.

If you're serving the config file at localhost:3000/config, you can do this:
angular.module('dashboard.factories')
.factory('DataFactory', function($http, $q, FormatFactory) {
$http.get('localhost:3000/config')
.success(function(config) {
$http.get(config.server.host + ":" + config.server.port)
// whatever you want here
});
});

How to copy a folder over SSH with Gulp?

I have been experimenting with gulp lately, and have had a lot of success, but now I am stumped.
I have gulp building everything, and I want to upload a folder afterwards. I have created a deploy task for this using gulp-scp2:
gulp.task('deploy', ['clean', 'build'], function() {
var privateKeyPath = getUserHome() + '/.ssh/id_rsa';
gulp.src('public/dist')
.pipe(scp({
host: 'myhost',
username: 'user',
dest: '/home/user/test',
agent: process.env['SSH_AUTH_SOCK'],
agentForward: true,
watch: function(client) {
client.on('write', function(o) {
console.log('write %s', o.destination);
});
}
})).on('error', function(err) {
console.log(err);
});
});
Unfortunately, when I do this, I get the following error:
Error: Content should be buffer or file descriptor
How can I copy a folder over SSH using gulp?

I did end up finding a solution by leveraging the node scp2 library:
scpClient = require('scp2');
gulp.task('scp', [], function (cb) {
scpClient.scp('local_folder', {
"host": "remote_host",
"port": "remote_port",
"username": "username_on_remote",
"path": "/path/on/remote",
"agent": process.env["SSH_AUTH_SOCK"],
"agentForward": true
}, cb)
});

As the previous answer, i ended using a node version directly, this one will work in gulp 4+ way:
First install the lib (Be sure of installing locally in the project, the global version doesnt work for using in gulp file):
npm install scp2
Then in the gulp file:
var scpClient = require('scp2');
function deploySCP2(){
return scpClient.scp(paths.buildAll, {
"host": "host",
"username": "username",
"password": "password",
"path": "path"
}, function(err) { })
}
This will work rightaway.