We Keep Coding

How to set React app and API on same port?

I've got a React app that via an API pulls data from a separate database.
When I run it locally, the app is one port and the API is on another port.
Since when I make AJAX calls in the app to the API, I need to include the URL where the API can connect.
It works if I hardcode the separate port (e.g., the app is on http://localhost:3000 and the API on http://localhost:3100, making the AJAX url call to the API http://localhost:3100/api/trusts).
However, since the app and API are on different ports, I can't make the AJAX url a relative path because it erroneously sends the AJAX call to http://localhost:3000/api/trusts and not http://localhost:3100/api/trusts.
How do I get them to run on the same port?
Thanks!
Here's my server.js:
var express = require('express');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var path = require('path');
var app = express();
var router = express.Router();
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
//set our port to either a predetermined port number if you have set it up, or 3001
var port = process.env.PORT || 5656;
//db config
var mongoDB = 'mongodb://XXX:XXX!#XXX.mlab.com:XXX/XXX';
mongoose.connect(mongoDB);
var db = mongoose.connection;
db.on('error', console.error.bind(console, 'MongoDB connection error:'));
//body parsing
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// allow cross-browser
app.use(function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
});
// handling static assets
app.use(express.static(path.join(__dirname, 'build')));
// api handling
var TrustsSchema = new Schema({
id: String,
name: String
});
var Trust = mongoose.model('Trust', TrustsSchema);
const trustRouter = express.Router();
trustRouter
.get('/', (req,res) => {
Trust.find(function(err, trusts) {
if (err) {
res.send(err);
}
res.json(trusts)
});
});
app.use('/api/trusts', trustRouter);
//now we can set the route path & initialize the API
router.get('/', function(req, res) {
res.json({ message: 'API Initialized!'});
});
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port, function() {
console.log(`api running on port ${port}`);
});
Below is the AJAX call I'm trying to make that doesn't work because the relative path is appended to the app's port (i.e., http://localhost:3000/) and not the API's port (i.e., http://localhost:3100/):
axios.get("/api/trusts")
.then(res => {
this.setState({trusts: res.data});
})
.catch(console.error);

To tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your package.json, for example:
"proxy": "http://localhost:4000",
This way, when you fetch('/api/todos') in development, the development server will recognize that it’s not a static asset, and will proxy your request to http://localhost:4000/api/todos as a fallback. The development server will only attempt to send requests without text/html in its Accept header to the proxy.
"Keep in mind that proxy only has effect in development (with npm start), and it is up to you to ensure that URLs like /api/todos point to the right thing in production."
Note: this feature is available with react-scripts#0.2.3 and higher.
More details here: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development

node js routing with ejs res.render does not work, but res.send does

I am setting up the environment for a node js app.
But the views/ejs files are not being rendered. If i do:
app.get("/", function(req, res){
res.send('Something');
});
This works. But, if I do(having an index,ejs file):
app.get("/", function(req, res){
res.render(index);
});
It does not work, I get "index is not defined" on the cleint side in the web, but no error in the command line.
Here is the app.js:
var express = require("express");
var path = require("path");
var app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(express.static(path.join(__dirname, 'public')));
app.get("/", function(req, res){
res.send('Something');
});
app.get("/", function(req, res){
res.render(index);
});
const port = process.env.PORT || 3000
app.listen(port, function () {
console.log(`Express is running on port ${port}`)
})
IS there something wrong with the app.set parameters, or has something changed? I am following a tutorial which might be out dated, but checking the docs, I do not see an issue.
So, what is wrong here, is there a new way to do the routing with ejs? I know partials are gone now. Does this mean no ejs files at all anymore, and if so, how is it supposed to be done now? By rendering an html file?
Thanks

Well, I'm not a pro of express but here index is not defined because you write it like a variable. Try using something like this
res.render(path.resolve(__dirname + "/views/index"));

How to structure my project folder when building a secured NodeJs REST API

I am building a REST API using NodeJS and Express, powered by a MongoDB database.
I've been struggling for days now trying to get the right folder structure nailed down. So far, I can connect to my database and add new users without an API, but by simply doing GET, POST, etc. requests. I've seen several tutorials online on how to build API using node, but none of them have a more standardized way for setting their folder structure. And that is the reason why I am having such a hard time making it work given my current folder structure.
Here is my Folder Structure
app
---models
------user.js
---api.js
---routes.js
config
---auth.js
---database.js
---passport.js
public
views
package.json
server.js
Server.js
// server.js
// set up ======================================================================
// get all the tools we need
var express = require('express');
var app = express();
var port = process.env.PORT || 2016;
var mongoose = require('mongoose');
var passport = require('passport');
var flash = require('connect-flash');
var configDB = require('./config/database.js');
// configuration ===============================================================
mongoose.connect(configDB.url); // connect to our database
require('./config/passport')(passport); // pass passport for configuration
app.configure(function() {
// set up our express application
app.use(express.logger('dev')); // log every request to the console
app.use(express.cookieParser()); // read cookies (needed for auth)
app.use(express.bodyParser.json()); // get information from html forms
app.use(bodyParser.urlencoded({ extended: true }));
app.set('views', path.join(__dirname + '/views'));
app.set('view engine', 'ejs'); // set up ejs for templating
// set the static files location /public/img will be /img for users
app.use(express.static(__dirname + '/public'));
// required for passport
app.use(express.session({ secret: 'xxxxxxxxx' })); // session secret
app.use(passport.initialize());
app.use(passport.session()); // persistent login sessions
app.use(flash()); // use connect-flash for flash messages stored in session
});
// routes ======================================================================
// require('./app/routes')(app, passport); // load our routes and pass in our app and fully configured passport
// require('./app/api')(api, passport);
app.use('/', require('./app/routes')(app, passport));
app.use('/api', require('./app/api')(api, passport));
// error handlers
// Catch unauthorised errors
app.use(function (err, req, res, next) {
if (err.name === 'UnauthorizedError') {
res.status(401);
res.json({"message" : err.name + ": " + err.message});
}
next();
});
// launch ======================================================================
app.listen(port);
console.log('Live on port ' + port);
api.js
var User = require('./models/user');
var express = require('express');
var apiRoutes = express.Router();
app.use('/api', apiRoutes);
module.exports = function(apiRoutes, passport){
apiRoutes.get('/testapi', function (req,res) {
res.json({SecretData: 'abc123'});
});
}
Every time I hit the endpoint /testapi I get the error "Cannot GET /testapi"
I think my main issue is how to organize my files and folder properly and import/require them the right way. Can anyone help me figure this out?

Server.js
on this line app.use('/api', require('./app/api')(api, passport));
Here you are telling Express to use ./app/api as an middleware by passing "api" and "passport" as arguments.
where you have defined api variable ?
Lets assume its a typo.. in that case from "app/api.js" you are exporting a function and you trying to execute it in server.js app.use('/api', require('./app/api')(api, passport)); which returns undefined.
Express will be expecting a function as middleware not a return value from function.
app/api.js
on line 4 you have app.use('/api', apiRoutes); which doesn't make any sense, because api.js has no idea about "app".
Cleanup your server.js and api.js and try again
This tutorial might help Node with Express

Need help connecting node.js to angular.js

Ok I knew mongodb, node.js and very little about angular.js... and at some point I got struck, so I deliberately need help. I knew the node.js code but can't understand how to retrieve it through angular.js. Please write angular.js code how to get data from this given node.js code. If any error in my node.js code please notify me.
var express = require('express');
app = express(); // Web framework to handle routing requests
cons = require('consolidate'); // Templating library adapter for Express
MongoClient = require('mongodb').MongoClient; // Driver for connecting to MongoDB
routes = require('./routes'); // Routes for our application
bodyParser = require('body-parser');
MongoClient.connect('mongodb://127.0.0.1/blog', function(err, db) {
"use strict";
if(err) throw err;
// Register our templating engine
app.engine('html', cons.swig);
app.set('view engine', 'html');
app.set('views',__dirname + '/views');
// Express middleware to populate 'req.cookies' so we can access cookies
app.use(express.cookieParser());
// Express middleware to populate 'req.body' so we can access POST variables
app.use(express.bodyParser());
// The main page of the blog
app.get('/', function(req, res, next) {
Post.find(function(err, posts){
if(err){ return next(err); }
res.json(posts);
});
});
app.listen(8082);
console.log('Express server listening on port 8082');
});

The Post is not defined?
Maybe
var Post = mongoose.model('Post');
Then using ngResource for obtain the data from api
app.factory('allPosts', function($resource){
return $resource('/');});

Configuring 'simplest' node.js + socket.IO + Express server

Realized after setting up a simple node.js socket.IO server that it isn't sufficient to handle even the simplest webpages containing script tags.
So I investigating express which is a simple web framework for node.js.
After looking thru the express documentation http://expressjs.com/guide.html
I was still confused as to how I simply combine express with socket.IO on a node.js server.
Couple hours of googling later I came across this tutorial
https://www.digitalocean.com/community/articles/how-to-install-express-a-node-js-framework-and-set-up-socket-io-on-a-vps
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, http = require('http');
var app = express();
var server = app.listen(3000);
var io = require('socket.io').listen(server); // this tells socket.io to use our express server
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.static(__dirname + '/public'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('/', routes.index);
console.log("Express server listening on port 3000");
io.sockets.on('connection', function (socket) {
console.log('A new user connected!');
socket.emit('info', { msg: 'The world is round, there is no up or down.' });
});
My question is, would anyone reading this configure their server differently?
I don't need anything special, no session handling etc, just the ability to serve html pages containing links to external CSS and javascript files.

Remove the first app.configure wrapper but leave it's contents. It is useless in general, but especially if you don't pass an argument to it.
Remove methodOverride and bodyParser as you aren't using them

Thanks for all the replies. Finally have something that works and am posting so someone else may benefit. My first attempt(above) was obviously NOT the simplest solution:)
//npm install express
//npm install socket.io
var express = require('express');
var server = express.createServer();
server
.use( server.router )
.use( express.static(__dirname+'/public') )
.get('/api', function(req, res) {
res.write('API');
});
server=server.listen(3000);
var io = require('socket.io');
var socket = io.listen(server);
socket.on('connection', function (client){
// new client is here!
});