Develop Reference

How to create a react-redux app with node server as backend?

I am trying to create a react-redux app using node server as backend. Is it possible to make the node server serve the react-redux app instead of running react-redux using dev server a=in one port and node on another port?
Need some idea to start with. Thanks in advance:)

Yes.. it is
you can serve you react app on '/'
and listen for API request in another route
so you don't have separate codebase for the react app and the api backend code
You can use express to serve the react app on a particular route
i.e my-app.com/
then serve backend related content on another route
i.e
my-app.com/api
so when a request is made to my-app.com/ express serves express serves backend resource or API

There are a few steps I take when creating an express/react app together. I'll create a server and a client directory. The client dir is created with create-react-app and the server can be created via express-generator for example. My project dir (the one that contains both of them) is basically just glue that melds the two together. In the client app, I'll add proxy:localhost:3001 (or whatever port your express api is running) and I use concurrently to run both servers (client and server - as client is being run by webpack-dev-server) at the same time. They run as separate servers during development, but when I make an api call, it's as if I'm making it directly to the express server itself.
The only other thing to worry about is deploying the application. You can use the build command that comes with create-react-app and copy that over to the public directory in your express application that is served up via express.static.
Here's a quick example to take a look at:
https://github.com/overthemike/heroku-skeleton

This is an useful doc for redux SSR setup. This helps avoiding running client and server at two ports.
Redux SSR

Applying node.js server to a web server

I am trying to learn how to use Node.js and web sockets to create simple multi-user interactive javascript programs. I used this tutorial series by Daniel Shiffman to create this example project. My next step would be to upload it, using WinSCP, to my RaspberryPi apache2 web server, but I haven't found a way to edit the code in a way to allow for that to work, and furthermore, I do not know what piece of the programs to execute to make it function properly.
Any assistance would be great. The extent of my Node / Socket.io knowledge comes entirely from the video series mentioned above, so you can assume I know almost nothing else.

Apache is a web server and it serves your file and send them to client for you, so when you have some client side things like html site with some css, javascript and images you can use apache to send them to client for you.
In node.js you can create this web server simply by following code and express library:
// Create the app
var app = express();
// Set up the server
var server = app.listen(3000, () => {
console.log('http server is ready')
});
as you created in your code too. by this web server you can host your files and do many more things like setup socket.io server and ... because you write web server yourself. with following code you serve static files in public directory (html, css, javascript and images ...):
app.use(express.static('public'));
after you finishing this process you can run it simply by:
npm install
node server.js
if you want you can run you code inside docker by creating Dockerfile and ...
About your question, you must move all your project files into raspberry and at the end you have following directory tree in somewhere in raspberry:
|- server.js
|- package.json
\ public
at this directory run above commands and your server will be up and running and you can access to it by http://raspberry_ip:3000.

client - server architecture structure (with node js) - where to put the index.html file?

I have built a server client app (nodejs - on the server, angular - on the client).
I used to have all my code in one project (one folder) but then I figured it makes more sense for me to divide it, by logic, to a server folder and to a client folder.
I aspire for disconnecting all of the dependencies between the server code and the client code, in the sense that each side can stand alone by its own.
Questions:
where do I put the index.html?
it is obviously related to the client side but the server (expressJS) is loading it when the server.
lets says I put this index.html file in the client folder like in the picture below..
how can I make the server.js be aware of it?
this code doesn't work:
var app = express();
app.use(bodyParser.json());
app.use('/',express.static(__dirname));
app.use('/scripts', express.static(path.join(__dirname,
'node_modules')));
app.get('/', function (req, res) {
res.sendFile(express.static(path.join(__dirname + '../client/index.html')));
});

Usually with express apps, you would have a "public" folder that contains your client assets, index.html being one of them.
app.use('/',express.static(path.join(__dirname, '/public')));
then, run the node server, open a browser and point it to that server and express will serve up "index.html" from the "public" folder.
Steps to fix
Rename client folder to public
Drag public inside server folder so its like server/public
change app.use('/',express.static(__dirname)); to app.use('/', express.static(path.join(__dirname, '/public')));
Please note: app.use('/',express.static(__dirname)); should be avoided, you're serving up your whole server directory to the public.
If you want to have a better look at project layouts.
Have a look at yoeman.io, specifically it has project templates for express.
http://yeoman.io/
Yeoman helps you to kickstart new projects, prescribing best practices
and tools to help you stay productive.

