I am using something like airbnb's rendr, i.e. my own implementation of sharing backbone code between client and server, to build full HTML on the server using the same Backbone models, views, collections and templates I am using on the client. My files/modules are defined as requirejs modules, that way I can share them easily on the client.
In development mode, I want requirejs to refetch/reload any modules from disc when I refresh my browser (without restarting the server), so I get my server rendering uses the newest templates and javascript to finally serve me the newest HTML.
when using requirejs on the server with nodejs, the trick of appending bust parameters to the urlArgs like the following doesn't work, i.e. the server doesn't reload/refetch any modules from disc
urlArgs: "bust=v2"
I wonder, if reloading/refetching requirejs modules from disc-space without restarting the server is possible in node? specifically, that would be very useful for the require-text plugin for template. additionally, it would be nice to apply reloading only to a restricted set of modules.
I've never had to do this, but a quick search shows a few options, including automating the server restart:
nodemon
node-supervisor
You may also be able to do something similarly creative to this:
delete require.cache['/home/shimin/test2.js']
You could almost definitely clear the version RequireJS has in cache, forcing it to reload it, although I suspect the node would just serve up the old file again.
Finally, maybe take a look at hot-reloading, which seems to work around the caching without needing to restart the server (example).
Like the OP, I was looking for a way to make development in node with RequireJS easier and faster. In my case, I am using RequireJS with a grunt watch task in node, and wanted to be able to force RequireJS to always get the latest version of a module from the file system. And happily, I found a very simple solution!
I had to slightly modify Henning Kvinnesland’s suggestion by adding the timeout, but now it is working like a charm:
var requirejs = require('requirejs');
// Set up requirejs.config here...
// Disable caching of modules
requirejs.onResourceLoad = function(context, map) {
setTimeout(function() {
requirejs.undef(map.name);
}, 1);
};
Related
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 am starting from this excellent tutorial: https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/ and trying to extend it by adding a new page to serve through a new route. However after hours of mucking around I am realizing that somehow create-react-app is doing some weird magic (as mentioned in their docs here):
`create-react-app` configures a Webpack development server to run on `localhost:3000`.
This development server will bundle all static assets located under `client/src/`.
All requests to `localhost:3000` will serve `client/index.html` which will include Webpack's `bundle.js`.
The key quote is "All requests to localhost:3000 will serve client/index.html". I have no idea how this happens. So even though i mess around with routes/index.js:
app.route('/')
.get(function (req, res) {
res.sendFile(bipath.join(__dirname, '../public', 'THISCANBEANYRANDOMFILENAME.html'))
});
it doesnt matter because webpack is somehow directing localhost:3000 to index.html anyway. where and how is it doing this? Bottom line I am trying to modify my routes to serve a new html file and am running into all sorts of filepath issues (yes, even when i use require('path') or sendFile(...,{root: __dirname}).)
So what exactly is going on here and can you give me any hints to help me out?
Edit: this could be from babel as well as webpack - i'm not exactly clear where babel hands off and where webpack starts.
I haven't played around with create-react-app, but it seems like instead of using the default npm start, you could create your own server file and run that.
This looks like a good example.
https://medium.com/#patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d#.6y4rrl61q
Alternatively, if you're looking to have routes used as an api, you could proxy them to a different port like shown in the tutorial you linked.
I'm building isomorphic app using Node.js and ReactJS.
I've met a situation when inside some isomorphic React component (rendered both on client and server sides) I need to include only client-side dependency (some notifications library for example).
What is the best way to have it worked (compiled) both on server/client sides?
P.S: I have few thoughts about possible workarounds something like checking for browser env variables (ex. some typeof window !== 'undefined') etc. but I'm not sure it's a good way to go.
Use the lifecycle method componentDidMount which is not invoked on the server instead of checking if window is undefined.
The "downside" is if your client side dependency enhances an element for example or changes any property of it, it'll get the default property first since it was rendered server side and when componentDidMount runs it'll get changed causing a "blink".
If you are using browserify I often use process.browser which is only true in browserified code.
If you wanted to get fancy and remove server code from the browser instead there is also isbrowser which will do just that.
Another way (webpack or browserify) is to take advantage of the browser field in the package.json. You can make it so that the server requires a noop file and the browser requires a file the exposes the client side api.
I have defined variable in webpack configuration file called process.env.WEBPACK and in my code when i need something like bottstrap js or something else i just write
if(process.env.WEBPACK){
//awesome lib included or scss or whatever
}
I am trying to build a web app where I want to store all html, js and css files on amazon s3, and communicate with a restful server through api.
I am trying to achieve lazy loading and maybe routing with react router. It seems that webpack has this feature code splitting that would work similarly as lazy loading.
However, all of the tutorial and examples I found involves webpack-dev-server, which is a small node express server. Is there anyway I could generate bundle at build time and upload everything to amazon s3 and achieve something similar to Angular's ocLazyLoading?
It's definitely possible to create a static bundle js file, which you can use in your production code that does not include webpack-dev-server.
See this example as a reference (note: I am the owner of this repo). webpack.prod.config.js does create a production ready bundle file using webpack via node.js which itself does not require node.js anymore. Because of that you can simply serve it as a simple static file (which is done in the live example).
The key difference is how the entry points are written in the dev- and production environments. For development webpack-dev-server is being used
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index'
],
// ...
}
In the production environment you skip the webpack-dev-server and the hot reloading part
module.exports = {
entry: [
'./src/index'
],
// ...
}
If you want to split your code into more than one bundle, you might want to have a look at how to define multiple entry points and link the files accordingly.
Is there a way to force Node-webkit to use proxied settings for all requests ? I know there is an API solution using setProxyConfig() but this doesn't work with authenticated proxy, the prompt shows up to login but crash when submitted...
So I tried to use node request module, and it works fine :
var request=require('request');
var proxy = request.defaults({'proxy':'http://login:pwd#proxy:port'});
But now my problem is to tell node-webkit to use this for each request.
Any solutions ?
I'm quite new using node and node-webkit so maybe there is a better way to do that.
Thanks a lot !
You may try
process.env.http_proxy = 'http://login:pwd#proxy:port'
It will work with request lib, also should impact other requests from node-webkit (assets, ajax)
But may be other libraries don't use environment proxy settings. If that doesn't work you can try https://www.npmjs.com/package/global-tunnel
Not sure if this is solved, but i came up with a simple solution:
i wrote a simple wrapper for the request library
https://gist.github.com/jodevsa/7dd9662b8244359fa0d7626ae7c9bd69
all you have to do is ,
Head to $PROJECT_DIR/node_modules/request/
Rename index.js to core.js
Create a new file called index.js
Copy code content from the above gist link to index.js
Change proxyLoc value to you'r preferred proxy
If you decided to disable proxy , just change value of ON variable to false inside index.js
Cheers :D