What is the right way to use RequireJS for import external libraries within a ServiceWorker scope?
In the scope of WebWorkers we can use importScripts() RequireJS in web worker.
How would be resolved in the scope of a ServiceWorker where we can be offline?.
I think that ImportScript() would fail and then need search the libraries into the Serviceworker caches, any suggestion??
Thanks a lot.
PD:I try to create the tag 'service-worker' but I dont have enough reputation ;( (I use web-worker instead).
I found the answer at ServiceWorker / explainer.md
The scripts that have been imported the first time the worker is run
will be cached along side it by the browser. The upside is that
imported scripts will be downloaded and cached alongside the main
ServiceWorker script.
Related
First, i have to say that i'm a novice in node and webpack and I'm looking for opinions and advices, not correct some particular code. So if you are patient with me i going to thank you very much. You see, i have to develop a web application in which there are different types of session and every one of them needs different modules of vue and some of them are shared (mine and third parties). I want to standarize my project but i just found information for single web applications, and yes, i'm looking for that but depending on the current session logged and a login page.
The project is middle developed in vanilla PHP 7, PostgreSQL as DBMS and Vue - Vuetify as a framework for javascript. I did some kind of frankenstein to compress the files needed to each session but i'm not confident that it is the better solution because each time the page is loaded, PHP has to compress the files. So now I want to try again with webpack. The problem is that I have seen in many places that webpack sumarizes the entire project in only one bundle and I don't want that.
I have to say also that i use CDN vue and vuetify so all vuetify's unwanted components are loaded.
Just for demostration this is my tree
api/ # db connection, auth and ajax queries
src/ # resources like images and some global css
views/ # here i have all the vue components and main pages depending on session
views/?/components/ # normal components (.js) All of them starts with Vue.component('name',{...})
views/?/routes/ # routed components (.js) All of them start with {...} (Vue-Router)
views/?/main.php # Here I define the components and routes needed and I query the database some initial things.
views/?/main.js # Vue-component that is loaded later
general_template.php # has the skeleton of all main.php, so each main.php when they are ready, load it at the end.
index.php # check if session is active so can show a main page for each type of user.
Can you guide me which technologies i have to use in node? and how should i organize my files? Feel free to disorganize the entire tree if you think it is like an spagetti. Thank you beforehand.
I’m new to React, and I have trouble with finding best solution for my app.
My current (Node.js+Express+Handlebars) app has one main menu with place where I render HTML received from AJAX request made after click on menu element. Then all actions inside this element are done by proper JS script. I wanted to improve it by using React, but I have problem with permissions management.
Currently, after authentication, handlebars receive list of files which user should load and render it as src in element. If user has access to only 5 of 20 modules, he can access only proper JS files. Also, he can’t access HTML he don’t has access to.
How to manage it in React? I want to have one interface for all users, but I don’t want to store logic for all components accessible for every user. I was thinking about something like AJAX loading components for React, but how to manage it?
Is it even possible? As I understand (maybe wrong), all React components are compiled from separated JSX files to one main.js, so is it possible to add separate files with other components?
I believe that the issue that you have encountered is a crucial step on the long stairway of making something great. The solution to your problem is the balance of all the present factors and consolidation of them to cooperate on a mutually beneficial basis. I hope that solves your problem
I would like to do the initial render for my React application on the server side, but am having trouble importing and using React components without using something like babel/register (which is not suitable for production).
I would rather not have to compile my server side code for production, but would like to load an node-suitable React component to send to the client via res.send(React.createElement(Html)).
When I run this I get...
Unexpected token <
I assume this is because my components render method returns <!doctype html>...</html.
Is there a way I can have Node render a React component without having to use babel/compiling code before deploying?
Is there a way I can have Node render a React component without having
to use babel/compiling code before deploying?
No. Since JSX isn't real JavaScript, you need to transpile it at some point, either ahead of time (in a build script) or at run time (using babel-register).
Personally I ignore babel's advice to not use babel-register in production. It works just fine, I always cache + prime responses so performance isn't relevant. I'm open to hearing why transpiling with babel-register is bad though.
Short answer, yes.
this is from the official docs:
ReactDOMServer
The react-dom/server package allows you to render your
components on the server.
ReactDOMServer.renderToString
string renderToString(ReactElement element)
Render a ReactElement to its initial HTML. This should only
be used on the server. React will return an HTML string. You can use
this method to generate HTML on the server and send the markup down on
the initial request for faster page loads and to allow search engines
to crawl your pages for SEO purposes.
If you call ReactDOM.render() on a node that already has this
server-rendered markup, React will preserve it and only attach event
handlers, allowing you to have a very performant first-load
experience.
ReactDOMServer.renderToStaticMarkup
string renderToStaticMarkup(ReactElement element)
Similar to renderToString,
except this doesn't create extra DOM attributes such as data-react-id,
that React uses internally. This is useful if you want to use React as
a simple static page generator, as stripping away the extra attributes
can save lots of bytes.
However, if you want to use JSX you have to use babel, otherwise, you can use Reacts JS Syntax.
Here is a link to an example:
https://github.com/mhart/react-server-example
Where do I put my client side Javascript? I tried including it in my jade template like so:
script(type="type/javascript",src="../typeahead.js")
It returned this Cannot GET /typeahead.js
I also tried require('../typeahead.js') which unsurprisingly did not work. Just to clarify since I am new to Node.js, require is for server side code correct?
It can go wherever you want. You must write code to serve it.
Since you're using Express, there is a "static" module built-in for serving files on disk. Use it like this:
app.use(express.static(__dirname + '/public')); // 'public'; is your directory for static files
Remember that with Node.js, you're generally writing the server. There are not set ways of doing things for web apps... there is no requirement that you're even building a web app. Everything it up to you. There are common modules for common tasks (such as Express/Connect) but in the end it's up to you.
require is part of the Node.js API and doesn't work in a browser. However, there is always Require.js and Browserify.
I need my application to send emails, so I came across nodemailer, easy and fast solution. Tried it and after a node app.js the email was sent. Great.
Now, I want my web app to send emails, and since require is not defined in browser-side I ended up reading about browserify, commonJS and finally requireJS.
Tried it for simple .js files and it seems to be pretty much straight forward. Right now I'm stucked in the process of making it work with the folder node_modules that stores my nodemailer module.
How can I do that? In the docs it says that I shouldn't require("./node_modules/foo/foo"). so how can I require my module? I couldn't find any complete example of this.
The structure of my app's relevant files is something like this.
Project/index.html *
Project/js/app.js//my own mvc app.js, not requireJS's
Project/js/mailer.js//.js that holds the nodemailer code for sending emails
Project/node_modules/requirejs//requirejs.js inside
Project/node_modules/nodemailer//nodemailer module
Update
(since it's taking my whole day)
I'm getting Uncaught Error: Script error for: nodemailer It can't find the nodemailer.js file. It's looking for it in the root directoy. Why? Doesn't requireJS look for it inside node_modules?
Index.html
<script
type="text/javascript"
data-main="main"
src="./node_modules/requirejs/require.js">
</script>
Main.js
var nodemailer = require(["nodemailer"],
function(nodemailer){
//email code
}
);
Any idea what is it that I'm doing wrong?
Please understand that a browser has a specific set of capabilities, and directly sending email is not one of them. Browserify can only make a very limited set of simple nodejs modules runnable inside the browser, but it can't magically make the browser able to read arbitrary files, make arbitrary network connections, do DNS lookups, and other stuff that have been explicitly added to node to make it into a server environment. There is some misleading browserify documentation around this, but no you cannot take an arbitrary node module, run it through browserify, and use it in the browser. You will need to do something along the lines of:
Use a good old <a href="mailto:..."> link
make an ajax request to the server and have the server send a mail on behalf of the browser