Deploying Node.js, React.js, Express, and Socket.io Application on Heroku - node.js

enter image description hereSuccessfully deployed to Heroku and most of our application is working. However, our socket.io pieces (chat, view online users, game updates) are not functioning. We think this may be due to having an instance of socket initialized in the Board.js component and also in the App.js file but not sure if that is the issue or how to resolve.
GitHub: https://github.com/sranney/checkers
Heroku App: https://afternoon-thicket-28146.herokuapp.com/
Any help is greatly appreciated Photo1 1: Server Config for Http Server Photo 2: Shows Proxy Photo 3: Configuring socket in app component Photo 4: Importing socket into app

It looks like you are missing an io.connect statement in your server.js file. Check out this video (https://www.youtube.com/watch?v=y5tRiFJuNOs) along with the source code in the description.

Related

cannot read properties of undefined (reading'errors')

enter image description here
I'm new to full-stack development.
I'm running my application on localhost, node.js for backend, react js for front-end, and MongoDB
everything is connected to the localhost when I try to login from the admin dashboard this error is shown any help
the error.networkError.result value is undefined, so there is no there is no undefined.errors try console.log(error.networkError) and go through the keys maybe also console.log(Object.keys(error.networkError))

Make a logger for Node Js

I have a project in Node Js, which executes the project on port 3000 and I access from ngrok with my browser to said localhost port, and it executes a server on port 3001 to make requests to a Maria database db. The project is done in react and the server with express.
I want to save the application logs (errors, warnings, etc.) in a log file so that I can see them whenever I want.
My intention was to use winston, and while I have no problem on the server side (3001), when I try to adapt it to the main project, I get an error that it cannot save files (the reason that appears is that it runs from the browser, and you can't create such a file because you don't have access to the project folders)
Can anyone give me some advice? Am I wrong to use winston, and should I use another?
Greetings and thanks
I've never used winston before and I couldn't find anything online about your error. In the past I've always just used node's fs module to create a log of errors and restarts.
const fs = require('fs')
Node's File System Documentation: https://nodejs.dev/learn/the-nodejs-fs-module
Short YouTube Tutorial: https://www.youtube.com/watch?v=U57kU311-nE

Accessing user uploaded images in a deployed MERN app

I am a relatively new developer and I have made a personal blog app, where a user can create a post and upload an image to use as the thumbnail for that post.
So far the backend and frontend work brilliantly and I am able to get the image, store it locally in a folder on my machine, store the file path in MongoDB and then access it and display it in the UI accordingly.
Now that I'm looking to finally deploy my application I have to figure out a way to upload images to an online cloud storage or something, where I can access them from my frontend as well.
Any suggestions on a good service of this kind and if possible, something free, suitable for my small project? Or any suggestions on an alternative way of dealing with this situation?
Any advice will be greatly appreciated!
Thanks in advance!
NOTE: I plan on deploying my app with Heroku, so if you've ever dealt with this issue directly using Heroku, please share your experience.
Yes, I have several apps that do just this! Sign up for a free MongoDB Atlas account and then you can store the data on their servers and point your Express app to the connection URL. Basically, they will give you a URL like this:
mongodb+srv://your-cluster-name:a232dfjoi39034r#atlas-free-cluster-czaoo.mongodb.net/blog-app?retryWrites=true
Which you can then store in a .env file like this:
MONGODB_URL=mongodb+srv://your-cluster-name:a232dfjoi39034r#atlas-free-cluster-czaoo.mongodb.net/blog-app?retryWrites=true
And access from your app like so:
mongoose.connect(process.env.MONGODB_URL, connectionOptions)
.catch((err) => {
console.log('Error on initial DB connection: ', err);
});
You'll need to load the .env files in your app using an npm packages such as dotenv on the development side. For heroku, you can use the heroku-cli
and set any environment variables for your app like so:
heroku config:set MONGODB_URL=mongodb+srv://your-cluster-name:a232dfjoi39034r#atlas-free-cluster-czaoo.mongodb.net/blog-app?retryWrites=true
Note, the development MongoDB URL could be a connection string to a local instance, such as:
MONGODB_URL=mongodb://localhost:27017/my-blog-app
And the one for heroku can be the MongoDB Atlas cluster.
There are a few other config things to do for Node apps, like having a 'start' script in package.json, which for Express apps created with express-generator looks like:
"scripts": {
"start": "node ./bin/www"
But for your case may be different. It should point to whatever file is the entry point for your server.
You'll also need to set the PORT from process.env.PORT, which heroku will set on their end, and on your end you can just default to 3000:
const PORT = process.env.PORT || 3000;
app.listen(PORT);
If you have any questions, feel free to PM me or just ask here and I can elaborate further. It can be intimidating the first few times, but it's actually really easy to deploy stuff to heroku this way once you get the hang of it! You can also check out the heroku docs for deploying Node apps.

Using websockets (socket.io) for sails 0.10.x

I am developing a node app on sails, my app needs to do regular exchange of data between server and client
The SailsCast video demonstrates the process for sails 0.9.x, and the mentioned files are not present in Sails 0.10.x
Also the sails doc says we should be using sails.socket instead of sails.io as the later will be deprecated in coming versions
Can any one help me in exchanging data between server and client through sockets. I have done it through node but with Sails MVC, i am not sure how to put the pieces together.
Any reference link or suggestion will be of great help
Thanks
I had the same trouble. You may want to check SailsSocket doc.
If you are loading sails.io.js in your page and haven't changed the default
io.sails.autoConnect to false, then a WebSocket should be created for you.
You can access it via io.socket
Create e.g. assets/js/dependencies/app.io.js with:
io.socket.on('connect', function socketConnected() {
console.debug("This is from the connect: ", io.socket);
console.debug("WebSocket is connected:", io.socket.isConnected());
});
Make sure to load this file after sails.io.js (See pipeline.js).
Open you browser console and double check.
Also check SailsSocket methods
Hope this help you get started

Error binding socket on heroku , not sure about using express

this is my first node.js and socket.io application , i didn't use express ,I want to deploy the application on heroku do i need to use it ? i mean i just did npm install socket.io on localhost and in my server file i.e game.js i have io = require("socket.io") and socket = io.listen(Number(process.env.PORT)) only and in one of the files where from where i am sending the message i have socket = io.connect();
so please tell me if i need to use express and how show i modify my existing application ?
I have given the link to the source of application
( https://github.com/bitgeeky/herokutest )
Although the Application works fine on localhost by changing the port no , to some port no like (8000) but Heroku error log on doing "heroku open" is http://pastebin.com/MtB0z5vQ
I noticed that you haven't created a http server. I am assuming that you are creating a web application, since you are deploying to heroku. For that, you need to create a http server in nodejs.
Go through socket.io https://github.com/LearnBoost/socket.io
Also http://socket.io/#how-to-use
This should get you started
Note: You do not need express. But it will make your work easier in many ways. Depends on the type of application that you want to create.

Resources