var app = express();
app.use(bodyParser.json());
app.use('/',express.static(__dirname));
//it will serve all files in client directory under the '/' route
app.use('/', express.static(path.join(__dirname, '/client'));
});
//and the client side scripts installed through npm will be served under '/scripts' route
app.use('/scripts', express.static(path.join(__dirname, '/client/node_modules')))
It will be good to serve the client side modules in separate folder i.e. to have node_module folder in the client directory as well, there you should install all modules which should be load from the client side. Besides this the client folder seems public, so it is worth to serve the whole folder.
If you want to install modules for client side then go to '/client/node_modules' directory in the terminal and run the npm. So if you are linux, then:
cd client/
npm init
npm install YOUR_DESIRED_MODULE
In case of modules for server side install modules in your root directory

Basic Locally Hosted Web-server Functionality

I am working on an addition to a project to create dynamic HTML reports from data that is stored in a SQLite database. Initially, I tried to do everything client-side using things like browserify and sql.js, but I ran into a lot of issues trying to read from the .db file locally.
For that reason, I have now decided to spin up a very basic web server that will be locally hosted. Essentially, I want the user to be able to navigate to http://localhost:3000 and hit a landing page which is the home page of the report.
I have set up a very basic HTTP server using express with the following code running in node:
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(process.env.PORT || 3000);
This works fine, and exposes the /public directory on port 3000, which has a placeholder index.html as of right now. My problem is, that when I try to start adding my code that reads from the SQLite database, none of the necessary require() functions work (specifically, require('fs'), due to it not being defined.
At a basic level, my question boils down to this:
How can i have the ability to read from the SQLite database file in the HTML/Javascript pages that live on the webserver? Whenever I try to use the necessary functions, it tells me that require() is not defined, or other similar errors.
Any help would be appreciated.

Point domain to node express server on Azure

This must be an extremely common problem. I've seen various answers for this but none seem to work for me.
I have node installed on an apache server on Windows Azure. My app is built and ready to go (snippet below):
var express = require("express");
var app = express();
//example api call
app.get("/api/example", function(req, res){
//do some process
res.send(data);
});
app.listen(8080);
console.log("App listening on port 8080");
Now, when testing on my own computer, I could then go to localhost:8080, which works great. But now I've put it on the azure server I can't get an external domain to point to it properly. So for example, I have the domain:
framework.example.com
I've added this to my hosts file in Azure:
XXX.0.0.01 framework.example.com
Initially I tried also editing the http-vhosts.conf to point the domain to the correct directory. This worked for loading the frontend, but the app couldn't talk to the backend. API calls returned 400 not found errors.
I've also tried an Express vhost method but think I'm doing it wrong and don't fully understand it. What is the correct method?!
My app structure is like this:
- package.json
- server.js
- server
- files used by server.js
- public
- all frontend files
So to boot the server I run server.js which runs the code at the top. The server.js uses the below Express config to point to the public folder.
app.use(express.static(__dirname + "/public"));

Adding it to the hosts file in Azure won't help. You'll need to configure your domain's DNS to point to Azure. I'd recommend using the DNS Name of your Cloud Service instance. Your underlying VM IP address could change if you need to stop it for some reason, but your Cloud Service DNS name is configured to always route to your underlying VMs. That means you'll need to setup a CNAME with your DNS.
Read more about that here: Cloud Services Custom Domain Name
Next, you'll either need to host the node app on port 80, or put a proxy in front of it to handle that for you. Otherwise you'll be stuck typing framework.example.com:8080 which is not ideal. On linux, you'll likely need to be a privileged user to host on port 80, but you never want your node app to have root privileges. You can use authbind to work around this problem.
See an example of how to use it with node here: Using authbind with Node.js
All that being said, it seems like you're somewhat new with linux server management. If that's the case, I'd strongly recommend trying to use something like Azure Websites instead of a VM. You no longer have to manage the virtual machine OS. You simply tell it to host your application and it takes care of the rest. If you're using github, this is incredibly easy to test and iterate with. It does host on Windows under the hood, and that might problems for some applications, but I host all my node sites there (developed on Mac) without any issues.