I know what these files contain like build contains the minified file which is minified from src file. I need to know how browser works with it. I haven't uploaded my build file to hosting service yet my website got rendered. In the website, <script> SRC was linked to build but there was no build uploaded but a build was created automatically. this behaviour was observed in svelte. But I hope all framework does the same.
As far as I know, build tools like webpack, parcel, ...etc., use BUILD or DIST (Of course you can change it however you want) folder to store production ready build files of the project.
Files in PUBLIC are just copy & pasted to the build/dist folder when build process is finished. You can store index html, images, fonts, favicon or other static text files in there. They are not processed by build tools.
SRC folder is just for storing the whole project's unminified source code.
Most frameworks use 'build/dist - src - public' structure while frameworks like next.js uses root for storing project source code by default.
From the Vercel documentation found here https://vercel.com/docs/build-step "Vercel tries to automatically detect the frontend framework you’re using for your project and configure the project settings for you. If you’d like to override the settings or specify a different framework, you can do so from the Build & Development Settings section." So Vercel did automatically make a build folder for you. This is ok, because you should always use npm run build to create your build folder and point your hosting to use this folder for production.
Related
From the Vue CLI https://cli.vuejs.org/guide/deployment.html, it stated that the dist directory is meant to be served by an HTTP server. But why can't I preview it from the index.html? Cause my understanding is that Vue is just a front end JavaScript framework, so one should be able to preview it from any browser. If am to create a simple vue project using a cdn, it can be directly previewed on the browser. But this is not the case for the vue project created through the CLI. Can someone explain this.
Take a look into the Chrome Dev Tools. You will see a couple of errors similar to those:
As you can see, there are a bunch of files that fail to be imported. This is because these files are not imported using a relative file path, but an absolute one (starting from root, as visible by the prepended / in all files in the index.html).
If you run a local server from the dist directory root will resolve to this directory, allowing the files to be imported properly and your site to be visible in the browser.
However if you simply open the index.html file in your browser, / will resolve to the root of your operating system, which does not contain the files. If you were to copy all those files into the root of your OS, so that the paths would resolve successfully, you would not need a server to view your Vue application.
CLI projects are built with the use on a server in mind. The idea is to just be able to deploy the files in the dist directory to a server and have a working Vue application.
Just to add to a great answer from #aside.
You can use a publicPath configuration option of Vue CLI and set it to '' or ./ - this should be enough to make it work from file system
The value can also be set to an empty string ('') or a relative path (./) so that all assets are linked using relative paths. This allows the built bundle to be deployed under any public path, or used in a file system based environment like a Cordova hybrid app.
vue.config.js
module.exports = {
publicPath: ''
}
I had my react project working correctly in localhost. Then, I decided to deploy it to github pages and it worked perfectly on the server too. Now, I'm trying to work on it again on localhost but it is not showing correctly. For some reason, photos are not loading and some css is not working correctly and after compile it in PowerShell says this:
Compiled successfully!
You can now view myportfolio in the browser.
Local: http://localhost:3000/myportfolio
On Your Network: http://192.168.56.1:3000/myportfolio
Note that the development build is not optimized.
To create a production build, use npm run build.
So if I go to my GitHub pages it is loading correctly but not in localhost (running npm start).
Any suggestion? Thank you in advance and let me know if you need more clarification
I did clone your repositories and found these problems:
You have been directly imported many third-party js given their relative path in the index.html. That doesn't work. You should append %PUBLIC_URL% before them. For e.g.
<script src="%PUBLIC_URL%/js/jquery.flexslider.js"></script> and similary for other script files.
But even this is not the best that you can do. You must not try to use jquery or third party js in a React App. Also, make it a part to install the related JS though npm and make them a part of the package.
You'll have to use <img src={require('/public/images/background.png')}... (Btw, the image name on your gh-pages is different. It's logo.png there)if you want the webpack to compile and make it a part of your project. Also, the path must reside within src and not public folder.
Other errors are are related to keys. Whenever you're mapping and iterating through a list in react you must specify a unique key.
So I've been using knockout.js to do the data-binding for a particular chrome extension I am working on. I've thought that it may make sense to move to a framework (like Angular). After using npm to install all of the dependencies for my angular, the node_module folder is over 100 MB. This is obviously too large to contain in the chrome extension, and have installed on each users machine. Any recommendations on how I should go about using Angular for my extension in such a way that it doesn't require hundreds of MB of files on the client's machines?
There is no need to include bower_components or node_modules folder in your Chrome Extension. Try using Grunt/Gulp for minification.
Your Repository should ideally contain a dist folder, which contains the production ready state of your extension. When you're uploading your extension to the Chrome Webstore, you should create a ZIP of this folder.
Use the below Grunt plugins for optimizing your application,
grunt-usemin - will extract all your stylesheets or scripts from index.html, and combine them into a single CSS or JS file, so you do not have to worry about the node_modules or bower_components folder.
grunt-contrib-uglify - will uglify/minify the JS file.
In short, treat your Chrome Extension as any real world production Angular application, which will normally contain a distribution folder containing the optimized version of your code. You will be deploying the contents in this folder to production, and not the entire repository.
You can refer a Chrome Extension, which I have worked on, named Browser Automation Tookit on Github. You can check Gruntfile.js and the dist folder for further guidance.
https://github.com/kensplanet/browser-automation-toolkit
When you use npm for client-side dependencies you should only include the dist files. (Angular for instance - /node_modules/angular/angular.js)
Usually those files only weight few kb.
It's better to use the package minified version in production if they expose such (/node_modules/angular/angular**.min**.js) or minify it by your self you can use any task runner for it (grunt/gulp)
Furthermore, I will highly recommend you not to reinvent the wheel and start with a yeoman genrator or a project seed like: https://github.com/yeoman/generator-chrome-extension
I'm writing a small javascript text expansion library. The library use a web worker and is packaged up with bower. When installed via bower the parser script is not found (I get a 404) because the browser is looking relative to the root of the consuming site and not relative to the bower script from which it is being consumed (both scripts are contained in the same folder). This appears to be the correct behavior.
My question: how should workers be used in combination with bower such that required scripts can be loaded without hard-coding the bower_components/ path?
function Expander(args) {
...
this.parser = 'parser.js';
this.worker = new Worker(this.parser);
...
}
I would use Grunt. Gulp might be a bit easier starting out since it can be debugged but it is missing a key component for your needs. There are a set of libraries wiredep, build-file and watch that will enable you to do what you are wanting to do. Wiredep watches the bower directory and will automatically add the js files for the dependencies in bower.json into the html and watch can be configured to watch any type of file in any directory for a change. Build-file enables you to configure a template and pass it variables that it will use to dynamically build a js file. You can then use the abilities of grunt to get the correct application path and point it to your file.
I want to have some example sites in my web framework package. The sites run ok if I just want to run them as dart only implementations, but if I want to compile them to javascript I currently copy the sub folder out from my packages /example directory and into a new packages folders /web directory, as I only know how to get dart build to compile the client side code to javascript if its in the web directory. Is there anyway of telling dart build to run in a different root folder? like pkgRoot/example/example_1?
pub build example works fine for me but not yet for Polymer projects (this is work in progress)
Polymer doesn't like when it has a transformer configuration in the package where elements are imported from.
I maintain two polymer elements packages (polymer_elements/polymer_ui_elements).
I have the example files in example but use another package (e.g. polymer_elements_examples) to build the examples to JavaScript.
This polymer_elements_examples has a pubspec.yaml file with a dependency to polymer_elements, a transformer configuration for the entry pages, and example as a symbolic link to polymer_elements_examples
I then build the examples in polymer_elements_examples with pub build example.