We Keep Coding

Permanent redirect for www to non-www site using NextJs

I've built a website with Nextjs (using version 12.1.4). For SEO purposes I would like to make a permanent redirect for my www version of the site to my non-www. Normally this could easily be done with nginx or an .htaccess file with apache. However, static websites hosted on Digitalocean are not running apache or nginx so an .htaccess file won’t do. I've read that this should be possible using Nextjs redirects.
I've tried the following 3 redirects:
redirects: async () => [
{
source: '/:path*',
has: [
{
type: 'host',
value: 'www',
},
],
destination: '/:path*',
permanent: true,
},
],
---------------------------------------------------
redirects: async () => [
{
source: '/:path*/',
has: [
{
type: 'host',
value: 'www',
},
],
destination: '/:path*/',
permanent: true,
},
],
------------------------------------------------------
redirects: async () => [
{
source: '/:path*',
has: [{ type: 'host', value: 'https://www.cvtips.nl/' }],
destination: 'https://cvtips.nl/:path*',
permanent: true,
},
],
All of them don't seem to redirect to the non-www version. I don't know if it is relevant, but I do use trailingSlash: true in the config.
Next thing I tried is adding a middleware file. I both tried adding it at the root and calling it middleware.js and inside the pages folder calling it _middleware.js.
This is the code I use for the redirect:
--> https://github.com/vercel/next.js/discussions/33554
import { NextRequest, NextResponse } from 'next/server';
export function middleware(req: NextRequest) {
const host = req.headers.get('host');
const wwwRegex = /^www\./;
// This redirect will only take effect on a production website (on a non-localhost domain)
if (wwwRegex.test(host) && !req.headers.get('host').includes('localhost')) {
const newHost = host.replace(wwwRegex, '');
return NextResponse.redirect(`https://${newHost}${req.nextUrl.pathname}`, 301);
}
return NextResponse.next();
}
Also does not work at all... Doesn't do anything I believe.
How can I redirect a Nextjs website from www to non-www?

Custom domain Firebase cloudfuntions API

I have an Express API already in production using Firebase Cloud Functions but I need to add custom domain to it. I followed these instructions to create a custom domain for Cloud Functions using Firebase Hosting and end up with the following firebase.json
{
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
],
"source": "functions"
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"emulators": {
"functions": {
"port": 5001
},
"firestore": {
"port": 8080
},
"ui": {
"enabled": false
}
},
"hosting": [{
"site": "devbp",
"target:":"devbp",
"public": "public",
"rewrites": [
{
"source": "/api/**",
"function": "api"
}
]
}]
}
index.ts
import { functions } from './utils/exports-converter';
import App from './web-api/configs/app';
export * from './functions';
export * from './backup/schedules';
export * from './firestore-triggers/credits/credits-triggers'
export * from './schedules/transactions/aggregations-schedules';
export const api = functions.runWith({
memory: '1GB',
timeoutSeconds: 300
}).https.onRequest(App.express);
exports-converter.ts
import * as express from "express";
import * as functions from "firebase-functions";
import * as admin from "firebase-admin";
export { express, functions, admin };
app.ts
import * as cors from "cors";
import * as bodyParser from "body-parser";
import Routes from "./routes";
import { express } from "../../utils/exports-converter";
class App {
public express: express.Application;
constructor() {
this.express = express();
this.init();
this.mountRoutes();
}
private init() {
const corsOptions = { origin: true };
this.express.use(cors(corsOptions));
this.express.use(bodyParser.raw());
this.express.use(bodyParser.json());
this.express.use(bodyParser.urlencoded({ extended: true }));
}
private mountRoutes() {
Routes.mount(this.express);
}
}
The problem is that the endpoints inside the api are not reachable, e.g. GET devbp.web.app/api/user?id=123 which returns Cannot GET /api/user. This response indicates that Express is handling the requests (if not, the Hosting would throw a 404 page) but not as expected.
I believe that I'm missing something in my firebase.json because the same api, as said above, is currently in production.
Any thoughts on it?

According to the documentation (here as well) hosting syntax is:
"hosting": {
...
}
while in the presented firebase.json you have [{ ... }].
Try to remove square brackets.

I am not sure, if I am following the logic, however I don't see any new App anywhere in the code. If I understand correctly if you do not create new App object you will not run it's constructor so express app will not be created.
2nd thing I think :) is that, again according to my understanding, there should be Express get() method called when GET request is called by http GET requst.
I found this tutorial it's not cloud function, however the logic is similar. New instance App is created and get method invoked.

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.

Loopback API Error while creating the profile model

I am trying to create the Profile model in loopback it is showing the error.
error details
Unhandled error for request POST /api/Users: Error: Cannot call Profile.create(). The create method has not been setup. The PersistedModel has not been correctly attached to a DataSource!
'use strict';
var loopback = require('loopback');
var boot = require('loopback-boot');
var app = module.exports = loopback();
app.start = function() {
// start the web server
return app.listen(function() {
app.emit('started');
var baseUrl = app.get('url').replace(/\/$/, '');
console.log('Web server listening at: %s', baseUrl);
if (app.get('loopback-component-explorer')) {
var explorerPath = app.get('loopback-component-explorer').mountPath;
console.log('Browse your REST API at %s%s', baseUrl, explorerPath);
}
});
};
// Bootstrap the application, configure models, datasources and middleware.
// Sub-apps like REST API are mounted via boot scripts.
boot(app, __dirname, function(err) {
if (err) throw err;
// start the server if `$ node server.js`
if (require.main === module)
app.start();
});
console.log(Object.keys(app.models));
app.models.User.afterRemote('create',(ctx,user,next)=>{
console.log("The new User is ",user);
app.models.Profile.create({
first_name :user.username,
created_at :new Date(),
userId: user.id
}, (err,result)=>{
if(!err && result)
{
console.log("Created new profile !", result);
}
else{
console.log("There is an error ",err);
}
next();
});
});
Prfile.JSON file
{
"name": "Profile",
"base": "PersistedModel",
"idInjection": true,
"options": {
"validateUpsert": true
},
"properties": {
"first_name": {
"type": "string"
},
"last_name": {
"type": "string"
},
"birth_date":{
"type":"date"
},
"created_at": {
"type": "date"
},
"age": {
"type": "number"
},
"history":{
"type":["object"]
}
},
"validations": [],
"relations": {},
"acls": [],
"methods": {}
}
**This file is the profile.js file **
'use strict';
module.exports = function(Profile) {
};

Perhaps you still need to bind your model to the data source in the model-config.json file, like that:
datasources.json
"rdb": {
"host": "localhost",
"port": 3306,
"database": "asat",
"password": "12345",
"name": "rdb",
"user": "admin",
"connector": "mysql"
}
...
model-config.json
"Profile": {
"dataSource": "rdb",
"public": true
}
...

The reason can be any of the follwoing
Forget to add the model name in the model-config.json file
Sometime when the loopback server start the model didnt get appended to the server object properly. If the model is not appended properly we can not use the model using the app object and one server restart will solve the issue.
Datasource is not correctly mentioned in model-config file

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