I am probably missing something very obvious here, but I keep getting the following error when trying to use Postgres from a newly created React app
Module not found: Can't resolve 'dns' in '/Users/tarek/test/node_modules/pg/lib'
Here are the steps to reproduce:
Create a fresh React app using create-react-app
Add the Postgres
module using npm install pg --save
Add the following line to
App.js: const { Client } = require('pg');
Type npm run start and you'll get the above error.
What am I missing here?
**Node version: v8.12.0
** package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"pg": "^7.4.3",
"react": "^16.5.1",
"react-dom": "^16.5.1",
"react-scripts": "1.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
The issue is that React apps are meant to run in the browser, and browsers can't access databases directly. Even if you did find a way to do this, it would only work locally and not in production. Consider that if the database is on your machine and your app available on the internet, there would be no way for a remote user to get access to the data on your machine in the way you are describing.
In order to use a database with React, you'll need to set up a server—possibly written in Node (with Express)—that will serve your application and data for it.
The server receives requests from different users and responds with the appropriate resources. For example if they go to your website (e.g. example.com), your server should respond with index.html for your project (in this case it would be the index.html for your React app). Then to get data from your database, you can set up an api with routes like example.com/api/model/1 so that your react app can request the instance of model with id 1 from your server, which will grab it from the database and send it over to the React app.
Look into the MERN (Mongo Express React Node) stack for more detail on how all these work together. Even with Postgres the process will be pretty much the same as with Mongo.
Related
I want to deploy a small node.js app on a PLESK-ONYX server - on which Phusion_Passenger / 5.3.5 is also running!
The following happens:
This works here:
var express = require ('express');
var bodyParser = require ('body-parser');
That does not work:
import express from 'express';
import bodyParser from 'body-parser';
The following error then occurs:
The Phusion Passenger application server tried to start the web application through a Passenger-internal helper tool called the "wrapper". But Passenger was unable to execute that helper tool because it encountered an internal error.
The stdout/stderr output of the subprocess so far is:
/var/www/vhosts/hosting13.netcup.net/mem3-s3.hxxx-3.de/index.js:2
import express from 'express';
^^^^^^^
How can one solve it?
Where is the problem?
Thank you for your help in advance!
Best regards
Markus
Hello, I have new findings in the meantime ...
my problem seems to be - that the highest-available node.js version in PLESK at the moment is 12.4!
In PLESK - i must start the node.js-App with a server.js-File - like this:
const app = require('./index.mjs');
const http = require('http');
http.createServer(app).listen(process.env.PORT);
My node.js-Version is V.12.4 so i must use esm like this:
require = require("esm")(module/*, options*/)
module.exports = require("./index.js")
How can i combine the 2 files in the right way?
Thanks a lot for your help!
Here is the content of "package.json":
{
"name": "mb-test-1",
"version": "1.0.0",
"description": "",
"main": "index.mjs",
"type": "module",
"scripts": {
"start": "nodemon -r esm index.mjs"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"dotenv":"^8.2.0",
"esm":"^3.2.25",
"express":"^4.17.1",
"mongoose":"^5.9.29",
"nodemon":"^2.0.7"
}
}
But unfortunately I haven't found yet - where in PLESK the start command for node.js can be edited!
Best regards
Markus
for using import from you should change type in package.json to module so add this code to the package.json
"type": "module"
Note: but export file is different between commonjs and module.
by default type is commonjs , check this article
you can also using babel module, update scripts in package.json like this
"scripts": {
"build": "rimraf dist/ && babel ./ --out-dir dist/ --ignore ./node_modules,./.babelrc,./package.json,./npm-debug.log --copy-files",
"start": "npm run build && node dist/app.js"
}
after that for running project
npm start
I am trying to deploy a react app and a node server to my domain http://cv-devlabs.com/ with cPanel but failing to run. Most of the time I'm getting a "server responded with the 404 error".
I have tried methods from "hosting react app and express server cpanel" and "How to deploy a react app on cPanel?" and failed at both. I'm assuming I did something wrong here.
My file structure is:
Root-Folder--
-client
--build
--node_modules
--public
--package.json(client)(content added below)
-.gitignore
-package.json(server)(content added below)
-procfile
-server.js
Package.json (client)
"name": "client",
"homepage": "http://cv-devlabs.com/vidci-vid2/",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8000",
Package.json(server)
{
"name": "vidci-vid",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"dotenv": "^8.2.0",
"express": "^4.17.1",
"socket.io": "^2.3.0"
},
"scripts": {
"start": "PROD=true node server.js",
"postinstall": "cd ./client && yarn"
}
}
This is working fine on Heroku but on cPanel, it's not. The whole project can be found at https://github.com/ConsultVerraton/vidci-vid.git
Thanks to anyone who can help and thanks to anyone who can try. Do let me know if more information is needed.
Thanks
You cannot host a node.js app in most providers working with cpanel. If you want to host a node.js app you should deploy it on a vps. You can follow this tutorial for example:
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-16-04
But in these cpanel providers, you could host a static react app (for example an app build with create-react-app). This kind of app does not need node.js at runtime. So you can build the assets and push them to your cpanel host.
You can follow this tutorial:
https://dev.to/crishanks/deploy-host-your-react-app-with-cpanel-in-under-5-minutes-4mf6
Yes you can, but it depend if the host provider allow it.
I'm actually running a express server on a cPanel account.
I didn't found the official documentation of cPanel but this is a pretty good one: How to create a Node.js application with cPanel using the Node.js Selector
If your looking to do it in command line, this the official documentation from cPanel :How to Install a Node.js Application.
I don't know about react but for anyone who wants to know how to deploy node js app to Cpanel this is a good source for him, this explains thoroughly how to deploy node js app to cpanel please check this
I'm a senior .NET developer wanting to move into MERN, full-stack. Is there a scaffolding tool that will quickly get me setup and that also supports authorization (register/login features, etc), built-in?
Express development is fairly unopinionated. As a result of that flexibility, there's a lot less built into it than there is in more opinionated framework like Rails for example.
The other thing is that since the MERN stack isn't monolithic, you'll need to set up the front and back ends independently.
The two most common 'scaffolding' tools I've come across in MERN development are Create React app and Express generator. These will get you started with a front end and a server that will run immediately, but for things like auth, you'll either need to build your own, or install packages that will handle it for you.
I've seen open source templates on Github that you can start with, but since things change so fast, I personally don't like the idea of starting off with someone else's outdated code.
Hope that helps!
For whoever lands on this page like I did.
I found two option for MERN scaffolding. The first is deprecated and the second seems to be abandoned and/or incomplete:
mern-cli (http://npmjs.com/package/mern-cli) (DEPRECATED)
mern (http://npmjs.com/package/mern) (ABANDONED)
My solution was to keep my React UI and Express API on separate directory, say "ui" and "server", in my project's root directory.
Then I use the cors module (http://npmjs.com/package/cors) to handle cross site resource sharing for development environment only, so that my react app can talk to my express server, which is running on a different port during development, like this (in server.js)
const cors = require('cors');
if (app.get('env').trim() == 'development') {
app.use(cors());
}
For production I just run a batch script that copies all the files from my ui/build directory to server/public directory after the react build process is complete. The scripts section of my package.json looks like this:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"postbuild": "copy-build.bat",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
And the content of batch file reference in the postbuild key is
xcopy "build\*" "..\server\public" /s /y
If you prefer or have to use a bash script instead you can make a copy-build.sh file with the content
cp -r build/* ../server/public
I have a node app which in development is usin 2 servers one for my node side and another for my react side. I am running this using a line in my package.
"scripts": {
"start": "node app.js",
"server": "nodemon --inspect-brk app.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
when I run npm run devit all works, however when I run node start the server starts running however when you go to the / root url it gives a 404 status error. I assume that's because the app doesn't know where to look for the index.html file or how to kick off the app though I could be completely wrong.
my folder structure is:
As you can see my client folder holds all of the react stuff. the src is the uncompiled react and the build holds my actual index.html fil along with the static folder which holds the compiled react stuff :
so how do I get that to actually work or point me in the direction to look? I guess i've been spoiled with most apps just knowing out of the box how to do this.
UPDATE:
so i have 2 routes currently setup
//initiate route handlers
app.use('/login', require('./routes/authRoutes'));
app.use('/tiles', require('./routes/tileRoutes'));
inside of /login I have for example
router.get('/', (req, res)=>{
some code here...
}
however going to either of those, so if I navigate to localhost:5000/login, I still get a 404 error
If I understand this correctly it works when I run npm run dev because 2 serves spin up. the one server handles all my node code and the second handles all my react code. However I don't want to run 2 servers as my deployment to heroku definitely won't. So how do I merge to 2 so to speak?
Use express.static() function to host static files on your express server. See more here: https://expressjs.com/en/starter/static-files.html
When Openshift creates a Node.js cartridge it includes a version of Express 3. My app is an Express 4 app and fails to start under the default Openshift setup. Even if my app's package.json has the line "express": ">=4.9.0" in dependencies.
4.9.0 happens to be the version that is embedded in my app's project but is ignored by Openshift when started there. So apparently I need to update Openshift's version to 4. I can confirm that the app works as designed and intended on my local computer.
How do I update Openshift's Express, which is outside the app, from version 3 to 4 ?
I made sure that my /package.json includes something like this under dependencies:
"express": "~4.11.1"
Personally, I retired my /bin/www content by removing that out of /package.json:
...
"scripts": {
"start": "node server.js"
},
"main": "server.js"
}
...and migrated much of /bin/www back into /server.js.
That seemed to be the only way I could get Express4 to work on OpenShift.
/server.js needs a shebang a the top "#!/bin/env node"
/package.json gets the mod above
I've got my Express4 app running now with MongoDB support. Seems to be happy. Pushes/builds/logs success.
Which works for me is:
"main": "./bin/www",
"scripts": {
"start": "node ./bin/www"
}