My setup is thus:
Node server running Express which runs an API.
Inside a subdirectory client is a Create React App project, with the proxy field set to the URL of the Express API.
I start both processes and access the CRA in my browser, which sends requests to the Express API through the proxy.
This all works fine.
In production, I will build the CRA and serve it from the Express app, like so:
app.use('/api/:controller', (req, res, next) => {
return router(req, res, next)
})
app.get('*', (req, res) => {
res.sendFile(path.join(`${__dirname}/client/build/index.html`));
})
My only roadblock is how to handle authentication. I could quite easily do an onload fetch request back to the API when the React app is initialised in the browser to see if the user has a session, but it seems like a waste.
In development (and I guess production for that matter), what would be a good way to 1) read the cookie from the incoming request and 2) pass on the currentUser object to the index.html above (in production) or to CRA in development.
To clarify, I was wondering if there are any specific CRA recipes for handling authentication from the server, before it sends the response back to the browser? (in this dual-purpose codebase setup)
Exact issue: In development, because I'm running yarn run cra, it's spinning up it's own webpack dev server, which serves the React app. So I don't believe I can really get at the request before it gets sent back to the browser.
Related
We made a late decision to implement social media sharing for Angular 7 project. As a first step of the re-write I wish to dynamically update social media tags for a particular route only ('/post/').
I am able to apply SSR on '/post/' using app.use in the server.ts file:
app.get('/api/**', (req, res) => { }); // ignore api requests
app.use('/post/', (req, res) => {
res.render('index', { req });
}); // successfully serves SSR content on '/post/' but client side rendering fails to take over.
app.get('*', (req, res) => console.log('Other routes')) // 'ERR_EMPTY_RESPONSE' error
I am running off localhost:4200 for both server and client - spinning up the SSR node server with npm run serve:ssr, and spin up the client side with ng serve.
I am unsure the best way to handle requests for different routes. How can I tell Node to skip other routes and to spin up Angular on the client side? Currently it returns 'ERR_EMPTY_RESPONSE' error on other routes and only provides SSR content for '/posts/' (no client side rendering).
I am building a node.js app with express, I am hosting an Angular SPA in the public folder.
The app runs and the hosting works fine when I use the angular router for navigation around the website, but when I directly try to access the link, for example: http://192.168.1.4:3000/posts, the entire body of the website is just the JSON response object, without the app
this is the Node.js code handling the get request
postRouter.route('/')
.options(cors.corsWithOptions, (req, res) => {
res.sendStatus(200);
})
.get(cors.cors, (req, res, next) => {
posts.find({})
.then((post) => {
res.status(200);
res.setHeader('Content-Type', 'application/json')
res.send(post);
}, (err) => next(err))
.catch((err) => next(err));
})
this is my angular service sending out the get request
getPosts(): Observable<Post[]> {
return this.http.get(baseURL + 'posts')
.catch(error => { return this.processHttpService.handleError(error); });
}
Post Component .ts file
ngOnInit() {
this.postService.getPosts()
.subscribe(posts => { this.posts = posts, console.log(this.posts); },
errmess => this.errMess = <any>errmess);
}
Again, when i use my Angular 5 client app hosted in the public folder, built with ng build --prod, the JSON object is retrieved from the mongodb database and is displayed correctly on my website, along with the rest of the app, the header, the body, and the footer.
it might also be worth noting that the console.log on the ngOnInit() is not displayed on the browser when using the direct link.
Any advice/fix is greatly appreciated
You have a clash of routes between angular and your express application. Angular is served up on one route (I'm guessing the / route) and then it sort of "hijacks" the users navigation. It does this by not actually changing web pages, instead it just changes the URL in the navigation bar, but never actually makes a web request to get to that resource.
You've then got endpoints on a web server listening on those endpoints. This means the moment you visit the /posts page, you're not asking angular to do anything. In fact, angular isn't even loaded because that only gets loaded on the / route. Instead you're going straight to your API.
There are ways around this, to start with many people put their API fairly separately, either on a subdomain or mounted on /api (such as /api/posts). Then your angular app can be served up on the / route. There are other techniques you can use to then allow a user to go to /posts and still get your angular app loaded.
You can use a few approaches for this such as the hash location strategy, or you can serve up your angular application from any route on the application (* in express) and load the angular app which will then take over. This second approach is most comment, it usually results in hosting your api on a sub domain and then serving your angular app on the * route of the normal domain name. For example: api.myapp.com will serve only JSON responses, but any route on myapp.com will serve the angular app, such as myapp.com/posts.
My situation:
I'm using Express and passport.js as my backend API server and React js as my front-end.
What I'm currently facing is that I keep getting index.html file when I request my passport auth by "/api/auth/*". However, it works as I expected when I'm making a request from my front-end via proxy.
So I tried using Regex to exclude "/api/*" route from using static build files.
app.use('/api', api)
app.use(/^\/(?!api).*/, express.static(path.join(__dirname, '/../build')))
app.get(/^\/(?!api).*/, (req, res) => {
res.sendFile(path.join(__dirname, '/../build/index.html'))
})
But not like my expectation, I just got Unexpected token < warning ...
How can I get my get "/api" route to work also while using React js build files?
Or should I just keep making a proxy request from React js dev server?
I want to understand how Express and React js app deployed in some server work together.
I need to query a database and I'm using create-react-app. The library to connect to the DB (pg-promise) does not work with Webpack and needs to be running on a Node server.
So I installed Express and have this:
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
})
How can I load data from the database from the React pages? I though of using request but how can I make a request to my own server? And what should I add to the lines of code above? I think it would be something like:
app.get('/query/:querybody', (req, res) => {
// process and return query
})
Is this right? How can I make it work with a SPA?
Probably the most friction-free method would be to have a separate app.js or server.js along side your CRA application. You can use a tool like concurrently to run both your React app and the express app.
The trick is to serve your express app on a different port than the default :8080 that CRA serves on. Usually 8081 is a good choice, as it's a common convention to use port numbers that are close together when developing.
In your React app, you will need to make sure you use the full URL for the express endpoint: http://localhost:8081/query/...
On the server side you are going in the correct direction: you need to setup endpoint which will respond with data based on request. In you example you setup an endpoint for a GET HTTP request. If you will need to pass a complex request (for example add new record to database), consider using POST HTTP requests.
On the client side (in the browser) you will need a library that will assist you in sending requests to your server. I can recommend to try Axios (https://github.com/mzabriskie/axios). Usually if you omit protocol, server name and port, request will be sent to the server from which the page was loaded:
http:127.0.0.1:8001/api/endpoint => /api/endpoint
I have created web application in angular 2 for the client side and NodeJS with express framework for the server-side.
For the client side, I generated the project with angular-cli which runs on a lite-server, so my client and server are running on 2 different services.
I want to integrate ADFS authentication.
To implement the authentication, I am using passport-saml package.
There is a middleware in my server-side API which requires a user to authenticate.
The authentication process works fine when reaching the server directly (without the client).
However, I fail to access the API through the #angular/http.
I tried a simple GET request from the server (with the middleware in the end-point) and as a result I am getting the authentication page without redirection (I don't think it's the core problem, but the actual implementation is).
How should I properly implement the authentication when using separate services to the server and the client?
Hi I was also facing the same issue my angular project was hosted on 4200 port. and my node on 3000 port.
Its difficult to implement passport when we have 2 ports running.
step 1
make angular project static by doing an ng build to public folder .
make sure angular-cli.json has *"outDir": "../public",*
step 2
Now we can use the same node port to access angular roots please add below code in your node app.js
var path = require('path');
// Set Static Folder
app.use(express.static(path.join(__dirname, 'public')));
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'public/index.html'));
});
This will enable your angular project accessible through node port.
step 3:
Now we can add the passport login button in the UI
and give the url twitter
THIS IS not explanatory means feel to ask me the doubts.
You are not giving much detail on what the failed response was when the client did the GET to the server. Was it a 400? 401? 404? 500? did you get a CORS error?
Why are you using GET for your login endpoint. You should be POSTing credentials right in the POST payload?
Anyway, in your angular2 code you should have an auth service with a login method. The login method should do something like ..
login(credentials) {
return http.post(your_server_url, payload);
}
you can then subscribe to the Observable returned by the login method and if all is good router.navigate to the home page or if it did not go well display login error messages.
Set separate urls for ui and server in ..src/environments/environment.ts
export const environment = {
production: false,
BASE_URL: 'http://localhost:4200',
API_BASE_URL: 'http://localhost:5000',
};
In node app.js
app.use('/', express.static('public'));
app.get('*', function (req, res) {
res.sendFile(path.join(process.cwd(), 'public', 'index.html'));
});
In your development environment, you should accomplish this by instructing your Angular CLI to proxy all requests to a backend server running on a separate port whenever you run "ng serve". Angular has good documentation on how to do this at https://angular.io/guide/build#proxying-to-a-backend-server. This will make your development process much faster, because you will not need to manually build your Angular application to test every code change.
When a production build is run, Angular will move the distributed files to the location specified in the "outputPath" property of Angular.json (by default set to "dist/<projectName>"). Your main production server will serve them appropriately from there as mentioned by #Lijo in their answer.