Process is undefined when trying to deploy to Heroku - heroku

Hope you can help me and I don't sound like a total noob. I've developed a database frontend in NextJS using Knex.
import knex from 'knex'
export default function handler (req, res) {
const { userId } = req.body
const db = knex({
client: 'pg',
connection: process.env.DATABASE_URL
})
console.log(req.body)
db.select('*').from('favorites').where('userid', '=', userId).orderBy('savedon', 'desc')
.then(data => {
if (data) {
console.log(data)
res.json({'results': data})
} else {
res.json('no favorites found')
}
})
.catch(err => res.json(err))
}
When I try to deploy it I get multiple failures because process is undefined.
I have checked the code with the NextJS, Heroku and Knex documentation and it seems like it should work, I would ask Heroku for support but that doesn't exist anymore apparently :P

Related

Nextjs TypeError: "Cannot read property 'headers' of undefined", after update to nextjs 12.1.0

After update to Nextjs 12.1.0, when I call api via api route, the following error is returned. I'm using aws amplify.
The following error is returned in the CloudFront console:
My api route:
const handlerProducts = async (req: NextApiRequest, res:NextApiResponse) => {
const params = req.query;
try {
const { data } = await axios.get(URL, {
params,
});
res.status(200).send(data);
} catch (err: any) {
res.status(500).end();
}};
What could be causing this problem?
Thanks for all the help.
I downgraded next.js to 12.0.8 and it works again
While investigating possibly the same issue, I found https://github.com/serverless-nextjs/serverless-next.js/issues/2327
zhenjie states on GitHub: "Confirmed 12.0.8 works fine, and 12.0.9 does not work."

How to set up a socket connection on a strapi server

I am trying to integrate socket.io with strapi. But unfortunately I have been unable to do so without any proper tutorial or documentation covering this aspect.
I followed along with the only resource I found online which is:
https://medium.com/strapi/strapi-socket-io-a9c856e915a6
But I think the article is outdated. I can't seem to run the code mentioned in it without running into tonnes of errors.
Below is my attempt to implement it and I have been trying to connect it through a chrome websocket plugin smart websocket client But I am not getting any response when I try to run the server.
I'm totally in the dark. Any help will be appreciated
module.exports = ()=> {
// import socket io
var io = require('socket.io')(strapi.server)
console.log(strapi.server) //undefined
// listen for user connection
io.on('connect', socket => {
socket.send('Hello!');
console.log("idit")
// or with emit() and custom event names
socket.emit('greetings', 'Hey!', { 'ms': 'jane' }, Buffer.from([4, 3, 3, 1]));
// handle the event sent with socket.send()
socket.on('message', (data) => {
console.log(data);
});
// handle the event sent with socket.emit()
socket.on('salutations', (elem1, elem2, elem3) => {
console.log(elem1, elem2, elem3);
});
});
};
So I found the solution. Yay. I'll put it here just in case anybody needs it.
boostrap.js
module.exports = async () => {
process.nextTick(() =>{
var io = require('socket.io')(strapi.server);
io.on('connection', async function(socket) {
console.log(`a user connected`)
// send message on user connection
socket.emit('hello', JSON.stringify({message: await strapi.services.profile.update({"posted_by"})}));
// listen for user diconnect
socket.on('disconnect', () =>{
console.log('a user disconnected')
});
});
strapi.io = io; // register socket io inside strapi main object to use it globally anywhere
})
};
Found this at: https://github.com/strapi/strapi/issues/5869#issuecomment-619508153_
Apparently, socket.server is not available when the server starts. So you have to make use of process.nextTick that waits for the socket.server to initialize.
I'll also add a few questions that I faced when setting this up.
How do i connect from an external client like nuxt,vue or react?
You just have to connect through "http://localhost:1337" that is my usual address for strapi.
I am using nuxt as my client side and this is how set up my socketio on the client side
I first installed nuxt-socket-io through npm
Edited the nuxt.config file as per it's documention
modules:[
...
'nuxt-socket-io',
...
],
io: {
// module options
sockets: [
{
name: 'main',
url: 'http://localhost:1337',
},
],
},
And then i finally added a listener in one of my pages.
created() {
this.socket = this.$nuxtSocket({})
this.socket.on('hello', (msg, cb) => {
console.log('SOCKET HI')
console.log(msg)
})
},
And it works.
A clean way to integrate third-party services into Strapi is to use hooks. They are loaded once during the server boot. In this case, we will create a local hook.
The following example has worked with strapi#3.6.
Create a hook for socket.io at ./hooks/socket.io/index.js
module.exports = strapi => {
return {
async initialize() {
const ioServer = require('socket.io')(strapi.server, {
cors: {
origin: process.env['FRONT_APP_URL'],
methods: ['GET', 'POST'],
/* ...other cors options */
}
})
ioServer.on('connection', function(socket) {
socket.emit('hello', `Welcome ${socket.id}`)
})
/* HANDLE CLIENT SOCKET LOGIC HERE */
// store the server.io instance to global var to use elsewhere
strapi.services.ioServer = ioServer
},
}
}
Enable the new hook in order for Strapi to load it - ./config/hook.js
module.exports = {
settings: {
'socket.io': {
enabled: true,
},
},
};
That's done. You can access the websocket server inside ./config/functions/bootstrap.js or models' lifecycle hooks.
// ./api/employee/models/employee.js
module.exports = {
lifecycles: {
async afterUpdate(result, params, data) {
strapi.services.ioServer.emit('update:employee', result)
},
},
};
For those who are looking the answer using Strapi version 4
var io = require("socket.io")(strapi.server.httpServer)

