I am trying to deploy a static website to an s3 bucket. I built my site using the webpack template from vue-cli
When I build the site there is a note that:
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
Indeed there are no script tags in index.html but there is a comment that:
<!-- built files will be auto injected -->
If I add a path to the JS build file build/build.js I get that error that require cannot be found.
Is there a way to serve this site via s3? If so, how? Thank you
Related
I have angular 8 website which I build for production using following command:-
ng build --prod --configuration=production --base-href /eportal/*
I have created a folder "eportal" in hosting site and uploaded all components in the folder. It all worked fine and I can browse to the site using following url:-
www.abc.org/eportal/login
Is there any method or any command available in Angular 8 where I can keep my components in "eportal" folder in hosting site but access in this way(removing folder name):-
www.abc.org/login
Please help me on this.
First of all the —prod flag is an alias to —configuration=production. Please take advantage of this
Coming to the question in particular, use the following command
ng build —prod
There should be assets generated in your dist/[app-name]/ folder.
In your hosting site, instead of uploading those assets in the folder you created upload them outside.
ie. You would have uploaded your assets in public_html/eportal instead of that upload them in public_html directly.
I have followed these steps:
Made a vue project with Nuxt.js (tested and working with npm run dev)
Used Nuxt.js static site generation to generate a static distribution under the dist directory of my master repository (also tested using VSCode's Live server plugin, works fine).
Deployed the dist directory to the gh-pages branch using: gh-pages -d dist
In the Options for my GitHub project, which is the GitHub Page for my user (augusto-moura.github.io/), I changed the Source to gh-pages.
The gh-pages branch seems to hold exactly what it's supposed to, but as I open the page, the scripts aren't loaded and each return a 404 eror.
What am I doing wrong? GitHub seems to not be serving the JS files inside the _nuxt directory.
you need to add .nojekyll file at root dir when publishing to GitHub Pages, otherwise it won't get resource files from _nuxt dir.
As indicated in the How to deploy on GitHub Pages? guide, in this tiny, easy-to-miss note...
Branch gh-pages for project repository OR branch master for user or organization site
In order to use Pages for your user account, you need
push-dir --dir=dist --branch=master
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...'
...
}
We're currently using vue as a script file without a build step. We want to start using webpack and vue-cli. We need to preserve the asp login pages and session handling (cookies) so we need the vue stuff and the asp stuff to share an origin.
The current plan is to ignore the vue dev server, to put src and dist inside the existing .net project folder, and to have iis serve the contents of dist. Is this the way to go? We will lose hot reloading.
If we do this, how and where do I configure the url fragment from the web root to the dist folder? Currently, vue expects dist to be the root of the domain.
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.