I have a web app. Back end with node and front end with React. Setup (simplified) goes like this:
index.js (the server)
client
package.json
The client
Now, the client folder contains a front end web application, its contents are basically same as what you get when you type create-react-app.
Inside client there is a build folder which I created by running npm run build from within the client folder.
Server
Now, the index.js from my main folder acts as the node server, inside it I have a line like:
app.use(express.static(__dirname + "/client/build"));
Using this approach I have merged my node server and a client front end application (located inside client folder). You can see I told the server to serve files from the client/build.
All was working fine, till I encountered this.
If I click a react button in my client app which manually calls my router using say:
this.props.router.push('/listmovies');
it correctly shows the page.
But if I type same page in URL address bar and hit ENTER I get error:
Cannot GET /listmovies
The latter error I am pretty sure comes from node server. Because there is no listener for listmovies in index.js (and there should not be). You see basically I think node is intercepting the call and giving me an error. Whereas in my former case where I called router.push I get a correct page.
I hope I managed to explain my problem. Can someone help how to solve this issue?
You have to make the express application redirect all requests to the main React file so react-router can take over. Something like this below the app.use.
app.get('*', function(req, res) {
res.sendFile(__dirname + '/client/build/index.html')
})
This basically handles all wildcards and points it to the index.html. Mind you if you are also implementing API routes on the express app have them above this wildcard statement because otherwise it will intercept them and treat them as client side react-router routes instead of server-side API routes.
Related
I am (very) new to node.js and I am trying to get a development environment started with React.
const express = require('express')
const mongoose = require('mongoose')
const app = express()
// this displays the index.html file
app.use(express.static(__dirname + '/public'));
// trying to see the app.js
app.get('/', (req, res) => {
res.render('app')
})
app.listen(process.env.PORT || 5000);
Right now I am simply trying to be able to view my app.js when I run nodemon. But right now it is only showing the index.html file in the public folder. and when I run npm start it renders both the index.html and the app.js.
I am 100% doing something wrong and am not in my element here. Any help/advice would be appreciated.
My full repo is here for viewing here
Thank you in advance.
Your code is simply serving a static HTML file located in the public directory everytime the user make a GET request to the root (in your case, localhost:5000). It is not interacting with React yet.
Usually when starting a project with React (frontend) and Node (backend), you would create them as separate projects, in separate repositories.
So you could create a React application using a bootstrap such as create-react-app running on PORT 3000 and in another terminal tab, start your NodeJS application in PORT 5000 like in your example. Then, you can call your backend endpoint from your frontend React application, by referencing http://localhost:5000
By doing this, your backend code don't need to serve static files anymore, it can return data such as JSON and make connections to a database for example.
Since your question is not specific enough, you could be talking about server side render. In server side render apps using Node and React, you have a frontend built with React and a Node server that will return the same React code as a string, using the react-dom/server package to help. This is more complex, but basically you will have the same React code on the client AND on the server. There are performance benefits, because the user can see some content rendered right when he enters the page, without having to wait the React bundle (javascript file) to load. If you want to know more about creating a server side render app with React and Node, there is a nice digital ocean tutorial here
If you want to connect your react js project to the node js
In Development
you simply run their server and start it
In Production
You can use sendFile function coming from express.js to run the frontend
https://dev.to/loujaybee/using-create-react-app-with-express
I head to create Nuxt SPA with routing and mb API in future like that:
Backend server (on express or smth else) listen and on request give entire SPA to client.
Now user can use everything on client side (include routing) with no more else requests to backend (mb API requests only)
It means that server should give some .html file with js and css files as SPA and it will work on client side.
I tried to run some commands like nuxt build and nuxt generate
It looks like they return a same result - js files couldn't be found
And index.html file doesn't work properly
After some researching I found a solution
But now I got this:
It can't open the fourth js file in another js file. Path isn't right!
Every time I tried to run it as a static html file and from localhost (and also with using Live Server)
I think I did a lot of crutches and there should be another built-in function or feature that allows us to do what I want
I wrote a lot - if I made a mistake or you didn't get smth - please, ask! I need any help
To test your locally built application, you need to serve all files within the generated /dist folder. You can setup very easily a local web server using Express/Node.js as you already have Node.js installed when running Nuxt. Create a new folder and install express via npm (run npm install express).
Then, copy everything from /dist into /public and create a file server.js:
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/public'));
app.listen(3000);
Run the web server with node server.js and you can access your generated files on http://localhost:3000.
I'm developing a simple app with nodejs. The thing is that the first thing I do is to run a server.js file which loads an html form and checks if the entered information is valid.
After authentication, I'm planning to run another server.js (starting it from the original server.js file) in a subfolder for starting the real application.
Is this possible?
Definitely, check out child_process.spawn.
child_process.spawn("node", ["server.js"]);
process.exit(); // ends auth server
While attempting to migrate from Meteor 0.8.3 & IR 0.8.2 to Meteor 0.9.3.1 & IR 1.0.0-pre3 I'm running into a problem with RouteControllers.
I have the following js in the '/both' folder of the project:
Router.route('scene.index', {
path: '/',
controller: 'SceneController'
});
And the SceneController js in the '/client' tree:
SceneController = RouteController.extend({
template: 'SceneView'
...
});
When attempting to access the route from the client, I get the following error:
Error: RouteController 'SceneController' is not defined.
at resolve (packages/iron:router/lib/route.js:94)
at Function.Route.findControllerConstructor (packages/iron:router/lib/route.js:116)
at Function.Route.createController (packages/iron:router/lib/route.js:134)
at Function.Router.createController (packages/iron:router/lib/router.js:181)
at Function.Router.dispatch (packages/iron:router/lib/router_server.js:66)
at Object.router (packages/iron:router/lib/router.js:15)
at next (/Users/pward/.meteor/packages/webapp/.1.1.2.1m8ln9s++os+web.browser+web.cordova/npm/node_modules/connect/lib/proto.js:190:15)
at Function.app.handle (/Users/pward/.meteor/packages/webapp/.1.1.2.1m8ln9s++os+web.browser+web.cordova/npm/node_modules/connect/lib/proto.js:198:3)
at Object.fn [as handle] (/Users/pward/.meteor/packages/webapp/.1.1.2.1m8ln9s++os+web.browser+web.cordova/npm/node_modules/connect/lib/proto.js:74:14)
at next (/Users/pward/.meteor/packages/webapp/.1.1.2.1m8ln9s++os+web.browser+web.cordova/npm/node_modules/connect/lib/proto.js:190:15)
After a little quality time with node-inspector, I've come to the conclusion that IR needs client-side RouteControllers to be visible on the server.
My route controllers currently set session variables and I'd prefer not to sprinkle Meteor.isClient around. Is this an IR bug or a known breaking change?
My route controllers currently set session variables and I'd prefer
not to sprinkle Meteor.isClient around. Is this an IR bug or a known
breaking change?
You don't need to guard your controller code with Meteor.isClient because it's going to be executed only in the client side even if it's declared in the shared folder.
Your route definition is better written like this in iron:router#1.0.0-pre3 :
Router.route('/', {
name: 'scene.index',
controller: 'SceneController'
});
name/path have switched their position.
EDIT :
As far as iron:router concepts are concerned, please read this :
http://eventedmind.github.io/iron-router/#client-and-server
Having routes defined on both the client and the server is mandatory to determine what needs to be done.
Client-side, if a link to a client route is detected then we can navigate to it using the HTML5 pushState API, if a server route is detected then standard HTTP communication takes place (for example I use server routes to provide downloadable resources in my app), if the link corresponds to no known path to the router, then an error is triggered.
Server side, it's important to know about client routes to send 404 on unknown paths instead of serving the Meteor app, here is a quote about this from the official guide :
It also means that on the server, if there is no client route defined,
we can send a 404 response to the client instead of loading up the
Meteor application.
Yes, I've always placed my router.js in the shared common code, which is any folder not named server/ or client/.
I know there are a bunch of questions on this already, but none have answered it for me, and plus mine is slightly different.
I'm starting the socket.io server in node using this:
var io = require('socket.io').listen(8000);
My terminal says everything is ok:
info - socket.io started
Now I am trying to load the .js file in my clientside browser using this url:
http://<hostname>:8000/socket.io/socket.io.js
I dont get a 404, it just hangs forever. I've also used a network utility to ping port 8000, and it seems to be open fine.
I installed node and socket.io just yesterday, so they should be the latest versions. Can anyone shed any light on this? Thanks!
Turns out the reason I could never request the .js file was because my company network blocks all ports except the usual ones (80, 21, etc), so `I would never be able to communicate with port 8000.
Use express.js. Place the socket.io file in public/javascripts folder and add this line to your html
<script src="/javascripts/socket.io.js"></script>
I think this is the best way. When you're writing http://<hostname>:8000/socket.io/socket.io.js
node tries to find a folder named socket.io in your project's public folder. And the file socket.io.js in it.
If you don't want to use express.js you should catch the request and try to load a file if no routes were found for your request (what actually express does) because node doesn't know what to do for requests which don't match any routes in your server.
And I recommend to use the socket.io.min.js file (it's smaller and it's in folder node_modules\socket.io\node_modules\socket.io-client\dist)
You have to start an http/https server to access it via http/https. Simply starting an socket.io server won't do. Do the following:
var http = require('http');
var app = http.createServer(),
io = require('socket.io').listen(app);
app.listen(7000, "0.0.0.0");
Then I can access the file http://localhost:7000/socket.io/socket.io.js
sockets.io uses websocket protocol (ws://). See the wikipedia page.
You need to get at least 3 pieces working together.
Serve some HTML (/index.html will do just fine) so there's a web page. This file should contain the socket.io client <script> tag. For this you need the http server portion of the starter examples. You are missing this and that's why browsing to your server just hangs.
Serve the socket.io client. Socket.io will do this for you automatically when you pass in your http server function to it. You don't need full express as this can be done with just node's http module as per the first example on the socket.io docs.
Some javascript to actually do something with the socket. This can be the content of a <script> tag in index.html or a separate file. If it's a separate file, you need to set up your http server to actually serve it.