I have a Vue Cli 3 app which, when built, creates a bundle of web components in the "dist" directory.
I'm looking for a way to be able to browse the files within the "dist" directory when running npm run serve, which starts the webpack dev server.
When I do this now (i.e., something like browse to http://localhost:8083/dist/component.js), I'm simply presented with the index.html file found in the public directory.
How can I configure via the vue.config.js file the ability to have the devserver serve up files in the "dist" directory?
devServer is intended to provide development environment with configurations to apply certain loaders, plugins, etc. What you are looking for is a way to serve locally hosted files as a working application. These are two different purposes and I would not recommend adjusting devServer config for such purpose.
There are easy ways to serve static files on local machine.
One of the simplest is to use live-server, serve or similar.
In order for it to work with live-server just few steps are required:
1) Install
npm install -g live-server
2) In terminal navigate to the folder where static files are located (e.g. project-folder/dist/
3) Run live-server command.
This will open a browser tab with index.html as an entry point and will simulate a webserver on a local machine. There are many more options available in docs.
But this will serve the purpose and will not interfere with devServer purpose.
Related
I made a Vue app with Bootstrap-Vue, Express(nodejs) and MySQL. I'm using vue-cli and It's currently in development mode. I've created a SPA(server and client in different folders), and I'm compiling with vscode terminal using:
cd client
npm run serve
and
cd server
node index.js
My problem is: I don't have a domain because it's only for personal use(and I don't have money), and to open the vscode and doing the rotine takes 20-60 seconds. Is there an alternative and quickly way to run my vue app?
I can think of a couple of things you can do.
1) Get a free domain and free hosting
As I mentioned in the comments, you can get a free domain at freenom.com, and host it for free with render.com. This has some pros and cons to it.
Pros:
It's free.
You can access it from anywhere.
No need to setup every time, just enter the URL.
Cons:
You probably won't get to choose the domain's extention. It'll probably be a .tk domain or something not very well known.
I believe that you need to renew it annually, but that's with any domain.
Anyone an access it, though it's not like everyone will know about it.
Needs an internet connection, but this isn't a problem if your app already needs internet access to function.
You can also host it with Github. Here's instructions on how to do that, and here's instructions to set up Github pages.
See Deploying a Node Express App or Deploying a Vue.js App for instructions on how to set up hosting on render.com
2) Automate what you are doing now
Typing takes time, and you can create a batch file to run those commands for you. Depending on what OS you are on (I'm doing this for windows), you can create a file, e.g. OpenApp.bat and place inside what you are already doing:
cd C://ABSOLUTE_PATH_TO_CLIENT
npm run serve
cd C://ABSOLUTE_PATH_TO_SERVER
node index.js
start localhost:8080 or whatever the path is
Then just double click it and it'll run these tasks for you. I haven't tested this idea yet so not sure if it'll work.
3) Build your app
A third option would be to build your app, then serve it. This would eliminate the time npm run serve takes, and you can host it instead with serve.
Install serve:
npm install -g serve
...and build your app:
npm run build
...and serve the app:
serve -s dist
It should instantly serve your app without any long processing time.
You can create a batch file to do this also (again, I'm not sure if it'll work):
cd C://ABSOLUTE_PATH_TO_CLIENT
serve -s dist
cd C://ABSOLUTE_PATH_TO_SERVER
node index.js
start localhost:5000 or whatever the path is
This should be faster than option 2...but editing your app requires it being re-built each time to see the changes.
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...'
...
}
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
I'm using the latest vue-cli version 3.0.
My current issue is that whenever I run npm run build the files generated in the dist folder can't be run without a server.
I would like to be able to just open the index.html file on the browser. How do I go about doing this?
I ran into a similar issue and the following two changes helped me to make it work. Now I can just open index.html in Chrome as a file to run my SPA from file system.
In vue.config.js, I did not have a publicPath configured, which resulted in the default "/".
I had to configure it to empty string like this so that it uses relative paths:
module.exports = {
publicPath: '',
}
PS: Since Vue CLI 3.3 use publicPath instead of the now deprecated baseURL
I was using the history mode of vue-router, which does not work
on a local file system to route the paths back to index.html. So I
omitted the mode to go back to the default hash mode.
I was able to fix this issue by manually changing the url of the referenced files.
It's a bit of a pain, but this was a solution without having to mess around with the build configuration.
What you need to do:
Open index.html
Find href=/ and replace with href=
Find src=/ and replace with src=
NOTE: I was in need of this solution because I was creating a Phonegap app.
You can use the http-server module
npm install http-server -g
http-server dist/
normally the server starts at port 8080 so you can serve the build app on http://localhost:8080
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.