Heroku deployment for React app getting a 404 - javascript

I've made a react project that uses nodejs, graphql, apollo, express, and mongo DB.
I'm struggling to get it deployed through Heroku.
first, when I deployed it, it failed and said I needed to add a build pack. I've gone through and gotten an idea of what buildpacks are. However, I'm more vague on if I need multiple buildpacks for my application. So I've added both a nodejs buildpack and a create-react-app buildpack. This is the furthest I've reached as it deploys with a 404 error.
One thing to note is that that the nodejs buildpack requires a package.json file in the root folder, though mine were both in my client and server folders. Not sure if I structured it wrong? So I went ahead and npm init in the root folder to create a package.json not knowing if that's an adequate solution.
I've checked the Heroku logs and getting a few errors it seems:
herokulogs
I've also read somewhere about maybe needing a profile? which is not something I entirely understand yet.
As you can tell, I'm new to this and still learning a lot. I'm hoping someone can point me in the right direction as I'd like to see this thing through. Please let me know if you'd like to have access to my codebase.
Thanks

It seems, that npm start throws that error. How did you defined it in your package.json and can you execute it on your local machine?
Have you read the documentation for the Node.js Buildpack?

I'm assuming that you are using one heroku server for both front-end and back-end.
If so, they must be separate.

Related

Hosting NestJS app on Phusion Passenger when hosting provider expects app.js file

I am currently working on a project related to my university and I would like people from my organization to be able to see my progress. My hosting provides the ability to run Node.js server, however it's refering to the app.js file which NestJS project doesn't have as it's being run through the command line (npm run start). Is there any way to run such application, for example by creating an app.js file which would be able to run the command?
Thank you for any assistance with this case.
PS. Server is running Phusion Passenger.
Phusion Passenger error message
If the server expects an app.js file and can't be customized to use something else, then you could have an app.js in your root directory that requires('./dist/main.js') and that's it. This would mean that your hosting service has to build the typescript code to javascript first, but that's hopefully something supported. If it isn't then you can do
// app.js
require('ts-node').register(); // you can pass extra options here
require('./src/main.ts');
It's not something I'd immediately recommend, but it would make the project runnable.

Module not found: Error: Can't resolve 'dns' when using MongoDB

I'm new to Reactjs, Nodejs and MongoDB. I'm currently trying to change Mediums snowflake tool to store users scores in a database. I have installed yarn, mongodb and mongodb-core through npm. It is a single page web application which is what I think is causing me trouble. I add
var MongoClient = require('mongodb');
To SnowflakeApp.js and encounter the following error:
Module not found: Error: Can't resolve 'dns' in
'/home/mlAHO174/snowflake/node_modules/mongodb-core/lib'
I've tried googling this error and have discovered it could be a range of things. I'm not sure if it is because React is front end and I'm trying to alter back end or because mongoDB is installed incorrectly. I'm new to this so would be grateful for help!
DNS is a core module of Node.JS. Telling people they need to install DNS via NPM will end up with them having a completely different module that does something else.
https://nodejs.org/api/dns.html vs https://www.npmjs.com/package/dns
This error most likely means you are trying to do something from the client-side that needs to be done on the server-side. If MongoDB module can't find the DNS component, it's running on the client-side.
MongoDB has to run on the server. In order to access data from React dynamically you'll need to set up an API using something like Express or Apollo.
Update:
A great way to do this is with Azure Functions (TypeScript) or AWS (Lambda) functions
For anyone who encounters this Error while importing the clientPromise (like in the with-mongodb template):
Make sure you're in the /pages/ directory!
It won't work in other directories like /components.
(and you should take a break or get some coffee...)
The problem is that you are trying to connect to the database from the front end. If this were possible that would open up a whole world of security issues. You need to set up your database connections on the backend and then have the front end make requests to the backend to handle the database.
I solved this by installing and using 'bson' instead of 'mongodb' for the client part of the code. 'bson' has a tiny bit of what 'mongodb' has and it might have what you are looking for. 'bson' is built for the browser.
In my case I needed the "ObjectId" in the browser and pulling it in from 'bson' did the trick as I didn't want to reference 'mongodb' because of the error described in the OP.
The other answers are also correct depending on why you're getting this error.
I think - mongo package is meant to be run on servers only, not in the browser.
It does not work in Next.js pages file components too, but does work in getStaticProps, getServerSideProps, getStaticPaths etc - because they run on the server, not the client.
Alternative - use Firebase Realtime database, you can access it in client-side code too. Example - a website (say a React app) that is hosted on GitHub pages or some other static server, but doesn't have a web app server (aka backend).
welcome to stack overflow.
You need to understand and learn few basics of web-applications. There's frontend, backend and a layer between them and a layer between backend and database. Frontend includes react.js, angular.js or anything else that is on browser. Backend is used to take request from frontend, providing API's to frontend and ask for data from other API's or database. Database includes sql, no-sql.
The error you are facing if of a NPM module mongodb-core.js. Either it's not installed properly, or installed using wrong version of module which is not comparable with your node version, or wrong version of NPM, or module using another NPM module which is not installed.
The issue in your case is mongodb-core uses a module dns which is not been installed. Try to install dns with npm i dns. or remove and install mongodb-core again.

