I encountered something debilitating.
I'm pretty far in a project right now, and it definitely needs to be rendered server-side at some point.
The webapp lets users upload pictures such as profile picture and also "regular" pictures.
I'm using Croppie from Foliotek (https://github.com/Foliotek/Croppie) to do the cropping, which works well and is exactly what I need.
But Croppie relies on jQuery. Yesterday I found out that could be an issue if I want to make the app server-side rendered.
All the jQuery is used in ngAfterViewInit lifecycle hooks, so I'm hoping this makes it server-side rendering proof?
I know there is ng2-img-cropper available, but I'm not so keen to implement that one. BUT, if I can use ng2-img-cropper together with server-side rendering then I'll have to.
Or is there something far better I'm overlooking?
You can use jQuery on server, with Node, AFAIK. Just browse npm and search for suitable module. And do not forget, that Node have no DOM implementation, so you need module for virtual DOM also.
For example, you can use this jQuery wrapper with this DOM implementation. Example:
npm install jsdom
npm install jQuery
var jsdom = require('jsdom').jsdom
var myWindow = jsdom().createWindow()
var $ = require('jQuery')
var jq = require('jQuery').create()
var jQuery = require('jQuery').create(myWindow)
$("<h1>test passes</h1>").appendTo("body")
console.log($("body").html());
I found out there is an Angular Universal (server-side rendering) starter project available:
https://github.com/angular/universal-starter
I cloned it and implemented Croppie as I did in my development version and everything works just fine!
So... I wonder why I've read multiple times that things will totally break if using jQuery in your Angular 2+ SSR project. Also Max Schwarzmuller told so in his lectures on Udemy. Anyway. I'm happy to have found everything still works.
as i know, when ever jquery use "Window", ssr gets confused, because in server we don't have window(window is in browser).
but normally, jquery works.
Related
I want to prototype a quick app but don't want to go down the road of using a framework like React or Vue. I'd also prefer not just creating an html file and a js file that is imported within the html.
Is there a way I can make use of npm packages, SCSS and still write vanilla Javascript without the usage of a framework?
Without using a framework, the most straightforward way to using NPM packages in the browser would be using Browserify. Check out https://medium.com/jeremy-keeshin/hello-world-for-javascript-with-npm-modules-in-the-browser-6020f82d1072 for instance.
Otherwise you can use Gulp,which helps running Browserify, SCSS etc, and use BrowserSync to refresh on changes. But I personally wouldn't go this way: while this is a great way to understand how stuff works, it takes a bit of time to setup properly, and isn't used that much anymore.
My advice is:
Go with Webpack or Rollup. Seems harder to grasp than Gulp but at the end of the day, learning Webpack is very useful (much more than learning Gulp), for instance if you happen to work on a project that uses it (and there are so many).
Use a backend framework that bundles all this kind of stuff. Like Laravel which uses Mix - you can even use Mix without Laravel but there will be a point at which you'll probably need some static data, some routing, interactions... So if you need something more than just hardcoded JSON data, go with a framework. Laravel is great for prototyping but it's not the only one.
Is it possible to implement workbox (https://developers.google.com/web/tools/workbox/) in an application without node / npm (html + js + css)?
I still have not found this answer ...
It looks like, yes, it should work just fine without using Node itself. There is also a CDN hosted version, so you won't need to use NPM to download it either.
If you check out their Get Started page, it'll show a simple starting example which just uses basic browser stuff.
I am teaching myself React.js. For now, I am avoiding having to set up and use node.js, servers, etc. (I want to focus on front-end functionality first). To avoid having to set up my own node server and worry about endpoints, etc., I have been using these CDNs:
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
These have worked great so far. But now I am trying to use the React.JS CSS transition library. I tried using cloudflare:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.3.1/react-transition-group.js"></script>
But this is not working. This is the only cloudflare link I could find on the topic.
Is there a way to use
<ReactCSSTransitionGroup></ReactCSSTransitionGroup>
without having to set up my own node server?
I would like to be able to pull the library in from a web link. Or if I could get the entire JavaScript file, I could simply put that file in the same folder and try to load from a local folder using:
<script src="ReactCSSTransitionGroup.js"></src>
It seems that there should be a way to use ReactCSSTransitionGroup without having to do npm, command line launch server, express, etc.
This may come too late but just in case somebody else is looking, just like me.
As per https://reactcommunity.org/react-transition-group/, the cdn is at https://unpkg.com/react-transition-group/dist/react-transition-group.js
And you can use <ReactTransitionGroup.Transition>...</ReactTransitionGroup.Transition>
or <ReactTransitionGroup.CSSTransition>...</ReactTransitionGroup.CSSTransition>, and the same goes for SwitchTransaction and TransitionGroup, to do the animation.
I'd suggest using Create React App https://github.com/facebook/create-react-app.
Bundling and tests all taken care of for you. Not the best way to learn about build processes, but it's very fast to get going and you get to install and import from npm. win win in my books.
Just a suggestion, but it will save you a lot of time and hassle if you learn npm and just add things like "ReactCSSTransitionGroup" etc. via npm.
Also Webpack + Babel are part of the build most React developers use.
Check out this article to get up and running: https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr.
Hello everyone I am wondering if is possible to run two version of ReactJS on the same page , something similar to jQuery.noConflict().
With a bit of research i have found two interesting things :
Two Reacts Won’t Be Friends
While I’m happy that everybody seems to be converging on NPM in 2015 and NPM wants developers to use it for managing front-end dependencies, it still has rough edges. The biggest problem with using NPM for front-end dependencies is that if two packages specify a library like React as a dependency, they might get two separate copies of React. Even worse, they might get different versions of it. This works fine for something like Node, but not for browser libraries that want to mess with the same global mutable DOM! NPM tried to solve this with peerDependencies but all hell broke loose and they’re backing out.
https://medium.com/#dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375#.hfx35f6hl
And an issue on github: https://github.com/facebook/react/issues/1939
However is not clear for me how we could wrap & delivery our ReactJS widgets in order they could run without conflicts on a page using other version of ReactJS .
thanks
However is not clear for me how we could wrap & delivery our ReactJS widgets in order they could run without conflicts on a page using other version of ReactJS.
You can use Browserify with reactify to load your JS and version of ReactJS without conflicting with another ReactJS version that may be loaded on the page.
More information is available here:
Embeddable JavaScript widget with React
I'm using the jsdom node.js module for an app that does some web scraping to get some data it needs. This works perfectly fine when I run locally.
When I push the application to cloudfoundry however, it crashes. The log is as follows:
====> /logs/stderr.log <====
/var/vcap/data/dea/apps/caretogethersandbox-0-8b20af9255bbf552d0f490cb60d0df55/app/node_modules/jsdom/lib/jsdom.js:171
features = JSON.parse(JSON.stringify(window.document.implementation._fea
^TypeError: Cannot read property 'implementation' of undefined
Is there something I'm missing here? I'm pretty stumped. I know the code I've written works fine, it just seems to be an issue between the module and cloudfoundry.
I was able to reproduce this problem pretty easily. It seems jsdom relies on a native compiled library called Contextify (https://github.com/brianmcd/contextify) and also has some bindings to Python from what I can gather. These are not supported by Cloud Foundry at present. There is a similar question on Github about this problem;
https://github.com/tmpvar/jsdom/issues/436
The last post at the time of writing this suggests the use of two 100% JS libraries called Domino and Zepto Node, they may well be worth checking out.
With only what you posted to go by its pretty much impossible to give you a direct answer.
But I have a couple of suggestions.
You have environmental variables that don't work the same in production as they do in development.
jsdom relies on jquery that is normally loaded-in externally.
Perhaps jquery is not loading properly.
Have you heard of cheerio. Its an alternative to jsdom that implements a subset of jquery and does not need to load jquery in externally. This makes much faster than jsdom.
You can watch this video created by the author for introduction to cheerio and learn more of its benefits.
Use the sample code on the cheerio github page and upload it your cloudfoundry account to see if everything works. Then you can make decision on weather to switch to cheerio.