how to use vue.js offline? - vue.js

Hi I received a web project with all already implemented CSS js HTML code, directories, project structure etc.
I have to make changes in view.js but I don’t always have internet access on the move so is there a way to continue this project locally without changing my project structure?
I already have an existing web project whose file contains
-an HTML page
-a CSS file
-a js file
Place in their folders respectively
I want to use view.js on this project
The problem I don’t always have internet access when I’m on the move.
So how do I use seen?
Knowing that:
CDN is a script placed in HTML requiring a connection to run view
-Vue CLI is a package that allows to generate a new project view "certainly out of competition"
But I should start over
Because the directory structure and already predefined what doesn’t suit me.
How does it work?
How to just add view and continue the project without zero spread?
I already installed node.js (npm) on my pc if its can help .
"-- IN BRIEF:
If you still don’t understand
Imagine being entrusted with a web project all made HTML CSS JS already configure etc...
And you must use VUE to make changes
knowing that on the move you don’t always have the connection
How do you do that?

Assuming (I can't tell 100% from your description) that it is an un-compiled implementation that uses the CDN, you can easily handle this by copying the vue library locally and update the html to use the local version instead of the CDN.
if you need to keep the html, you could use a browser plugin like requestly but there are many others. There you can select the url that goes to the cdn and replace it with the local one.
Another option for chromium-based browsers is to use local overrides. Picture upload is not working currently, so can't include a picture, but the option is available through the sources tab in the developer tools. You need to enable overrides, select a folder, then you can select the resource that you want to serve from local override.

Related

Blade view not reflected in browser, even after storage clear using Nwidart/Laravel-modules

My changes are not reflecting inside browser even after storage/framework/views clear and running various artisan clean-up commands.
To make clear that I am calling the right file.
Is it possible my PHP environment is somehow persistent loading this file?
I found the answer.
I am using Nwidart/LaravelModules to structure my project.
Laravel Modules has a command that publishes all modules to the views folder in resources/views. Apparently Laravel was using those 'published modules' alongside the 'official' modules, which caused the problem above.

export and maintain vue application

I have developed a vue application and did run npm run build
After that I uploaded the content in the dist file to my webpage but it returned a blank page.
Since I did this for testing I uploaded it to a folder in my public_html/mypage.com/vueapplication To get all the paths right I added a vue.config.js with this content:
// vue.config.js
module.exports = {
publicPath: '/vueapplication/'
}
The application now works but I wounder however:
how do I best publish/upload the application to my site? Just by simply dragging the content inte the right folder?
how can I best maintain my site? Do I need to build again and upload, overwriting my files when everytime I make an update on my site?
And what is the difference between build and deploy your application?
Drag and dropping your code should work. But as your app grows you may want to look into automating this. For instance if you use an S3 bucket you can use the aws cli to automate the upload.
Yes, you should overwrite your deploy folder(s). You need to also take care of deploying different binary files, that have the same name. An example is if you have a global css file (main.css for instance). The file will probably change content between deployments, but keep the same name. Browsers may cache the file so users that downloaded older versions of the file will not use the new one. There are different techniques to handle this, but if you use webpack, it uses cache busting techniques and you should be fine.
Build is the process of transforming source code into an artifact(s). Exactly what this means differs from language to language, platform to platform. In the vuejs world this usually means a couple of js files, a couple of css files and some assets.
Deploying means taking the output of a build and making it available to your users. Again this differs from project to project. In the vuejs world this usually means taking the artifacts from the build and uploading them to an http enabled web server.

how to change layout of Jitsi Meet

Maybe I'm wrong ... but as far as I know all Jitsi Meet element (home and room page) build using script that has been minified and also some of them connected to files inside jitsi server.
Is it possible to change the layout of Jitsi Meet html (home/room) base on my custom layout? how?
You will need to build the sources with your changes. Please see: https://github.com/jitsi/jitsi-meet#building-the-sources
When you install jitsi-meet, indeed the files are in /usr/share/jitsi-meet. But these aren't really the source files and those cannot be easily changed.
In order to change that page, you need to check out the project source code from https://github.com/jitsi/jitsi-meet, make your change, run npm install && make as stated in the README and then make sure your web server uses your checkout folder instead of /usr/share/jitsi-meet.
You might be able to use lib-jitsi-meet to create a custom layout as described in this dev community post.
https://community.jitsi.org/t/jitsi-dev-jitsi-meet-video-conferences-with-a-custom-gui
Jitsi uses React.js and Redux for the frontend and without modification of source code and rebuilding process, it is practically not possible to change the layout. for more detail, you can check how to modify the Jitsi app post
then you should change your build with the old one on the server at this location: /usr/share/jitsi-meet/libs (if you have not change the source location manually in Nginx config)

How to work with css and js files in moodle plugin

I need to develop a plugin for Moodle, and i need to have some js and css files in plugin. But i have the next problem - how to work with them from installed plugin? Of course, i can hardcode their path via to moodle structure, but it's a very dirty and bad way. Also, i know that i can place all js and css code inline, but i think that it's a bad decision too. Is there a built-in way to serve assets from plugin? I tried to find it in documentations, but found nothing.
Thanks
I assume you want to know how to include CSS and JS files into your plugin.
You can include a JS file via the command:
$PAGE->requires->js( /relative/path/your_script.js');
You can then call a JS function once the page has been downloaded with the command:
$PAGE->requires->js_init_call ( your_JS_function_name, array_of_parameters_here, bool: on DOM ready);
For example:
$PAGE->requires->js_init_call('init', array($USER->lang), true);
Be sure to make the $PAGE available with global $PAGE;, first.
Your CSS file can be named styles.css and put into the root folder of your plugin. The file will be automatically read by the system and included. It will take precedence over (will overwrite the settings of) the system CSS files. After that you will have to reload the theme caches.

Dropwizard serve external images directory

I have a dropwizard API app and I want one endpoint where I can run the call and also upload and image, these images have to be saved in a directory and then served through the same application context.
Is it possible with dropwizard? I can only find static assets bundles.
There is similar question already: Can DropWizard serve assets from outside the jar file?
The above module is mentioned in the third party modules list of dropwizard. There is also official modules list. These two lists are hard to find maybe because the main documentation doesn't reference them.
There is also dropwizard-file-assets which seems new. I don't know which module will work best for your case. Both are based on dropwizard's AssetServlet
If you don't like them you could use it as example how to implement your own. I suspect that the resource caching part may not be appropriate for your use case if someone replace the same resource name with new content: https://github.com/dirkraft/dropwizard-file-assets/blob/master/src/main/java/com/github/dirkraft/dropwizard/fileassets/FileAssetServlet.java#L129-L141
Edit: This is simple project that I've made using dropwizard-configurable-assets-bundle. Follow the instructions in the README.md. I think it is doing exactly what you want: put some files in a directory somewhere on the file system (outside the project source code) and serve them if they exist.