In Electron v20.0.2, it possible to enable nodeIntegration (disable contextIsolation) and use a <script> tag to embed all business logic within a single index.html (no separate main.js, renderer.js, or package.json)?
I'm looking to embed a preexisting, fully-trusted intranet-only website into a frame with limited user inspectability, but I will need to wrap this interaction with filesystem and process-table access.
This is not possible. You must have an entrypoint main.js file that initializes the Electron renderer, and a separate index.html file to bootstrap the DOM.
Related
I am building a chrome extension with create-react-app.
This gives me a folder structure as follows:
my_app/
public/
options.html
popup.html
manifest.json
src/
background.js
index.js
options.js
I want to add a new html page to the extension which can then be called via chrome-extension://[runtime_id]/my_new_page.html
To do so, I placed my_new_page.html in the /public folder and added it to manifest.json under web_accessible_resources.
However when I load chrome-extension://[runtime_id]/my_new_page.html I get only the boilerplate of my_new_page.html and the js which is supposed to render the app content, is not run.
Turns out the problem was with the way my webpack.config handled my bundles. Whatever goes into the build folder is handled by webpack and thus configurations might be required - and can vary depending on what boilerplate/template you are using.
I have loopback 4 - nodejs in the backend and Ionic 4 in the frontend of my mobile application. I'm storing an mp3 file on server sid and I want to stream and play it on the client-side so basically audio streaming from loopback4.
So basically I'm looking for server-side code in loopback-4 which is in typescript to audio-stream a file to client. (I'm unable to use npmjs libraries since most of them are not typed and cannot be used in typescript)
As soon as I know about loopback4, it doesn't have nodejs stream implementation. I recommend you to use native NodeJS streams. Check out this repo https://github.com/noamtcohen/AudioStreamer
Short answer:
I was able to achieve this by simply serving static files i.e my audio file from the server-side. Accessing it using the endpoint I made and calling it using the tag on the frontend.
Long answer:
In loopback 4, you can find a line of code in application.ts file where public directory from the root folder of the server project is served.
this.static('/', path.join(__dirname, '../../public'));
Similarly, you can serve your static files from whatever dir you want. In my case, I served my files from media folder which I added in the root directory of my node project.
this.static('/', path.join(__dirname, '../media'));
The second step is to expose an API endpoint which you would use to make a get request to the server. You can do that inside index.ts file of the server project and the code right below app.start().
app.static('/media', 'media', { extensions: ['mp3'] });
Here, adding the API endpoint and the directory in the root folder of the node project is mandatory.
Now, on the frontend you only have to add your complete url to access the static file from node project to the src attribute of html tag.
Add controls attribute to the tag and html will handle everything for you. You can play, pause, skip, etc.
<audio controls #audioElement id="id1" [src]="http://localhost:3000/media/audio-files/myAudiofile.mp3">
I'm fairly new to web development and I was wondering if there was a way to route a static web page with its own stylesheets and javascripts, using vue-router.
Let's say I have a directory called staticWebPage that contains:
an index.html file
a javascripts directory containing .js files
and a stylesheets directory containing .css files
Now, I'd like to map /mystaticwebpage to this index.html file so it displays that particular static web page.
I'd like to do something like this:
import VueRouter from 'vue-router'
import AComponent from './components/AComponent.vue'
import MyHtmlFile from './references/index.html'
router.map({
'/acomponent': {
component: AComponent
},
'mystaticwebpage': {
component: MyHtmlFile
}
})
Of course, this doesn't work as I can only reference Vue components in router.map.
Is there a way to route to that ./staticWebPage/index.html file using all the .js and .css file contained in the /staticWebPage directory?
So for your case you can do something that uses Webpack’s code-splitting feature.
More precisely, what you want is probably async components. So the code (and the css) used in the component definition (including any script you included there) will be loaded only when the corresponding page is accessed.
In large applications, we may need to divide the app into smaller
chunks and only load a component from the server when it’s actually
needed. To make that easier, Vue allows you to define your component
as a factory function that asynchronously resolves your component
definition. Vue will only trigger the factory function when the
component actually needs to be rendered and will cache the result for
future re-renders.
It can be a bit challenging to setup, so please refer to the dedicated guide in the VueJS doc.
If a directory has been made available to a node application in the server.js file which sits in the main directory using:
app.use("/scripts",express.static(__dirname + "/scripts"));
and I attempt to use require from a file inside of that directory (/scripts/custom.js) using:
var Testing123 = require('../app/models/article');
Is there a reason this is not possible? and is there a solution to that problem?
Edit: In one of my views (views/tree.ejs) I use:
<script type="text/javascript" src="../scripts/custom.js"></script>
to access my Custom script which sits inside my scripts folder which is made available using express.static, Custom uses a web scraper to scrape articles and present them in circles (in the form of an image, title and link) on views/tree.ejs, I now want custom.js to save each article it creates to a mongodb database but to do so, it needs access to things like my Article Schema hence the problem above.
You cannot because Node.js scripts and browser scripts do not run in the same context. Your app.use call just exposes a /scripts route that serves assets statically on your HTTP Server.
Your scripts/custom.js script seems to be a browser-side script (Because you load it with a script tag inside an ejs view) but you want to use require inside it and this will not work as this is a Node.js function.
Have a look at LearnYouNode which is an excellent Node beginner tutorial so that you will understand how modules work in Node and know a bit more about the separation between server-side and client-side JS.
Hi I created a sails app completely for api using. It doesn't has a view file, now I have a html, css, js directory structure, which I want to show as a front page of my app. My html directory structure is following.
+-ApiDocumentationApp
|
-script
|
-css
|
-images
|
--index.html
Now I don't want to use any templating engine like jade or ejs. Also I don't want to change the directory structure to sailsjs', asset and view system. Is there any way I can do it inside sailsjs?
Whatever your reluctance may be, by far the easiest solution here is to place all of your assets (scripts, css, images and index.html) under the /assets folder of your Sails app, and remove the default / route in /config/routes.js. Then your index.html file will be served up by Sails by default.
The alternative would be to modify the default Gruntfile.js (in Sails v0.9.x) or the individual Grunt tasks under /tasks/config (in Sails v0.10.x) to point directly to your top-level asset folders and files rather than ./assets. It's do-able, but error prone and less sustainable!