I have a MEAN project using Angular 2. I have an Angular RouterModule on the client. What I want to do is making Angular router the primary router and using express router only for some api like "/api/login".
For example, if the user wants to see the products and type "www.example.com/products", Angular router will be responsible for taking the user to this path.
However, in my project, Express router trying to navigate to this path and it gives 404 Not Found error.
How can I say to the Express: "You are responsible for the requests like /api/login, /api/logout, etc. If the request is something else, do nothing and leave it to the Angular."
Related
I'm learning about Axios, Mongoose and Express and have come across the following issue. I am working on one schema that needs to have 2 different get requests accessible for when i need them. problem is that when i call the route with attending it still executes the route with info. How can i target the attending route on the backend correctly?
FRONT END
//finds a users info using findOne
axios.get("/api/user/" + info); //info is a variable
//finds a users info
axios.get("/api/user" + attending); //attending is a variable
ROUTES FILE ON BACKEND
router
.route("/:info")
.get(UserController.findOne);
router
.route("/:attending")
.get(UserController.findOneAndUpdate);
I have also tried changing the routes like below but still it hits the info route and not the attending route .
FRONT END
axios.get("/api/wmUser/getAttending" + eventCode);
ROUTE ON BACKEND
router
.route("/:info")
.get(UserController.findOne);
router
.route("/getAttending/:attending")
.get(UserController.findOneAndUpdate);
You are sending an axios GET request which will target
router
.route("/:info")
.get(UserController.findOne);
If you want to hit the PUT route on the backend, you need to do a axios.put request on the frontend.
Both your axios get requests from the frontend will hit the get on the backend with different params (namely info and attending).
How does the react client connect to the server via express? Many tutorials talk about Superagent and axios which is adding to my confusion. Are there any resources on server side routing in the context of react? thank you
In MERN stack, you do not necessarily have to think of the entire stack as a single entity. Mongo, ReactJS and NodeJS server can all work independently. And let us for easiness of understanding sake say all of them are on separate servers. That is we can have Mongo on one server, ReactJS on another server and NodeJS with express on a third server, then also it will be a MERN stack app.
How a MERN app work is as follows
For example, let us have an app that displays the details of all the students in a class. First, in the React app let us say you select a class, and then the React front-end will send a query to the nodejs server. The query will contain the particular class name. Now nodejs will send a query to the mongo db asking for the details of the students of that class which it will send back to the node server. The node server will then send the details to the front end and it will update it.
If you ask for connection as such, there can be no connection at all except for querying for data. Instead of using the reactjs front end you can use some other frontend and it will give you the same details. React, Mongo and Node, all are capable of working on their own in their respective fields.
Axios is a promise based HTTP client for the browser and node.js.
They are completely independent. Whether using axios, the native Javascript fetch, jQuery AJAX, etc...each of them runs in the browser and makes a GET/POST request to nodejs. You will have defined corresponding GET/POST routes within nodejs to respond to these requests and return JSON response data for them to consume.
I would start by forgetting about react altogether. Instead build an express API with various GET/POST routes that return JSON responses. Test with a simple client like postman. Once you have a handle on that, then start with a front-end Javascript framework to consume these services.
Here is a cut of my express+react api:
var express = require('express');
var router = express.Router();
router.get('/', function (req, res) {
res.render('index', {myjson: "myValue"});
})
module.exports = router;
Basically I am sending the json string to index.jsx, where the frontend is rendered.
Also I've set in express as:
app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', reactViews.createEngine());
So the express server knows where React is.
Checkout the npm package Express-react-engine.
All the elements of the stack can be used independently, React , Node.Js, and MongoDB.
They can be installed in different servers and the communication is by using Fetch, Axios or any other tool.
Been watching alot of tutorials and i see that there is express routing as well as react routing.
Is the react routing for client and the node js routing for server (api?).
Wanting to know if someone could please clarify this as new to React, Node, Express.
Thanks
It is possible (and even recommended) to use both of them in combination.
TL;DR
react-router is used to navigate between multiples pages/views of your front-end app/website. Usually in a single page app (SPA), where pages/views are loaded dynamically.
express router is a way to return static content (index.html, image.png...) AND to handle API calls that are often related to database logic. Those routes are handled server-side.
Example
myapp.com/my-portfolio is a view and should be handled and rendered by react router
// this router render pages components dynamically based on the url
<Route path="/my-portfolio" component={Portfolio} />
<Route path="/page2" component={Page2} />
myapp.com/user/create or myapp.com/api/getMyJson is an api call that should be handled server-side by express router:
// app.js
// api call that return json data
// this is where I will usually return database content
app.get('/api/getMyJson', (req, res) => {
res.send('{"my_var":"value"}');
});
// api call that return the content of folder app/public where
// the index.html and static resources are usually exposed
app.use(express.static('app/public'))
Single page application workflow
The front-end (client browser) request the back-end (your server) for the application static content (myLogo.png, index.html...) usually served by express router
While the first page is loaded and the user begin to interact with the app, the front-end continues to load other pages in the background (lazy loading)
When the user navigate to another page (with react-router), the page is already loaded and the user is taken there without any further server call nor page reloading
On another hand, express router need to handle API calls like myapp.com/user/userId/get/notifications to get data that is not "static" like json data.
I'll try explain the difference through an example. Say we have a single page application built with react at www.example.com
React Routing
We hit www.example.com and the index.html is loaded from the server. Note that it has all of your react pages in your bundle.js file. You now click the about button on the navbar, this sends you to www.example.com/about. This call does not hit the server, it is handled by your react router.
Express
Much like above we hit www.example.com and get the index. This time when we hit /about we get information from the server
Take a look at this blog post:https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc
While walking through this tutorial, I came across a problem wherein the router methods would not work. Using npm start and accessing localhost:3000/api/puppies gets a 404 error. However when I changed
var router = express.Router();
router.get('/api/puppies', db.getAllPuppies);
to
var app = express();
app.get('/api/puppies', db.getAllPuppies);
and run with node index.js, the data prints as expected. I've tried also putting at the beginning of my file
app.use(express.static(__dirname + '/api/'));
but no joy. Is this something to do with npm start? At one point I literally copy/pasted the code out of the tutorial and still I get the 404s.
A router has to be connected to your express app in order to be part of your server.
app.use(yourRouter);
Or, more commonly with a path that isolates that router's effect to just URLs that start with a specific path and the router's own URLs are relative to this path:
app.use('/somePath', yourRouter);
Without this, it's just a declared and configured router that isn't attached to any server.
Express documentation examples here.
The tutorial you reference does not appear to show this part of using a router.
I am totally new to everything Nodejs/express/angular, and I just ran into a question that bothers me.
When you have a MEAN stack, it seems that routes can be handled by both Express.js and Angular.
Angular:
For instance, if I define a route in Angular, I can do it like this:
var app = angular.module("app", []).config(function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: '/templates/login.html',
controller: 'LoginController'
});
$routeProvider.when('/front', {
templateUrl: '/templates/front.html',
controller: 'FrontController'
});
$routeProvider.otherwise({redirectTo: '/front'})
});
But with express.js I do:
app.get('/',function(req,res){
res.sendfile('templates/angular.html');
});
So my question is:
When do you use angular routing, and when do you use express routing?
(I might miss something very obvious here, but I hope you can point it out)
Those two serve different purposes on a single page app.
The app would do all the CRUD (endpoints where you create/read/update/delete your stuff, for example: projects, users, bills, etc). Also it would do all the authentication stuff (like /login and /register).
All of that needs routes, because you would want something like /api/users to grab all your users. All those routes, AKA CRUD routes and authentication routes goes into express.js router. Why there? Because those are routes of the backend.
On the other hand, you have your angular application, which contains the visual part of your application and there you want some routes. You want / to point to your home, you would want /users to have a page where you list your users or even /users/add to have a page with a form to add new users.
You could see it this way:
Backend routes (express ones): Those are the routes that an end user won't have to know about or even use them (your angular app will use them to communicate with the backend to work with its data but an end user wouldn't put them directly on the browser)).
Frontend routes (angular ones): Are the routes that maps to different pages of your application and because of that, end users can use them to access some parts of your application directly.