Using puppeteer to screenshot local files, but it's still making web requests?

I am using Puppeteer to take screenshots of a web page for my company. I need to test multiple people's accounts so that means visiting the page multiple times (150 times in this case). This results in our firewall kicking me out for making too many requests.
My solution is to just fetch the contents of the page and save them locally. Then I use puppeteer on that local file, overriding the function used to get data from our servers to instead just use data already loaded into Node from a CSV.
All of this works, but it looks like it's still making requests to our servers.
I tried giving it a userDataDir so it could cache any resources. In theory, if it's loading it from file://, it's caching the resources and there's no Ajax requests, it shouldn't be making any further requests, right?
I also tried installing a debugging proxy but since it's https I can't see what it's trying to request.
This is how I start it:
puppeteer.launch({
userDataDir: "temp/"
})
.then(browser => {
next(browser, links);
)
.catch(error => {
cb(error, null);
});
next will iterate through any links it needs to visit.
This part saves the page locally:
if (this._linkCache[baseLink] === undefined) {
fetch(baseLink)
.then(resp => resp.text())
.then(contents => {
fs.writeFile(fullFileName, contents, 'utf8', err => {
if (err) {
cb(err, null);
} else {
this._linkCache[baseLink] = fileUrl;
gotoPage(fileUrl);
}
});
})
.catch(error => {
cb(error, null);
});
}
// Go to the cached version
else {
gotoPage(this._linkCache[baseLink] + queryParams);
}
And this gets the screenshots:
const gotoPage = async(url) => {
try {
const page = await browser.newPage();
// Override 'fetchAccountData' function
await page.evaluateOnNewDocument(testData => {
window["fetchAccountData"] = (cb: (err: any, data: any)=>void) => {
cb(null, testData);
};
}, data);
// Go to page and get screenshot
await page.goto(url);
const screenie = `${outputPath}${uuid()}.png`;
await page.screenshot({ fullPage: true, path: screenie, type: "png" });
pageHtml.push(`<img src="file://${screenie}" />`);
next(browser, rest);
} catch (e) {
cb(e, null);
}
};
I was hoping this would be able to only make a few requests at the beginning while it saves the html locally and caches all the resources, but it seems to make a request for every link.
How can I stop it?

How do I get Laravel Echo to work on production?

I'm having trouble with Laravel Echo (I think). I've built a vue chat app that works locally.
I've even cloned it onto another machine and got it working fine. But when I get it onto production, it's not working.
I'm not running npm on the server, I'm just doing a run npm prod before committing and pushing to the server.
For some reason it just doesn't work though. The messages are getting through to pusher as I can see them in the debug console.
Here's some of the code:
mounted() {
console.log('mounted');
Echo.private(`messages.${this.user.id}`)
.listen('NewMessage', (e) => {
console.log('in echo');
this.hanleIncoming(e.message);
});
axios.get('/contacts')
.then((response) => {
this.contacts = response.data;
});
},
methods: {
startConversationWith(contact) {
this.updateUnreadCount(contact, true);
axios.get(`/conversation/${contact.id}`)
.then((response) => {
this.messages = response.data;
this.selectedContact = contact;
})
},
saveNewMessage(message) {
console.log(message);
this.messages.push(message);
},
hanleIncoming(message) {
if (this.selectedContact && message.from == this.selectedContact.id) {
console.log('inside if of handleincoming');
this.saveNewMessage(message);
return;
}
this.updateUnreadCount(message.from_contact, false);
}
}
When local I get all the console.logs, but on prod I only get one and that's because saveMessage gets called on hitting enter from the message chat window. Do I need to install something on the server to get echo to work since I'm not doing npm install on the server. I don't think node is even installed. How can I get echo to work on production? Any help would be appreciated!
Have you started echo server on production?

Sinon fakeServer with mocha and axios

I'm trying to get sinon.fakeServer to make axios return a faked response. Instead of returning the mocked payload, I can see the network request 404s or does a timeout trying to go to the actual URL.
My setup:
describe('test call', () => {
var server;
beforeEach(() => {
server = sinon.fakeServer.create();
server.respondWith(
"https://my.domain.com/myresource",
[200, { "Content-Type": "application/json" }, "[]"]
);
server.autoRespond = true
});
it('returns empty array', done => {
axios
.get('https://my.domain.com/myresource')
.then(res => {
expect(true).to.equal(true);
done()
})
.catch(err=>{
console.log(err.message);
expect(false).to.equal(true);
done();
});
});
afterEach(() => {
server.restore();
});
})
It seems that your execution environment is NodeJS, even though it's not mentioned. Others had the same issue - have a look here.
Also the Sinon team mentions that it's outside their scope since XHR are supposed to work correctly in the browser, where their fake server works as expected as it stubs the XHR object.
Axios is using a different library for making requests when running on the server, so this scenario cannot work by default. There are specific mocking libs for axios like moxios as an alternative.

Resources