Trying to use the aurelia cli bundling facility.
Is it possible to serve all app files (i.e. index.html, app-bundle.html, app-bundle.js, etc) from a single directory or index.html must be at the top (./) directory and the other files in a child (./dist) directory?
Under the covers the cli is using JSPM / System.js's bundling functionality. This works by looking at your config.js paths on where to find the files both for the bundle and when serving. If your paths are set up to serve from the root directory this should work as expected. The problem will be that if you are trying to bundle root it will try to grab all .js files in there which could be bad if you don't exclude them.
Related
When running npm run build my pictures under src/assets/... are not available in the dist directory / production build. So not shown on the site. In dev mode it works for sure.
Any ideas how to make them available after building?
Assets in src/assets must be referenced in the code (via import or similar) to be included in the bundle. If you just want static files to be bundled with your project, you should use public/ instead:
Static assets can be handled in two different ways:
Imported in JavaScript or referenced in templates/CSS via relative paths. Such references will be handled by webpack.
Placed in the public directory and referenced via absolute paths. These assets will simply be copied and not go through webpack.
https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
My project has static folder and asset folder.
I use quasar dev to build project and the building project is stored in dist folder. But in the dist folder, it only has static folder, it doesn't has asset folder.
How can I let asset be packaged in dist folder?
I also had some struggle working with these two directories in Quasar. So I was very happy when I found this page in the documentation. The difference between assets and statics is described as follows:
Assets vs Statics
Files in the “assets” folder are only included in your build if they have a
literal reference in one of your Vue files. Every file and folder from the > “statics” folder are copied into your production build as-is, no matter what.
So I guess that you currently do not use any of the files inside the assets directory in at least one of your components.
Example: One possible way to make logo.png be part of the dist folder is to use the asset in a Vue component like this (also taken from the docs): <img src="~assets/logo.png">. Afterwards run quasar build and check the output in your dist folder. Good luck!
I have a Vue CLI application that I'm currently working on that uses code splitting for JS and CSS, and builds almost 1,000 JS/CSS files on running npm run build.
I am hosting this application on Google Cloud Run, where I pay per request. While the cost is still not that significant, I was still looking to try and prevent the need for 500 requests for every page view. I had a thought, but I'm not sure it's possible...
What I was wondering was if I could have my webpack build generate the JS and CSS files into the dist folder, but reference those files in the index.html file with an external host, instead of assuming a relative path. For instance, the file would exist at dist/css/chunk-abc123.js but in index.html, it would be something like https://storage.google.../css/chunk-abc123.js.
That way, in my CI pipeline, I can upload those files from the dist directory into Google Cloud Storage, and serve them up statically from there.
Does anyone know if this is possible? If so, can you guide me in the right direction?
publicPath comes in rescue.
The base URL your application bundle will be deployed at (known as
baseUrl before Vue CLI 3.3). This is the equivalent of webpack's
output.publicPath, but Vue CLI also needs this value for other
purposes, so you should always use publicPath instead of modifying
webpack output.publicPath.
// vue.config.js
module.exports = {
...
publicPath: 'https://storage.google...'
...
}
Background:
Using VueJS, specifically in regards to PWA template https://github.com/vuejs-templates/pwa
There is a build step npm run build which bundles the project and transpiles any Vue into a distribution browser JS.
The files in /static/ are "static" and just copied into dist, but I am wondering if it's possible to template it at all, or read in some dynamic values.
Question:
Is it possible to have static files that servce under /static in the url, but also during build can accept dynamic values?
More context:
The problem is Vue compiles everything into the dist directory.
All non-static assets are cached and get a unique url each build, whereas static files (I know this is configurable, but you arguably want your non-static assets to have caching) have absolute paths.
Server Routing to map a file in /static/ to a cached dynamic file is outside of Vue. The question pertains to needing to host some "absolute pathed files" (static), but some files might have internally 1-2 urls that need to change in the files depending on what config is used, dev, prod, staging.. just as an example of the use case.
The solution I found was to use CopyWebpackPlugin which comes natively inside build/webpack.prod.conf.js
This is the plugin that copies files from static into dist/static.
You can use the process.env.NODE_ENV to allow you to copy specific files from static into dist.
I decided just to keep environment specific copies of the files with values changed, but you could easily add code to that file to parse and copy over whatever specific files you want.
I think most people put dynamic configuration values in a file under public/ then use javascript fetch to load those values in Vue components. Webpack will copy the files in public/ to the web root (dist/) and it will avoid compiling those config values into the minified javascript. If you put files in static/ and use import or require to load them into Vue components then webpack will resolve those during build time and compiling them into the minified Javascript - which is probably not what you want.
I am trying to use Aurelia with Symfony backend. Part of our application is generated on the backend (good, old server-side MVC) and part of it should be an SPA. I have started aurelia app from skeleton-typescript (JSPM). Directory structure I am trying to create is as follows.
project/
src/
SomeModule/
SomeOtherModule/
FrontendModule/
build/
src/
app.ts
main.ts
...
index.html
package.json
...
web/
dist/
I have changed the output path in build/paths.js and gulp build correctly places the compiled files in the web/dist. I have also added a gulp task that copies the index.html into the web/.
The biggest problem I have is how to manage the JSPM dependencies. If I configure it to downlad the dependencies into web/jspm_dependencies, the application works when launched with Symfony but I am not able to configure karma unit tests properly (it says for example that it can't find aurelia-polyfills). If I leave the jspm_dependencies in the src/FrontendModule then I have to create a gulp task that copies it to the web/ and it takes a lot more than 10s => unacceptable.
This leds me to the following questions:
What is the suggested directory structure for Aurelia project when I am not going to serve the app from the project's root?
Is there any way to copy only the files needed by the application to the web/ (something like main-bower-files for bower)?
I know I can gulp export the app into the web/, but I want to use the same directory structure during the development, too.
I don't want to use browsersync server in the dev because of multi-nature of the application (SPA part and non-SPA part that has to be served from "real" backend).