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
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
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.
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'));
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.
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).