I'm trying to change the src of bundle.js in development with create-react-app.
By default the path is: /static/js/bundle.js
<body>
<div id="root"></div>
</script><script type="text/javascript" src="/static/js/bundle.js"></script></body>
In our production we use Apache as proxy to our API, to test SSO and other functionalities. So I have to add some string to the path, to be like this: myApp/static/js/bundle.js
<body>
<div id="root"></div>
</script><script type="text/javascript" src="myApp/static/js/bundle.js"></script></body>
I tried homepage in package.json, but it only works in npm run build.
It also isn't proxy settings, not HOSt in .env
Is this even possible with create-react-app? I checked documentation but didn't find any solution.
you will have to 'npm run eject' and modify the webpack files to change the output.
Little late but if this helps others, this is how you achieve it. After eject, take a look in the config folder, the file: webpack.config.dev.js:
const publicPath = '/';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
const publicUrl = '';
There you could change this values or, second option is to create a .env file and add:
PUBLIC_URL=/xxx
Related
https://v3.vuejs.org/guide/installation.html#download-and-self-host
https://v3.vuejs.org/guide/installation.html#from-cdn-or-without-a-bundler
how do I import vue without CDN?
so what I care about is not having a build step. everything in pure human-legible js.
I found this https://github.com/maoberlehner/goodbye-webpack-building-vue-applications-without-webpack
I'm going to try and implement it inside unity Embedded browser https://assetstore.unity.com/packages/tools/gui/embedded-browser-55459
the challenge is that my interface cannot load things from the web and it can't be compiled.
Create index.html
index.html (using Vue 3 - important!)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Minimalistic Vue JS</title>
<script type="text/javascript" src="./vue.global.prod.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = Vue.createApp({
data() {
return {
message: "Hello world"
}
}
})
app.mount("#app")
</script>
</html>
Download vue.global.prod.js from https://unpkg.com/browse/vue#3.0.11/dist/vue.global.prod.js and save it along index.html
Open index.html in browser
Works just fine in Chrome or Firefox.
Notes
for the record my code is the repo I linked plus the vue libraries I downloaded and added in the root
Note: following is related to the repo linked before question was changed
The code in repo is written for Vue 2 (just try to open https://unpkg.com/vue in the browser). So if you downloaded distros for Vue 3 (for example the link I'm using above) the code from repo will not work
Even if you download Vue 2 version, the code in the repo will not work when opened from file system as it is using native ES6 modules - problem I described in the previous version of my answer:
As described here and here ES6 modules are always loaded with CORS. So just opening the index.html in the browser (without using server) will not work (definitely does not work in Chrome). Maybe Unity Embeded Browser has this restrictions weakened (as it's purpose is to be embeded) but without possibility to use desktop browser to develop and test your app, your experience will be terrible. I would reconsider the decision not to use bundler...
Update 1
Building Vue.js Applications Without webpack (sample project) will not help you either as it is again using native ES6 modules
To use Vue as a module from a local installation, you don't want to explicitly include it in a script tag in your page. Instead, import it in the scripts that use it. The whole idea of modules is that you can import them which makes explicitly including them in your page obsolete.
In https://bitbucket.org/letsdebugit/minimalistic-vue/src/master/index.js, import Vue:
import * as Vue from "./local/path/to/vue.esm-browser.prod.js";
How to change the source of script/style/image to another domain say cdn.example.com with vue cli build?
For example after the build I get in index.html the following content:
...
<script src=/js/runtime~app.6804cb6b.js></script>
<script src=/js/chunk-vendors.8aaf819c.js></script>
<script src=/js/app.018b8fef.js></script>
</body></html>
The expected output need to be:
...
<script src=https://cdn.example.com/myapp/js/runtime~app.6804cb6b.js></script>
<script src=https://cdn.example.com/myapp/js/chunk-vendors.8aaf819c.js></script>
<script src=https://cdn.example.com/myapp/js/app.018b8fef.js></script>
</body></html>
Is it possible with vue cli build?
You can change the publicPath in your vue cli config:
publicPath: 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.
See the vue CLI documentation
I would like to call an npm module from my code which is an es6 module. Is there a way to do this without transpiling or bundling my code? The reason I don't want to transpile is for simplicity and so I can see my code changes instantly in the browser when I'm debugging.
You can work with native ESM modules in the browser using the script type="module". It works only for browsers that support it.
index.html
<html>
<head></head>
<body>
<script type="module" src="my-script.js"></script>
</body>
</html>
my-script.js
import {stuff} from './module1.js';
import Stuff from './module2.js';
console.log(Stuff);
console.log(stuff);
module1.js
export const stuff = {b: 1};
module2.js
export default {a: 1};
Then setup a quick web server to see the page working:
python -m SimpleHTTPServer 7654
That said, if your problem is refreshing your code at every change and debug it in ES6 dev mode, I recommend sourceMaps as the solution. With sourceMaps you can see your code working compiled (or "transpiled" as you like) as in production while debugging the development version in ES6. Webpack (or alternatives) is very optimized right now and can do partial compiling very quickly reloading the browser at every save.
Vue Devtools works on all demos/examples online but not on my local pages. Even with the following, the Vue Devtools icon remains gray ("Vue.js not detected"). Why?
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app"></div>
<script>
Vue.config.devtools = true;
</script>
</body>
</html>
The Vue source you are using there looks to be minimized / production build to me. You need to use the non minimized / non-production build. Try https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js instead.
Also if you are working with local files i.e. accessing a page like file://... then "you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel." see https://github.com/vuejs/vue-devtools
You must add at-least 1 instance of vue, for the devtools to detect it. So, do:
new Vue({el: '#app'})
You can try to refresh the browser first.
If didn't work, make sure that if you're compiling CSS and JavaScript to have have development compilation for both not a compilation for production with minified files
If at least one file is minified for prod, devtools will not show up
I'm trying to get an ASP5 application to run with Angular 2.0 following a tutorial. After a few steps in I realized it did not work when I try to work on it without an internet connection (I'm usually working on it while I'm sitting in a train). Of course the imports suggested by the tutorial won't work without an internet connection:
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>
Thus, I tried to include the local files from my node_modules folder like this:
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/rxjs/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
The files exist and are correct. But when I try to debug the project I'll get the following error for all four files: SyntaxError: missing ; before statement and when I look at the files via browser, all I receive is files with Hello World! written in it. I obviously seem to be missing something but as I've never worked with the whole npm part before, I have no idea why this would happen and after googling for hours nobody else seems to have that problem.
Is it access restriction? Missing JS module? Can anyone explain how I can include files from my node_modules folder in my html?
In Asp.Net 5 /wwwroot is the default root directory for your web application so when you enter:
node_modules/angular2/bundles/angular2-polyfills.js
its actually searched in the following path:
wwwroot/node_modules/angular2/bundles/angular2-polyfills.js
Although the file exists in the project root i.e.
node_modules/angular2/bundles/angular2-polyfills.js
But since its not in the web application root, you would see 404 error for these scripts.
The solution is to copy these files to wwwroot folder.
I would suggest writing a gulp task to automatically copy files to wwwroot/script/lib folder
and then you can use them like this:
//Sample Gulp file code
var paths = {
npmSrc: "./node_modules/",
libTarget: "./wwwroot/lib/"
};
var libsToMove = [
paths.npmSrc + '/es6-shim/es6-shim.min.js',
paths.npmSrc + '/angular2/es6/dev/src/testing/shims_for_IE.js',
paths.npmSrc + '/angular2/bundles/angular2-polyfills.min.js',
paths.npmSrc + '/systemjs/dist/system.js',
paths.npmSrc + '/rxjs/bundles/rx.min.js',
paths.npmSrc + '/angular2/bundles/angular2.dev.js',
paths.npmSrc + '/angular2/bundles/router.js',
paths.npmSrc + '/angular2/bundles/http.min.js',
];
Then in your html page or view you can use these like this:
<script src="~/lib/es6-shim.min.js"></script>
<script src="~/lib/shims_for_IE.js"></script>
<script src="~/lib/angular2-polyfills.min.js"></script>
<script src="/lib/system.js"></script>
<script src="~/lib/rx.min.js"></script>
<script src="/lib/angular2.dev.js"></script>
<script src="/lib/router.js"></script>
<script src="/lib/http.min.js"></script>
You should see a gulp file in the root of your project, if its not there just create a file with name "gulpfile.js" in the root of your project.
I hope this helps :)