How to use server side includes with browser-sync - node.js

I have some static files which use server side includes (SSI). Those files have .shtml extension. I'm currently using a local apache in the development cycle.
I want to replace that with browser-sync.
How do I enable SSI?
I found a module called browsersync-ssi, but it's unclear how to use it with the browser-sync command line, installed via npm-install.

there are 2 options to use browser-sync with SSI. my browserync-ssi module depends on node-ssi which does not support all SSI features. the "if"- directive is also not stable.
I would only suggest to use it if you can be sure only to use the base features of SSI. includes for example.
another option is to use browser-syncs proxy feature. http://www.browsersync.io/docs/options/#option-proxy
your apache would still run in the background. so its not an actual replacement but a good solution in your case to benefit from browser-sync.
if you just need features like that from SSI but the not the technology and syntax itself I would suggest to switch to another templating engine like ejs or nunjucks as a [browser-sync] middleware.
for example: https://github.com/soenkekluth/browser-sync-ejs

Related

is it required babel configuration when I use vite in place of webpack

Recently I was create react app using vite , it is lightweight , less config and fast then compare with webpack . now my question is , is it required bable configuration in Vite project
No, vite does automatic syntax transforms but it only targets browsers that support es modules (firefox & chrome started supporting it around 2018). If you want to support new js features in older browsers you need to add polyfills though. You can read about the exact behavior and how to support even older browsers here.
I think that question need more information about that topic.
Vite.js uses the built-in JavaScript support of the browser, so you don't need to explicitly configure the JavaScript version in Vite.js itself.
When I said Vite.js uses the built-in JavaScript support of the browser, I meant that Vite.js relies on the JavaScript engine of the browser to interpret and run the JavaScript code in your application. The JavaScript engine is the component of the browser that executes JavaScript code. When you visit a web page that contains JavaScript, the browser runs the JavaScript code using its built-in JavaScript engine. This means that the version of JavaScript that is supported by your application is determined by the version of the JavaScript engine that is built into the browser. In the case of Vite.js, the JavaScript code in your application is not transpiled or otherwise modified before being run by the browser. However, if your application uses modern JavaScript syntax that is not supported by the target browsers, you will need to transpile the code to an older version of the language that is supported. In that case, you can use Babel.
No, it is already setup on the background. However if you'd like to adjust Babel's config you can do it. Read the docs here: https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md

How to check current browser against the list of supported ones

We have a list of browsers we test our webapp in. I have a task to notify the user if his browser isn't supported or tested to work well with our app.
We have a browserslist configuration in the project and I'm looking for a way to test current browser against the list.
I tried browserlist-useragent but we can't compile it with webpack due to the fact it uses net, fs, tls and other native node modules we don't want to include in our bundle.
Is there any better way do avoid copying the list of supported browsers in many different places and just use browserlist configuration that already exists to detect if user uses supported one or not?
I'd consider using this "utility" package https://github.com/browserslist/browserslist-useragent-regexp in the project that uses browserslist, and then use the file generated by the script suggested by this package to then use anywhere else.
In reality, all you want is the regex in the generated file. This can be placed in any client or server code you need for browser detection. I've placed mine in some classic asp.
Also note that on a Windows PC, the instructions provided don't result in a file containing a RegEx. Instead, you'd need to run npx browserslist-useragent-regexp --allowHigherVersions to display a suitable RegEx on your console, and then add that where needed.

Node js plugin permissions

I create a web server with Sails.js, and want to allow third dev to create node.js plugins installable from a web page (store).
My problem is I don't want this plugin to require sails (or other critical modules) and have access to database and services and do what they want.
For example using fs and delete all files.
How can I do that ? I have no idea if node.js can lock some scripts on this own directory
I don't think that node expose some sandboxing functionality so when you load a js code into node that code can do what it want.
From your description yours plugins are more like browser javascript code so I think that you can use a headless browser to execute your code and retrieve the result. I've never tried it by myself but it should work. You just have to figure out how to pass parameters to plugin and get the result, also performance will be very bad because the headless browser is quite heavy. Try looking at
http://phantomjs.org/
Another solution is to run the plugins directly inside node but sanitizing the code before running. There are some projects like:
http://gf3.github.io/sandbox/
https://github.com/asvd/jailed
They can help you limiting the powers of the plugins.
Anyway are you sure about it ? in any major CMS platform that I've seen (wordpress, joomla, drupal, liferay ...) the platform's author trusts plugins authors and plugins can always do what they want.

Server side programming language/framework that support hot-reload

Is there any other server side language (with or without frameworks) that support hot-reload or live-coding, so when we develop, all we need is:
Start the web server
Edit the source code
Try on the browser (without having to restart the server)
Similar to PHP
Some other language that I know able to do this:
ruby/sinatra
sinatra-reloader gem (sometimes not working)
rerun (*
nodejs
nodules module
node-supervisor module
nodemon (*
(* automatically restart server when there are changes, not really hot-reload
Is there any other language that are able to do this? and if possible, showing the error (filename and line number, or the full stack trace) on the browser (not in the terminal/console), so I don't have to switch from code-editor then to browser and then to console to see the error.
You can try Perl with the Mojolicious framework: http://mojolicio.us/ (using the morbo server).
Can also be achived with Groovy/Java using the Grails framework: http://grails.org
You can use Erlang to work as a web server, which is designed to allow you to hot swap whole modules of code while the program is up and running. Though, the functional programming paradigm does take a little while to get used to...
How to write a simple webserver in Erlang?
I hope this helps...
I think what you ask for is actually called live-reload, hot-reload is something I believe only Erlang can truly accomplish.
By configuring and adding plugins to Grunt or Gulp, you can watch for changes in any list / kinds of files and describe any action to be initiated. Here is a plugin for Grunt. With this method, any language can gain such ability.
As a side note, Django (Python) has auto-restart as well. But that does not mean Python language has it built-in, Django uses a Grunt-like trick to restart its dev-server.
Revel for Go could do this, or Beego, the difference is Revel only recompile when there are changes on the source code and on new request (so it's more efficient), Beego recompile every time there are source code changes.
EDIT: Beego 1.3.0 remove its hot reload feature T__T

JS library that provides simple utilities for browsers and the nodejs environment?

I'm looking for a javascript library that attempts to provide the same simple utilities in both the browser environment AND nodejs (iteration, mapping, maybe control-flow) so that code can more easily be re-used across server and client. I know you can hack out parts of any JS library (YUI, jQuery, ...) and get them to work in both environments, I'm just wondering if it's already been done or standardized.
The closest I've seen is this: https://github.com/kof/sharedjs
But it's incomplete and has some odd stuff. I'm wondering if there is something more polished before I fork and hack.
The underscore library was built to add more functional programming to jquery, things like mapping, and also templating.
Because it doesn't rely on the DOM (it leaves that to jquery) it functions well in node.
The RightJS link library has a server build link that has node.js in mind.
From the download page:
RightJS is also available as a server-side library. In this case it contains only the native JavaScript unit extensions and the Class, Observer, Options units along with all the non-DOM utility functions from the Util module.
Our server-side build follows the CommonJS principles and is ready for use with the node.js framework.
Node's GitHub wiki has a list of CommonJS-compatible modules which will run in Node and browsers.
Some of the other modules on that page may also run in a browser environment. For example, the excellent DateJS works fine in Node. (It is available as a NPM.)
Btw, RightJS is also available on NPM

Resources