Routes's conflicts between nodejs and angularjs - javascript

I'm using NodeJS, gulp and Angular with ui-router, and now when I configure angular to remove the tag (#) from the routes, I get the next problem, Angular's routes not works and navigator show this message:
Cannot GET /access
Can I limit nodeJs for so that it only responds to calls under certain route?
E.g: localhost:3000/api/*
Or i need to limit this performance with node and gulp ports.

The problem is that node.js is attempting to serve the routes.
You can fix this by creatg a catch-all handler that runs after your Node.js routes (i.e. your API calls, etc.).
Assuming you're using express, do something like this in your server.js file:
app = express();
app.use(app.router); // handles all your express routes
app.use(function(req, res) {
res.sendfile(__dirname + '/public/index.html'); // will execute angular code
});

Related

How to successfully serve the react app through express js server and csrf token

I was tasked with adding an additional layer of security by adding csrf token. I was able add the csurf package along with cookie parser but I am having issues with react and passing the token to react. I cant post my code here but maybe these specific lines listed below are enough to answer the question.
**//this line here is causing issues because if I remove the get route the index.html will still be servered regardless of whether or not I include the get route request!**
app.use(express.static(path.join(__dirname, 'build')));
//if i comment this get route out the react app is still being served
app.get('/', function(req, res) {
//added this console log to see if this was even being called and it is NOT being called
console.log('get request called');
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
Before I can even get to the csrf token I need to figure out why the get route is not being ran. Question: Why is the react application still being served even if i remove the get route? Is it something with the app.use(express.static...) line?
Yes express.static is serving the index file from your build folder.
https://expressjs.com/en/resources/middleware/serve-static.html

How to setup express and node into an existing front-end only Angular 2 project?

I have a current front-end only Angular 2 application using the Angular-CLI and NPM. I want visitors to be able to send me emails through the contact form.
For this I obviously need a back-end, express and node, in which I have no experience in using.
I need to intergrate express and node into my app but I dont know how to do this correctly.
I have found THIS similar question on SO but its not relevant to my situation.
Other tutorials only show how to scaffold a MEAN stack app not intergrate the backend after the front end has been built.
What I would like to know:
How do I set up my Angular 2 App to use express and node for the back end?
What are the relevant files I need?
Can I do this by using the Angular-CLI?
The best way to setup a project that is built using angular-cli to use a nodejs/express backend is to simple create an express project that serves up a directory. In your client project, if it has been created using the angular-cli, you should be able to just type in ng build and it will compile everything into a dist directory.
From there, you can create an express server that serves up that dist directory like so:
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
The most simple server you could build would probably something like
var express = require('express')
var path = require('path');
var app = express()
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
});
This will intercept all routes and redirect them to the index.html file in the dist/ folder that was created.
For more information on how to set this up and some more advanced settings, check out these links:
http://expressjs.com/en/starter/installing.html
https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli
Just think about the dist/ folder as static files that will be served over an express server, and because routing and everything is handled through angular, you'll be set.

Cannot refresh page in production when compiled with webpack

I am building an app using node.js + express.js + react.js and I'm using webpack to compile the client side code. The problem I am having is after my client side code is compiled with webpack and I run my app, I cannot refresh the page.
My code:
My webpack compiles my files into /dist/index.html, my app runs on port 3000, and all client side routes are prefixed with /admin.
app.get('/', function(req, res) {
res.render('dist/index.html');
});
When I go to localhost:3000 in the browser and click around the links, the app works fine. However, if I go to, as an example, the about page:
localhost:3000/admin/about
And I refresh, I get the error Cannot GET /admin/about.
I believe the reason is my express router only knows about the / route... so If I refresh directly onto a route like /admin/about, express doesn't know what to render so my solution was to include a "catch all" route:
app.get('*', function(req, res) {
res.render('dist/index.html');
});
However, this keeps giving me the Error: Failed to lookup view "dist/index.html" error.
Can someone help?
Thanks in advance!
After research, I found the solution isn't res.render but res.sendFile:
res.sendFile(path.join(__dirname, '/dist/index.html'));

webpack-dev-middleware serving bundle on different port than app

I've been working on a React boilerplate that harnesses Apollo-Client and GraphQL. My app is set up so that I have one node process running an Express server on port 3000 that actually renders the application, and another Express server on port 3001 that uses webpack-dev-middleware to package and serve my JavaScript bundle.
I was getting a 404 when trying to load my bundle using <script src="/static/js/bundle.js />, because it was trying to request the bundle at http://localhost:3000/static/js/bundle.js instead of http://localhost:3001/static/js/bundle.js, where it was actually being served by webpack-dev-middleware.
Is there a way to configure webpack-dev-middleware or my app server so that my app can access the JS bundle from /static/js/bundle.js without having to prepend the http://localhost:3001 in front of it?
You need to proxy requests from :3000/static/js/bundle.js to :3001/static/js/bundle.js, which you could do with something like this:
const request = require('request');
...
app.get('/static/js/bundle.js', (req, res) => {
req.pipe(request.get('http://localhost:3001/static/js/bundle.js')).pipe(res);
});
You have make sure that this route is only added during development.

Full stack javascript routing explanation needed

I've scaffolded a full stack Mongo, Express, Angular, Node app using yeoman with the Angular Fullstack generator
It has created a server/app.js file, which executes a routes.js to handle resources being served by the express server.
The meat of routes.js looks like this:
// Insert routes below
app.use('/api/things', require('./api/thing'));
app.use('/api/users', require('./api/user'));
app.use('/auth', require('./auth'));
// All undefined asset or api routes should return a 404
app.route('/:url(api|auth|components|app|bower_components|assets)/*')
.get(errors[404]);
// All other routes should redirect to the index.html
app.route('/*')
.get(function(req, res) {
res.sendfile(app.get('appPath') + '/index.html');
});
My question is how any file other than index.html gets served to the browser. I've tested, and for example the file "http://localhost:9000/assets/images/yeoman.png" does get returned to the browser. But how? From what I am reading in the routes.js, a request to that png should return the text of index.html
I'm a bit confused by this and would really appreciate an explanation.
Thanks!
If you go into config/express.js you will see something like this:
app.use(express.static(path.join(config.root, 'public')));
Which should be self-explanatory.
UPD. With routes you can overwrite this behaviour for specific files (if you really need it).

Categories

Resources