I have a react + node + express + webpack client/server app.
I want to dynamically generate and serve the client front end to have dynamic meta-tags informed by the HTTP request URI.
Specifically:
How does one configure webpack to accept context variables directed by HTTP request URI, and dynamically render this content?
You can't really do that with Webpack alone. Webpack is a module bundler that runs during build time to compile your code into static bundles that are later consumed by your frontend app.
It's possible to generate html using webpack with html-webpack-plugin, but I wouldn't recommend this approach for your needs.
What you can do instead is to configure your express server to dynamically generate the html. There are multiple ways of doing this. One way would be to use a templating engine with your express server to dynamically generate the markup before sending the response.
see: https://expressjs.com/en/guide/using-template-engines.html
Related
I'm new to back-end coding, and I'm struggling to understand exactly what a "fullstack" app would look like.
Is it:
A Node-Express server that serves index.html, which has <script src="main.jsx"></script> in it (If this is the case, how would the .jsx content get compiled into browser-ready javascript?)
A Node-Express server that serves some data (.json) + a frontend app (that you would initialize with Vite or CRA) that fetches from said server?
Both are currect , your server can serve content to the cliend (first case) or send data to the client (json , xml or etc).
Note that when you are working with react and .jsx component you have to build your project and server the html file (including js , css) via express server
I have a running ember.js frontend app. Also have a node.js backend app which can do basic CRUD operations from MongoDB. Using Postman I can see that my node.js app is returning JSON data properly.
I want my frontend to use the backend to do CRUD operations on MongoDB. I am new to ember.js so I want a guideline where I can understand to use the JSON data from the node.js app and use with ember.js frontend.
My ember.js app already is using a mock server. It has a "dist" folder inside.
My adapter/application.js file in ember.js frontend:
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
namespace: 'api'
});
I want to use my localhost:3000 node server here. Do not know where to add it.
DS.RESTAdapter has a host property that allows you to configure the host used:
// app/adapters/application.js
import RESTAdapter from '#ember-data/adapter/rest';
export default RESTAdapter.extend({
host: 'https://api.example.com'
});
But I would not recommend to point that one to a local development server cause that reduces your flexibility. E.g. a team colleague of yours may want to start the local instance on another port. I would recommend to use the --proxy option of Ember CLI's serve command:
ember serve --proxy http://localhost:3000
This will proxy the requests to your local development server.
You may need to customize the adapter and serializer if your API isn't following the defaults of Ember Data's RESTAdapter and RESTSerializer. Please have a look in the guides for a quick introduction to do so.
I am using the following:
https://github.com/gdi2290/angular-starter
I start the application with npm start that uses webpack dev server. My issue is I want to add CAS authentication, but have no idea where what goes. This is the library I am trying to use:
https://github.com/TencentWSRD/connect-cas2
All the examples appear to use express, though I am not sure if I can use this with the webpack-dev-server as is with the starter I am using? If so, how do I use it? Or do I need a different CAS library that is compatible with the npm start?
Webpack is more of a build tool with minimal server capability. It can serve static content making it perfect for updating content on the fly and put together simple websites with basic routing and client side side logic.
If you want anything even a little more complex you will need a server side technology. So the connect-cas2 will require you to use node.js and express. The documentation shows you exactly how to set it up.
I don't know anything about connect-cas2 but I know passport for authentication, but they wouldn't be terribly different. I would follow the quick start and if you have any issues then edit your question with the code that you are having issues with or have trouble understanding.
I have been digging around and you might be able to proxy the authentication if you already have a CAS server setup somewhere. I would try the following:
// the proxy option is part of the devServer in your webpack.config.js
devServer: {
contentBase: 'public',
// setup a proxy
proxy: {
// just replace the /cas/validate endpoint to the endpoint in your
// website that will trigger the api call
'/cas/validate': 'https://url-to-your-cas-server.com'
}
},
I have an application built using Express, Mongoose, React and Node. My application is hosted on a location which looks like the following: https://example.com/app_name which means that app_name is the base path for all of the static assets.
I'm using Webpack and setting publicPath to https://example.com/app_name. I can reach my static assets just fine, but when I attempt to do a call to my back-end, my requests are being routed to https://example.com/api/... instead of https://example.com/app_name/api/....
Is there a way to prefix my endpoint calls so that they use https://example.com/app_name/api/... instead of https://example.com/api/...through webpack or any other means?
I'm really confused. I started learning to use node.js with MEAN stack. Before I used webpack and browserfy without really understanding it.
What confuses me is the following:
Express fires up a server and I can handle the requests
Webpack fires up a server
Browserify fires up a server
simply typing in plain js e.g. var http = require('http'); http.createServer(function (req, res) { ... fires up a server
Well, Webpack and Browserfy (as far as I understand) also bundle js files. How does the logic "under the hood" works and do they bundle everything I code and send it to the client (E.g. my DB login)?
I read this one Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc , which told me webpack uses express under the hood. So maybe express also uses the plan .js server under the hood?
Well, I can go on like this forever. I am a little confused.
Well, what and where are the differences and how do thee apps work (together)?
First of all express use the core API and module of node.js like http module .
express uses the http module to create the server at specific port so
app.listen(3000);
will simple be like this
var http = require('http);
var server = http.createServer() ;
server.listen(3000) ;
server.on('request',function(req,res){
// here express will do all its magic
// and handle the request and response for you under the hood
})
Second things is that webpack and other bundling tools is used for bundling files and assets in the front end not the back end and they can create simple server for listening for changes in your files to give you other features like
+ live reload
+ hot module replacement
but also you can use webpack in the back end to use things like babel-loader or use the hot module replacement feature
so express works for the back end
and webpack use it in the front end
you can create different ports on each server and communicate between them via ajax API like fetch
and that's how actually it should work .
learn more
understanding express.js
understanding express and node fundamentals
webpack.js concepts and documentation