How to access to dist files built by vue-cli? - javascript

Please, help me understand, how to deal with such issue:
I use vue-cli and I want to build in dev mode some js file and then be able to access it by url like: http://localhost:8080/my-file.js
But by default, I can't do it in such way. As I understand, I have to override devServer option?

You can put the JS files you want to include in a root folder called /public/ and when yarn build runs (or npm build if you're using that) it will output them exactly as they are in public to the dist folder for reference like you're looking for.
Note that the public folder needs to be at the same level as your src folder - not inside the src folder.
Source: https://cli.vuejs.org/guide/html-and-static-assets.html#preload

Related

What is the use for the special "public" folder in a Meteor app?

I'm currently using Meteor and trying to learn more about the framework. In the documentation about special directories the following is said about the public/ special directory:
All files inside a top-level directory called public/ are served as-is to the client. When referencing these assets, do not include public/ in the URL, write the URL as if they were all in the top level. For example, reference public/bg.png as <img src='/bg.png' />. This is the best place for favicon.ico, robots.txt, and similar files.
My question is: since I refer to files inside of public/ directory as if they were located in the root folder of my application, what's the different between putting the files in the public/ folder and in the root folder? Or is it just for organization sake?
Also the documentation I quoted above makes some examples using assets (some pngs and favicon.ico) and no JavaScript or HTML files. Am I able to put some JavaScript code in there and then import them in another file by referencing as if this code was located in the root of my app? Or is the public/ directory somewhat made only for assets?
I failed to find any docs that explains what is done to files inside this directory in detail (I only found what I quoted above). So if any documentation of that kind is available it would help a lot!
My question is: since I refer to files inside of public/ directory as if they were located in the root folder of my application, what's the different between putting the files in the public/ folder and in the root folder? Or is it just for organization sake?
Just because you can reference or "import" a file from public/ doesn't mean it functions in the same way to how a normal file import would work. Files located in public gets served as is without being minified/run through the Meteor pipleline. Second, these files are accessible to the client which makes sense given how'd import them without preceding slashes and keep them mostly to serve stuff like favicon and what not.
So in a sense, such files within public are made available within relation to your client bundle/code whilst not being a part of them, get it?
This way of serving assets isn't unique to Meteor, even React has a public directory.
Also the documentation I quoted above makes some examples using assets (some pngs and favicon.ico) and no JavaScript or HTML files. Am I able to put some JavaScript code in there and then import them in another file by referencing as if this code was located in the root of my app? Or is the public/ directory somewhat made only for assets?
AFAIK, you can have files of any type in public but since
It's served as is to the client, meaning it's exposed to the public
It doesn't get minified (i.e being part of the final application build code)
You're advised to not have any of the application code within this directory.
The Public folder is how you serve your static files, when you put a file in your root folder it will not be sent to the client by default and you can't use it in your css, when you put that file (say an image) in your public folder you can use it from the css and refer to it as if it was in your root folder, so if I put a.jpg in the public folder I can use url(/a.jpg) in my css, that won't work if a.jpg is simply in your root folder, that's what the docs mean when they say it's served as if it was the root folder.
unlike in Rails, Meteor initiatives don’t have a rigid document structure and you are quite a whole lot free to prepare your projects as you want. a few folder names but have unique which means, and documents within them will be dealt with in a different way.
consumer
files here will be loaded at the client simplest. files in that folder don’t need things like Meteor.isClient.
server
Loaded on the server best, duh! No need for Meteor.isServer whilst files are in that folder, the client won’t see these files.
public
This directory is for property like photographs. on your initiatives, you reference stuff in the public folder as if they have been in the root folder. as an example, when you have a report: public/nude.jpg, then for your app you include it with .
personal
files only available at the server facet thru the assets API.
checks
documents in there received’t be loaded anywhere and are used for checking out your app.
lib
documents in that folder are loaded earlier than whatever else, which makes it the best listing to vicinity the distinct libraries used on a undertaking.

I don't see the "node_modules/bin" folder after installing browserify

I'm trying to repeat this tutorial:
https://ampersandjs.com/learn/npm-browserify-and-modules/#npm-browserify-amp-modules
But after installing browserify I don't see folder: node_modules/.bin
Instead I see a folder node_modules/browserify. Inside there is a bin folder, and Iinside of it - cmd.js and args.js.
How should I change this line of code in my case: ./node_modules/.bin/browserify app.js -o app.bundle.js to compile all js files into one file?
Or maybe I need to install browserify some other way?
Put together, the flow of creating a very simple web application with these tools might look something like this:
You simply need to point your cmd prompt to the browserify node_module, so drop the .bin if it's not there => /node_modules/browserify yourjsfile.js myjsfile.bundle.js
As far as I can understand this guide: the app.js file or yourjsfile.js needs to have all the library requirements included in order for it to work.
var squareNumbers = require('./square-numbers');
This means you need to write this file as an entry point for all your scripts you need to bundle.
TIP: try to find a youtube video or something to get a better understanding of this guide.
The dot in front of these directories tells you it's a system folder, in this case, not of your operating system, but from another "system/application", like node. It puts these kind of folders alphabetically on top to make a distinction.

Understanding source code symlink in a Angular 2 webpack project

I have two Angular2 projects using webpack as module bundler and typescript.
Aiming to share code between, I split some of the source code and created a symlink to this 'external' source code from each of this two projects.
After doing this the "symlinked code" can not resolve the imports properly.
below a "hello world" project to shows my concerns.
https://github.com/datracka/angular2-symlink-issue
This project runs straight forward BUT if you remove the given src folder and create a symlink to another src folder with the same source code BUT located at /another/path/src then you get a compiler error:
ERROR in .-shared/src/main.ts
Module build failed: TypeError: Path must be a string. Received undefined
at assertPath (path.js:7:11)
at Object.dirname (path.js:1326:5)
at ensureTypeScriptInstance (/Users/vicensfayos/Projects/angular2-abc/node_modules/ts-loader/index.js:156:103)
at Object.loader (/Users/vicensfayos/Projects/angular2-abc/node_modules/ts-loader/index.js:403:14)
So my question is: what I am missing with symlinks when I "distribute" the source code in another folder out of the project folder itself?
My guess is about configure properly resolving object in webpack https://webpack.github.io/docs/resolving.html to override the node.js loading node_modules algorithm https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders but not luck.
Hopefully somebody can point me in some direction.
I found the answer.
My guess was right. it was about how nodejs resolve the dependencies. https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders
The symlinked code is trying to find the dependencies moving up all the way failing until it finds node_module. But nothing is there. node_module is in the parent project.
Therefore the solution is create another symlink from the symlinked code to the node_modules folder of the parent project to resolve the dependencies.
I have a similar setup but decided to add a path to my tsconfig.json in my main app:
"paths": {
"*": ["*", "node_modules/*"]
}
All the modules required by the source code in the shared symlinked folders are in the main app's node_modules folder. This tells the compiler to look in the main app's node_modules folder before trying to find a node_modules folder further up the tree.

How to cache-bust new app builds with Gulp?

I am using Gulp to build a deployable build for an application. I would like to cache-bust all of my .js and .css files so that when a new build is deployed, users will need to retrieve the new "cache-busted" files. For example, if an app.js file is stored in the browser's cache, I would like to have the ref to app.js in my index.html look something like this:
<script src="app/js/app.js?v=1.2"></script>
and so on for all relevant files I would like to cache bust.
Some other questions related to this problem I have:
1) How can I tell that these files are actually getting cache busted properly?
2) Is there a better way to approach this?
Here is what I am trying so far:
//compile index.html, app, vendor
gulp.task('compile-dist', function(){
var revAll = new RevAll();
gulp.src('../../backend-angular-seed/app/**')
.pipe(gulp.dest('../dist/app'));
gulp.src('../../backend-angular-seed/vendor/**')
.pipe(gulp.dest('../dist/vendor'));
gulp.src('../index.html')
.pipe(gulp.dest('../dist/'));
})
This code takes all of the code from my app/ directory (which is a result of my compiled code from my master/ directory) and builds a dist/ directory with all of my js, css, and vendor files.
After this build I have a dist/ directory that looks like this:
/dist
/css
|_app.css
/img
/js
|_ app.js
|_ base.js
/vendor
index.html
I have tried using a few different methods on modifying this dist directory to effectively have it bust the cache. I tried using gulp-cachebust as well as gulp-rev-all, but I believe both of these tools are a bit overkill for what I am trying to do.
Ideally, through Gulp, I would like to go into the index.html file made from the Gulp build, and modify all of my script tags to append the query string of "?v=1.0" on the end of all files I would like to cache bust per deploy build.
Any answers/suggestions would be greatly appreciated. Thanks so much!!!
If appending query string is all you want then i recommend using gulp-cache-bust.
var cachebust = require('gulp-cache-bust');
gulp.src('./dist/index.html')
.pipe(cachebust({
type: 'timestamp'
}))
.pipe(gulp.dest('./dist'));
Here is the turorial for it: https://www.npmjs.com/package/gulp-cache-bust

What is the difference between JS files in dist/ folder and the one in root?

I am totally new to NodeJS and I wonder what's the difference between those two.
For example, in this project (https://github.com/fikriauliya/hipku), we have index.js and dist/hipku.js. They are similar except the last line:
module.exports = publicMethods; vs return publicMethods;
I guess dist/hipku.js is generated from index.js? How is it generated and why does it need to be generated?
Things in the dist folder are usually the product of building from index.js in this case. You'll notice it gets minified, and that folder would eventually be used on production sites. If you look at the package.json file, you'll notice that index.js is the main file, so if you're doing any edits, that would be the place to do so.
It depends on how you want to use this package, in browser or server side.
server side
index.js is the entry of NPM package. When you do require('hipku'), actually NodeJS locates the file module node_modules/hipku and run index.js ends up with the object adhere to module.exports
browser
Just load dist/hipku.js into your browser by <script>, it will register hipku into your global namespace, then you can use it's API.

Categories

Resources