In my React webapp, how do I show the right date in a "Website last updated" field? - node.js

I'm putting together a demo app in which I frequently add content and new React components. I have just added the component react-timeago for showing when the latest changes were made to the site. Now I want to give that component the right timestamp.
At worst, I suppose I could show the last time that the server was started. I am using webpack-dev-server locally. I haven't yet gone live with this site, but it will probably (like webpack-dev-server) be an express-based solution when I do. So one option is perhaps to do a grep on an express-generated logfile for server start entries. Solving that would solve the question to an extent. It's worth noting though that adding content would not require a restart, so this solution is perhaps not ideal. Presumably, I could use some kind of middleware (logger or otherwise) in express for this.
Another possible approach might be some kind of directory watch mechanism that records the last time a change was made. Should I somehow hook this into a redux state, for example? There are so many components available that it's difficult to know which ones to put together (with my limited experience in this area) to achieve this.
My site is a lightweight single pager and I'm loath to add any kind of datastore behind it at this stage as it seems like overkill to me.
I can also mention that I'm using webpack 2. Aside from that it's a really basic React app with a couple of components.
To summarize, I am after some way of looking for added content (eg. mp3 files) or changed code files, and getting that timestamp into my react-timeago component.

As #Joe Clay suggested, I used Webpack.DefinePlugin to fill a constant with the current time at restart. This worked fine, I added the following lines into my webpack.config.js:
var dateString = new Date().toDateString();
...
new webpack.DefinePlugin({
LAST_UPDATED: JSON.stringify(dateString)
})
And was able to access the the constant in my React component:
<div style={{marginTop:120}}>A sinewave440hz demo site.<br/>
This site was updated
<TimeAgo date={LAST_UPDATED} formatter={formatter}/>.
</div>
Recording changes in the assets could also be done at startup if the previous state of the assets was recorded somewhere.

Related

Using webpack with an existing Node project

I'm new to webpack, and am trying to get my head around how I can switch an existing project to using it (am now using React in parts of it, so it has become necessary).
The kinds of things I am uncertain about:
As the package.json contains all my server side stuff too, will it not try to compile all this into the bundle.js?
My project contains a huge number of statically served files, and also a load of EJS generated pages. What's the best method for converting everything to webpack, I'm thinking it's going to be a bit of a headache to switch everything to 'require' statements instead of tags, but I guess it's the only way of taking full advantage of the benefits of webpack? Are there any recommended methods (or even scripts that will handles these changes for me?!).
Webpack will take care of "tree shaking" for you -- that is, it will only include the modules that your entry points explicitly use, no matter what is in your package.json file.
Looks like there is some support for EJS already in Webpack. A good conversation of it is here: https://www.npmjs.com/package/ejs-simple-loader#purpose You can then transition gradually (or not at all) as need be.
1.The backend dependencies in your package.json is unrelated to your frontend stuff. You just need to indicate the correct entry points.
FYI Entry Points
2.My suggestion is that you can find one EJS loader in GitHub to solve it.
FYI Loader

Updated less files, not showing up after page refreshes

As the subject states, I have made some minor CSS updates via one of the LESS files on a Ghost theme but when I refresh I don't see the changes reflected. I'm assuming since I'm new to LESS and node that perhaps I'm missing compiling LESS to convert it and save the CSS output. Is this like a "watch" task I need to add to a gruntfile? I'm trying to understand how is that all these work together.
For those as me new to LESS and facing similar issue, I found this article really helpful http://ericnish.io/blog/compile-less-files-with-grunt/ after some reading I was able to update LESS files and see the results on css styles and the site.

Iterators from the same ViewObject do not communicate

I am using JDeveloper 11.1.2.3.0
I am facing a strange behavior here. I have created 2 AppModules and in each AppModule I have DataControls from the same View Object (not only but also). When I create a new row using Page1 for example using DataControl from AppModule1 and then navigate to Page2 that uses DataControl from AppModule2, the Commit and Rollback buttons are enabled. Even if I redeploy the application in this case I have to Commit also in Page2. If I do this, then the problem will not show any more.
So even through I commit in the first case, I have to commit also in the second page. As I said the EO and VO are the same, just the AppModules are different.
Does anyone know why this happens and/or how to fix this?
If anyone knows that this is a known bug please tell me.
Well I hurried a little, I just found the solution (the problem actually). Apparently different app modules are completely ignored one by other and have their own db connections. The explanations is here:
http://www.jobinesh.com/2010/03/what-you-may-need-to-know-about-nested.html

ExpressionEngine file manager - default to thumbnail view

At the moment when you go to select an image inside an entry using the EE default file manager, the default view is 'show files as a list'.
Is there a way to show the thumbnail view as the default?
At this point I would be happy with a core hack.
I don't usually use the file manager for sites (much prefer Assets) but this client had a tight budget
I've wondered about doing this in the past as well - turns out it's pretty simple. Open up ee_filebrowser.js and search for the first instance of a("#dir_choice").val(). Immediately after that add this:
; a("#view_type").val('thumb').change();
Make sure you include the leading ;.
I've only tested this in Safari but I can't see why it wouldn't work everywhere. Incidentally, JS beautifier makes this sort of thing infinitely easier.
I don't recommend hacking core for any reason and I suggest it should be avoided at all cost.
With that said, I will provide what I've found out just the same.
Looks like the following files, in EE 2.5.3, are what you'd want to edit:
/themes/javascript/compressed/jquery/plugins/ee_filebrowser.js
/system/expressionengine/libraries/File_field.php
I found these doing a file search in my text editor for view_type which was from the id of that dropdown. The javascript is minified so you'd probably want to un-minify it and then rewrite the part which handles the switch. I'm not the best JS/jQuery person out there, and un-minified js makes it a bit harder too so, I won't offer any more than what I've found so far.
Consider pulling out the parts parts from the two files if you aren't great with js and maybe start a new post tagged accordingly.
Also note: there might be more to this than just those two files so consider this answer a start and nothing more.

More efficient ExpressionEngine server moves

I'm trying to find a better way to move my Expression Engine 2 sites from development to live servers. I have a checklist that I go through, starting with running a find and replace for the old/new URLs and server paths, then I update the database config file. This however misses out a huge amount of settings that I then have to go through and change manually, but I don't see why I should need to (unless these are encrypyed somewhere).
For example, I have to change the "Basepath to Template File Directory" in the Global Template Settings manually, along with member settings and a handful of others. There must be a file or entry with these in somewhere that I can change before I upload but I can't find it.
Does anyone know where these are stored?
Those are stored in the database, unless you are using global config variables.
I would highly recommend looking into some sort of config bootstrap. There are quite a few solutions to this, but it's really up to you to pick what's right for your development style / environment(s).
Take a look at the following articles:
http://eeinsider.com/articles/creating-a-robust-config.php-file/
http://boblet.tumblr.com/post/68095239/ee-localhost
http://eeinsider.com/articles/multi-server-setup-for-ee-2/
I've tried those solutions, but in my opinion the best option is NSM config bootstrap.
Check it out here: [http://ee-garage.com/nsm-config-bootstrap][4]
The only thing (currently) missing from these solutions are new config vars regarding file upload paths and locations. You can add those to any of these solutions by adding the variables detailed in this article:
http://expressionengine.com/user_guide/cp/content/files/file_upload_preferences.html#overriding-upload-paths-and-urls-using-configuration-variables
I know I'm late on this one, but for anyone else searching, this plugin is very useful and I have used it on numerous occasions.
ExpressionEngine stores your website URL and Server Path in a ridiculous number of places.
REElocate helps you update these in one simple step.
https://github.com/expressodev/reelocate

Resources