I am trying to generate a production build in StencilJs using the command "npm run build". One of the generated js files in www build folder has imports of index-0e699d98.js and app-globals-320636ef.js. But these files are not present anywhere in the build folder. This in turn is leading to 404 errors when we are deploying the production build.
Both of these files, however, are present in the www folder when I'm taking a dev build, i.e, by running "npm start".
The file that imports the file which in turn has both of the above mentioned imports is included as a script tag in the index.html file in the build folder.
<link rel="modulepreload" href="/build/p-a5903422.js">
<script type="module" src="/build/p-a5903422.js" data-stencil data-resources-url="/build/"
data-stencil-namespace="tax-engine"></script>
(The p-a5903422.js file has another js file import which in turn imports the index-0e699d98.js and app-globals-320636ef.js)
Is anything going wrong during the build or do I need to set some Config properties so that I can get index-0e699d98.js and app-globals-320636ef.js in production build?
I too have been facing this same issue and the only reliable way to get it working is to execute npm run build twice.
This happens with recent version #stencil/core#2.19.3
Related
NPM donwloads a lot of files needed for the webpack/libraries. From what i understand, webpack generates a one single bundle file, that contains all code for script working. After that, when i finish building my app, do i need to keep all those jquery/react files and webpack itself? Or should i just delete them?
It's common practice to make a project portable/shareable by following these steps;
Create a package.json and ensure to capture all dependencies,devDependencies and/or peerDependencies.
Add/commit this package.json and package-lock.json files to your version control
Create a .gitignore file and add node_modules to it (in essence, this cuts out that baggage)
For production purpose (e.g. to be shared with client finished product), build the project (which often results into a small files, often within /build or dist). And then you can always push that build file to AWS or Heroku or the clients' servers.
What does the above help you achieve?
You can easily start the project using any machine, as long as you run npm install which reads from your package.json.
When I build my Vue project with npm run build, I would like to choose particular Vue files to be (re)compiled into the dist folder. My idea was by changing the configurations in webpack or the webpack-chain to compile from a specific entry point. An example of my goal would be:
Let's assume I have 2 components; A.vue and B.vue (and ofcourse the default files like index.html etc.)
Then I build the project, which gives me a ./dist folder with everything compiled. Then after I make changes to B.vue (and change the config file most likely), I only want B.vue to be recompiled into the ./dist folder. I already use dynamic imports so that A.vue and B.vue are different bundles, so that other files should not have to be changed.
Can I select a specific file to be compiled only?
(I am aware that the dist folder gets emptied after building, but that I will try to fix later if this could be possible)
I think you're looking for watch mode: npm run build --watch
I am trying to deploy my first application made with vue-cli,
everything works in npm run dev,
now when I build with npm run build, it created dist directory, with file structure:
index.html
static/
but every reference in index.html etc.. is to /app/static
src=/app/static/js/vendor.87e3cb
if I create a directory named app and copy static to /app than everything works.
I am obviously missing something simple.
simple enough, in /config/index.js file, I had assetsPublicPath: '/app/',
set only for build, but commented out for dev.
Not able to load js files from local where as CDN path working fine in Dojo 2 application. Once included custom JavaScript files using script tag in index.html. But in browser it shows the error 404 file not found.
Please suggest as i need these for my Dojo 2 application.
This is my how i am using script tag to include
script src="assets/js/jquery.js" type="text/javascript"
Currently, the Dojo 2 build does not copy external assets to the build directory, but we are working on a way of specifying such assets in the .dojorc config (index.html is not/will not be scanned for assets). In the meantime, another means of delivering static assets will be required (for example, configuring the assets/ path at the server level).
Assuming you are using the dojo 2 cli you need to move your assets folder into the root of you application, this is in the dojo 2 build docs:
While most assets will be imported by modules in the src/ directory and therefore handled by the main build pipeline, it is often necessary to serve static assets or include assets in the HTML file itself (e.g., the favicon).
Static assets can be added to an assets/ directory at the project root. At build time, these assets are copied as-is without file hashing to output/{mode}/assets, and can be accessed using the absolute /assets/ path. For example, if users need access to a static terms of service document named terms.pdf, that file would added to assets/terms.pdf and accessed via the URL /assets/terms.pdf.
The build also parses src/index.html for CSS, JavaScript, and image assets, hashing them and including them in the output/{mode}/ directory. For example, it is common for applications to display a favicon in the URL bar. If the favicon is named favicon.ico, it can be added to the src/ directory and included in src/index.html with . The build will then hash the file and copy it to output/{mode}/favicon.[hash].ico.
But another option is to add a new npm command "move-assets": "cp -R ./src/assets ./output/dist/assets" to you package config
"scripts": {
"start": "dojo build --mode dev --watch memory --serve",
"build": "dojo build --mode dist && npm run move-assets && npm run move-assets",
"move-assets": "cp -R ./src/assets ./output/dist/assets"
}
This will move your assets into the build output folder ./output/dist
When I download a package in bower or npm, many irrelevant/not-useful files also
get included especially in npm packages. I generally only include .css or .js files of that package for e.g. in bootstrap e.t.c. But for package like polymer or Anjular.js or Electron we need multiple other file too. So when I deploy my project should I include the complete folder or just copy the required files separately or is there any other approach ?
When you deploy to your production server, a good approach would be to only include the files you are actually using. You should also create an optimized file to serve to the client.
To achieve that, you normally have a deploy script that generates one or more minified .css or .js files (for example, vendor.js for libraries and bundle.js for your code).
This script can be build with tools like grunt, gulp or you can use a module bundler like Webpack or Jspm.
You can create your own Grunt or Gulp script like the ones in this website.
When using a module bundler and modern javascript to organize your code, you'll build, for example, an entry javascript file (bundle.js) that will look like
import {MyLibrary} from 'my-library';
import {AnOtherLibrary} from 'an-other-library';
console.log(MyLibrary.saySomething());
In this case, Webpack handles the node_modules imports and the creation / minification / concatenation of the production version of .js files.
As you said, there are multiple files to be included (js, css or even fonts) so configuring your scripts may take some time. Try finding a Yeoman generator that uses your frameworks, and use the deploy scripts others already created for this purpose. This one uses AngularJS, Bower and Grunt. This one uses Webpack and ReactJS.