I am attempting to load a file from a remote URL during build to be WebPacked. This file is an MDX file and I am using the MDX vue-loader to load this file for use within the Vue application.
The system I am deploying is tenanted with a headless CMS powering some pages across the system. I would like to explore the possibilities of loading the MDX files at build time from a remote URL.
I have placed the MDX files on GitHub Pages with the remote URL passed in as an environment variable at build time.
The result is something like this (the idea here is that I can swap the domain during build to satisfy the tenanted site requirement):
import('https://somedomain.com/content/home.mdx');
This fails with your typical error during build of:
dependencies not found please install them using npm --save https://somedomain.com/content/home.mdx
I can WebPack ignore this import which allows it to build but then it fails to load in the browser as browsers will only load external modules with a MIME type of JS. Not to mention the fact that this hasn't been through the MDX loader so I suspect even if I could get the browser to load it the file would not have been parsed into something usable.
I realise I could copy these files in during the build stage from the remote but I was hopeful that there might be a way to either allow the browser to pull this remote file or WebPack to download this remote file and pack it into the output.
Does anyone have any ideas if this might be possible? Many thanks in advance.
As MDX needs pre-processing during build I think integration with Webpack is the only way.
You can try the SaveRemoteFilePlugin webpack plugin which allows you to download the file from remote to local file system. But maybe it's not what you want as it seems pushing downloaded files directly into dist folder without passing it through rest of the Webpack pipeline...
So probably better option is val-loader which allows executing your own Node scripts during build - here you can find the example which does almost what you need - Fetching Remote data during build
Related
I want to create two versions of an app with slightly different content. Therefore I thought about having two "www" directories (lets say "www-foo" and "www-bar") and tell capacitor in the capacitor.config.json which one to use (with "webDir" setting). Also the "appId" should be different then.
So I guessed the easiest way would be to have these capacitor.config.json files with different "appId" and "webDir" settings and when running the build script to specify which config file to use (like it's known from webpack with --config flag). But I can't find any information if it's possible to specify the config file to use for building the app.
Is it just not possible (yet) or am I too stupid to find it? :)
Otherwise I would try to create the capacitor.config.json file with webpack before running the capacitor build script.
I used this article as a guide for my project.
I don't know if exist any option for two or more AppID/webDir in Capacitor.
But understanding you necessity my suggest is create a custom build script in Node.js that change info in capacitor.config.ts (appId) > build (www/www-Two) > sync & copy to platform
I have developed a vue application and did run npm run build
After that I uploaded the content in the dist file to my webpage but it returned a blank page.
Since I did this for testing I uploaded it to a folder in my public_html/mypage.com/vueapplication To get all the paths right I added a vue.config.js with this content:
// vue.config.js
module.exports = {
publicPath: '/vueapplication/'
}
The application now works but I wounder however:
how do I best publish/upload the application to my site? Just by simply dragging the content inte the right folder?
how can I best maintain my site? Do I need to build again and upload, overwriting my files when everytime I make an update on my site?
And what is the difference between build and deploy your application?
Drag and dropping your code should work. But as your app grows you may want to look into automating this. For instance if you use an S3 bucket you can use the aws cli to automate the upload.
Yes, you should overwrite your deploy folder(s). You need to also take care of deploying different binary files, that have the same name. An example is if you have a global css file (main.css for instance). The file will probably change content between deployments, but keep the same name. Browsers may cache the file so users that downloaded older versions of the file will not use the new one. There are different techniques to handle this, but if you use webpack, it uses cache busting techniques and you should be fine.
Build is the process of transforming source code into an artifact(s). Exactly what this means differs from language to language, platform to platform. In the vuejs world this usually means a couple of js files, a couple of css files and some assets.
Deploying means taking the output of a build and making it available to your users. Again this differs from project to project. In the vuejs world this usually means taking the artifacts from the build and uploading them to an http enabled web server.
'import {ComponentHere} from "angular2"', this one hits the server with so may calls for getting all the required file. Is there any way to decrease the number of calls to server?
//localhost:9739/node_modules/#angular/common/src/directives/core_directives.js.
//localhost:9739/node_modules/#angular/common/src/pipes/uppercase_pipe.js".
//localhost:9739/node_modules/#angular/common/src/forms/directives/control_container.js".
etc..
Consider using a WebPack (https://angular.io/docs/ts/latest/guide/webpack.html) it normally will decreased the number of files sended to client (but they will be obviously bigger)
You can use "SystemJS Builder" (https://github.com/systemjs/builder) and integrate it into something like Gulp to make it part of your build process for bundles. You give it an entry point (your app) and it then looks at your dependency tree to build your bundle(s).
When your bundle is used, systemjs will import from your bundle instead of every little js file. When I tested with angular2, I had over 700 files downloaded in DEV and only 35 in PROD when using the bundle.
I am a semi noob in web development.
I just started playing around with angular2 today. And i ran into a problem..
If I were to install angular2 with npm to my local computer, which file is the js file that should be linked to the html page that show up on the client?
In their guide, i see a file called /node_modules/angular2/bundles/angular2.sfx.dev.js. But i don't even see this file at all.
Is there some script that i should run to build that file? Or is the file renamed? I am really confused.
I tried some file /angular2/bundles/angular2.js, but it doesn't even export ng variable to window!
I see that in https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js, eventually ng gets exported. But what changed in alpha 53? (the version i get for doing npm install angular2)
In my projects, I a using
"node_modules/angular2/bundles/angular2.dev.js"
You might additionally need to install/add systemjs, just in case you are using the systemjs library.
I want to server a Dart application on an Apache server. I added the line
application/dart dart
to the mime.type file in the Apache configuration. Still I get the error
Resource interpreted as Script but transferred with MIME type text/plain: "http://localhost/~d022051/mastermind/web/mm-game.dart".
Another issue is the link to the packages directory. I do not want to have symlinks in the documents directory of the server. Is there a smart way to copy the required packages in the correct version?
This message has nothing to do with Apache.
It's a while that I worked with Apache, but as far as I know you don't need specific settings to serve a Dart client app using Apache. They are just like any other static HTML, CSS, JavaScript, or image files.
You get this message because the entry page (index.html) contains a script tag for a Dart script. After you run pub build there are no Dart scripts (yet) in the build output (this will change when Chrome supports Dart and pub build also generates Dart output).
When the browser finds this (currently redundant) Dart script tag it produces this output. When you want to get rid of this message just remove the script tag from the HTML page in your your_app_package/build/web/index.html file.
EDIT
transformers:
- $dart2js:
'minify': true
commandLineOptions: ['--output-type=dart']
or
commandLineOptions: ['--output-type=dart', '--categories=Server']
I haven't tested if this categories argument has an effect in dart2dart too.
EDIT END
EDIT2
There is also the output type dart-multi which creates one output file per input library.
See https://code.google.com/p/dart/issues/detail?id=21616#c9 for more details.
EDIT2 END
Add the following lines to the pubspec.yaml file of your package (thanks to Günter, who pointed this out):
transformers:
- $dart2js:
'minify': true
commandLineOptions: ['--output-type=dart']
Then run pub build with the option --mode=debug.
This results in a "runnable" Dart application, containing the dart sources and the needed packages. The build directory can then be copied to a location visible to your web server. When loading the corresponding URL in the Dartium browser the application is started.