Problems with create-react-kotlin-app and backend

Question
I want to deploy my application on the server in production but I am struggling to do so.
When I use npm run build to produce an "Optimized" version of the app and launch it with serve, it doesn't seem to use the proxy.
Going back to the dev server with npm start, I get this error:
TypeError: Kotlin.defineModule is not a function
I cannot get out of this. Has someone got a similar configuration? How did you make it work in production? Do you use something to proxy the requests to your backend?
App configuration
Frontend:
Web app using create-react-kotlin-app in kotlin, react. It's on localhost:3000 (dev-server) and has a proxy to localhost:3001 (the backend).
Backend
Backend, which is a simple express router for auth and data managment from the database.
Thanks in advance
I'll go back and answer my question,
One is a bug on their side:
https://youtrack.jetbrains.com/issue/CRKA-66
I'm using a config that maybe is not ideal:
I copy the build folder that contains the optimized folder into the backend and I serve the main view "index.html" as an entry point using sendFile().
I then use the url and args to route the user into various react components pages, maybe in the future it's best to switch to: https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-react-router-dom
according with the repo documentation, if you are getting Kotlin.defineModule is not a function you would need to run:
rm -rf node_modules/.cache

Netbeans project - Node.js: Node must be a valid file

I’ve just created my first Node.js application in Netbeans. I mean, this is a brand new project. I haven't done anything and I’m already getting an error. Maybe there is a step to configure this or a file to create or something to install but I've googled for information to no avail. I guess this is just too basic, because I couldn’t find anything out there to help.
What does this mean and how can I fix it?
Duh! I found it. For some reason the Node path and the npm path were defaulting to Program Files (x86) and nodejs was installed in Program Files. I feel dumb.
Plus, as soon as I fixed it, all other new projects were fixed.

MongoDB setup with node.js: Error: failed to connect to [localhost:27017]

I am getting the error:
"failed to connect to [localhost:27017]" while trying to follow this tutorial.
I've been attempting to do several other node.js tutorials with mongoDB over the past few days, and each one runs into similar problems.
The other solutions I've found surrounding this all involve people not having the server running when trying to connect. I have mongod running in a terminal window, can view the info in the browser at localhost, and have added and viewed records to the database through the mongo shell. All of that appears to be working. The breakage seems to be in connecting any of the node.js projects to the database, but being pretty new to this, I am not even sure where to begin troubleshooting.
RESOLVED: very stupid mistake on my part. The file suggested by Neil below (view here was instrumental in helping me to troubleshoot and find the problem, though.
needed to change the line
mongoose.connect('mongodb://localhost/MyApp');
to
mongoose.connect('mongodb://127.0.0.1:27017/test');
in the server.js file.
Additional note: for reasons I don't quite understand, specifying the address as 127.0.0.1: works, but localhost: does not.
Just for my curiousity, can you do
npm install mongoose
and also post the output from
ps -ef | grep mongod
All on the the machine you are running node from. That would go a long way towards the rest of an answer.
Also follow the simple sample code right after here, substitute the database name and a collection name and run that on node
node sample.js
Edit your post to include more information. It will all help.
just start mongo server
or run on mongo.exe and type
mongod
then
mongo

Categories

Resources