How would I go about creating a JSON configuration file that is available during development and build in Vue?
Related
I have an SPA application (lit-element, Google mwc and ASP.Net controllers) that is installed at several customers. There is a config.js file under wwwroot that contains some customer specific settings/URLs. This file is created at installation time manually. Problem is: everytime I update the app I have to restore this file from a backup because the update installation has replaced it with a template file.
I'd prefer to have the contents of this file in my appsettings.json file and generate config.js dynamically. In contrast the appsettings.json can then be placed in some external directory and passed to the web app via a command line parameter or environment variable.
Question is: how to intercept a request for config.js and dynamically create the file in memory?
I'm am trying to understand the directives that produce the output /dist/vue[.min].js file(s). While looking in node_modules folder, I see /dist and /src folders. The /src folder contains index.js. If I were to follow the dependency tree all the way through, would that result in the dist file? If the compiler is present, or the rules, in the vue package. I would appreciate if someone could point this out (and also verify/debunk my understanding of how the output file is produced).
Your build tool is actually responsible for creating the vue.min.js file. In case if you are not using any build tool then you need to use the minified version of vue.js file from the Vuejs site.
Also the vue.js gets created using the mode value of process.env.NODE_ENV variable.
You can have more details of this from the Production Deployment docs from the Vuejs site.
The rest of the details regarding the dir structure given in the vue.config.js config file.
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 used the ex_docs package to automatically generate documentation regarding my project modules in a Phoenix Framework project.
Then with mix docs I successfully created the doc folder at the root of the project.
However the contained files are full-fledged html files instead of templates.
How can I route to these files with the Router?
The documentation is generated as static HTML files. You can serve static files with phoenix from the priv/static directory, copy your files from doc/ to the static directory.
You can find the configuration for the static file in your endpoint.ex file, see plug for documentation: http://hexdocs.pm/plug/Plug.Static.html.
I'm having a hard time trying to set up dojo build in my project.
Basically, I have my js folder with all my custom widgets and components. I simply want to combine all javascript files form js folder into one single file.
dojo sources are located outside this folder. The structure looks similar to this:
/public
/prod
/dojo-1.9
/dijit
/dojo
/dojox
/js
myScript1.js
myScript2.js
Do you have any idea on how should I configure the package.json and profile.js? The documentation doesn't seem to help since all I am getting is an output folder with the same contents as the js folder (no javascript is merged).
You can start by reading this article:
https://dojotoolkit.org/reference-guide/1.10/build/simpleExample.html
It provides a simplified overview of dojo build system.
Additional there is dojo boilerplate with a sample of folder structure and profile.js configuration for quick start here:
https://github.com/csnover/dojo-boilerplate
I definitely suggest you to use the boilerplate as start for your project as it simplify a lot initial configurations.