How to Upload Specific Location in Firebase Vue
Deployment
Full general Guidelines
If y'all are using Vue CLI along with a backend framework that handles static assets every bit part of its deployment, all you need to do is brand sure Vue CLI generates the built files in the right location, and then follow the deployment instruction of your backend framework.
If you are developing your frontend app separately from your backend - i.due east. your backend exposes an API for your frontend to talk to, then your frontend is essentially a purely static app. You can deploy the congenital content in the dist directory to any static file server, but make sure to prepare the correct publicPath.
Previewing Locally
The dist directory is meant to be served by an HTTP server (unless you lot've configured publicPath to be a relative value), so it will not piece of work if y'all open dist/index.html direct over file:// protocol. The easiest fashion to preview your production build locally is using a Node.js static file server, for instance serve:
npm install -g serve # -s flag means serve it in Unmarried-Page Awarding fashion # which deals with the routing problem below serve -s dist Routing with history.pushState
If you are using Vue Router in history mode, a unproblematic static file server volition neglect. For case, if yous used Vue Router with a road for /todos/42, the dev server has been configured to respond to localhost:3000/todos/42 properly, but a uncomplicated static server serving a production build will respond with a 404 instead.
To prepare that, yous will need to configure your production server to fallback to index.html for whatsoever requests that practise non lucifer a static file. The Vue Router docs provide configuration instructions for common server setups.
CORS
If your static frontend is deployed to a unlike domain from your backend API, you will demand to properly configure CORS.
PWA
If you are using the PWA plugin, your app must be served over HTTPS and then that Service Worker tin can be properly registered.
Platform Guides
GitHub Pages
Pushing updates manually
-
Set correct
publicPathinvue.config.js.If y'all are deploying to
https://<USERNAME>.github.io/or to a custom domain, you lot can omitpublicPathequally it defaults to"/".If y'all are deploying to
https://<USERNAME>.github.io/<REPO>/, (i.e. your repository is athttps://github.com/<USERNAME>/<REPO>), setpublicPathto"/<REPO>/". For example, if your repo proper name is "my-project", yourvue.config.jsshould look similar this:// vue.config.js file to be placed in the root of your repository module.exports = { publicPath : procedure.env. NODE_ENV === 'production' ? '/my-project/' : '/' } -
Inside your projection, create
deploy.shwith the post-obit content (with highlighted lines uncommented appropriately) and run it to deploy:#!/usr/bin/env sh # abort on errors set -east # build npm run build # navigate into the build output directory cd dist # if yous are deploying to a custom domain # echo 'www.instance.com' > CNAME git init git add -A git commit -m 'deploy' # if you are deploying to https://<USERNAME>.github.io # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main # if yous are deploying to https://<USERNAME>.github.io/<REPO> # git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages cd -
Using Travis CI for automatic updates
-
Set right
publicPathinvue.config.jsas explained above. -
Install the Travis CLI customer:
precious stone install travis && travis --login -
Generate a GitHub access token with repo permissions.
-
Grant the Travis job access to your repository:
travis env gear up GITHUB_TOKEN 30(thirtyis the personal admission token from pace three.) -
Create a
.travis.ymlfile in the root of your project.language : node_js node_js : - "node" cache : npm script : npm run build deploy : provider : pages skip_cleanup : true github_token : $GITHUB_TOKEN local_dir : dist on : branch : master -
Button the
.travis.ymlfile to your repository to trigger the first build.
GitLab Pages
As described by GitLab Pages documentation, everything happens with a .gitlab-ci.yml file placed in the root of your repository. This working case will get yous started:
# .gitlab-ci.yml file to be placed in the root of your repository pages : # the job must be named pages prototype : node:latest stage : deploy script : - npm ci - npm run build - mv public public-vue # GitLab Pages hooks on the public folder - mv dist public # rename the dist folder (result of npm run build) # optionally, you tin activate gzip support with the following line: - find public -type f -regex '.*\.\(htm\|html\|txt\|text\|js\|css\)$' -exec gzip -f -m { } \; artifacts : paths : - public # artifact path must be /public for GitLab Pages to choice it up simply : - principal Typically, your static website will be hosted on https://yourUserName.gitlab.io/yourProjectName, and so you will also want to create an initial vue.config.js file to update the BASE_URL value to match your project name (the CI_PROJECT_NAME environment variable contains this value):
// vue.config.js file to be placed in the root of your repository module.exports = { publicPath : procedure.env. NODE_ENV === 'production' ? '/' + process.env. CI_PROJECT_NAME + '/' : '/' } Please read through the docs on GitLab Pages domains for more info about the URL where your projection website will exist hosted. Exist aware you lot tin can also utilize a custom domain.
Commit both the .gitlab-ci.yml and vue.config.js files earlier pushing to your repository. A GitLab CI pipeline will exist triggered: when successful, visit your project's Settings > Pages to see your website link, and click on information technology.
Netlify
-
On Netlify, setup up a new projection from GitHub with the following settings:
- Build Command:
npm run buildoryarn build - Publish directory:
dist
- Build Command:
-
Hit the deploy button!
Also checkout vue-cli-plugin-netlify-lambda.
Use history fashion on Vue Router
In order to receive direct hits using history mode on Vue Router, you demand to redirect all traffic to the /index.html file.
More than data on Netlify redirects documentation.
Recomended method
Create a file chosen netlify.toml in the root of your repository with the post-obit content:
[ [ redirects ] ] from = "/*" to = "/index.html" condition = 200 Alternative method
Create a file called _redirects nether /public with the post-obit content:
# Netlify settings for single-folio application /* /alphabetize.html 200 If you are using @vue/cli-plugin-pwa make certain to exclude the _redirects file from being cached by the service worker. To exercise then, add the following to your vue.config.js:
// vue.config.js file to be placed in the root of your repository module.exports = { pwa : { workboxOptions : { exclude : [ / _redirects / ] } } } Checkout workboxOptions and exclude for more than.
Render
Render offers free static site hosting with fully managed SSL, a global CDN and continuous auto deploys from GitHub.
-
Create a new Static Site on Render, and give Render'due south GitHub app permission to access your Vue repo.
-
Apply the post-obit values during creation:
- Build Command:
npm run buildoryarn build - Publish directory:
dist
- Build Command:
That'southward information technology! Your app will be live on your Render URL as soon as the build finishes.
In gild to receive direct hits using history fashion on Vue Router, you need to add the following rewrite dominion in the Redirects/Rewrites tab for your site.
- Source:
/* - Destination:
/index.html - Status
Rewrite
Learn more than about setting up redirects, rewrites and custom domains on Return.
Amazon S3
Meet vue-cli-plugin-s3-deploy.
Firebase
Create a new Firebase projection on your Firebase panel. Please refer to this documentation on how to setup your project.
Make sure yous have installed firebase-tools globally:
npm install -chiliad firebase-tools From the root of your projection, initialize firebase using the command:
Firebase will ask some questions on how to setup your projection.
- Choose which Firebase CLI features you want to setup your projection. Make sure to select
hosting. - Select the default Firebase project for your project.
- Set your
publicdirectory todist(or where your build'due south output is) which will be uploaded to Firebase Hosting.
// firebase.json { "hosting" : { "public" : "dist" } } - Select
yesto configure your project as a single-page app. This will create anindex.htmland on yourdistfolder and configure yourhostinginformation.
// firebase.json { "hosting" : { "rewrites" : [ { "source" : "**" , "destination" : "/alphabetize.html" } ] } } Run npm run build to build your projection.
To deploy your project on Firebase Hosting, run the command:
firebase deploy --but hosting If you desire other Firebase CLI features you lot utilize on your projection to be deployed, run firebase deploy without the --just selection.
Y'all tin now access your project on https://<YOUR-PROJECT-ID>.firebaseapp.com or https://<YOUR-PROJECT-ID>.web.app.
Please refer to the Firebase Documentation for more details.
Vercel
Vercel is a cloud platform that enables developers to host Jamstack websites and spider web services that deploy instantly, scale automatically, and requires no supervision, all with zero configuration. They provide a global edge network, SSL encryption, nugget compression, enshroud invalidation, and more.
Step one: Deploying your Vue projection to Vercel
To deploy your Vue project with a Vercel for Git Integration, make certain it has been pushed to a Git repository.
Import the project into Vercel using the Import Flow. During the import, you volition notice all relevant options preconfigured for you with the ability to change as needed.
After your projection has been imported, all subsequent pushes to branches volition generate Preview Deployments, and all changes made to the Production Co-operative (commonly "master" or "principal") will effect in a Production Deployment.
Once deployed, you lot will go a URL to encounter your app live, such as the post-obit: https://vue-example-tawny.vercel.app/.
Step 2 (optional): Using a Custom Domain
If you want to use a Custom Domain with your Vercel deployment, you tin Add or Transfer in your domain via your Vercel account Domain settings.
To add your domain to your project, navigate to your Project from the Vercel Dashboard. Once you lot have selected your projection, click on the "Settings" tab, then select the Domains menu item. From your projects Domain page, enter the domain you wish to add to your project.
Once the domain has been added, yous volition exist presented with dissimilar methods for configuring information technology.
Deploying a fresh Vue project
You tin deploy a fresh Vue project, with a Git repository set up for y'all, with the following Deploy Push:
References:
- Example Source
- Official Vercel Guide
- Vercel Deployment Docs
- Vercel Custom Domain Docs
Stdlib
TODO | Open to contribution.
Heroku
-
Install Heroku CLI
-
Create a
static.jsonfile:
{ "root" : "dist" , "clean_urls" : true , "routes" : { "/**" : "index.html" } } - Add
static.jsonfile to git
git add static.json git commit -m "add static configuration" - Deploy to Heroku
heroku login heroku create heroku buildpacks:add heroku/nodejs heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static git push heroku principal More info: Getting started with SPAs on Heroku
Surge
To deploy with Surge the steps are very straightforward.
Kickoff, you would demand to build your project by running npm run build. And if you haven't installed Surge's control line tool, you can simply practice so by running the command:
npm install --global surge And so cd into the dist/ binder of your project and and then run surge and follow the screen prompt. It volition enquire you lot to ready email and password if information technology is the first time you are using Surge. Ostend the project folder and blazon in your preferred domain and watch your project being deployed such as below.
project: /Users/user/Documents/myawesomeproject/dist/ domain: myawesomeproject.surge.sh upload: [====================] 100% eta: 0.0s (31 files, 494256 bytes) CDN: [====================] 100% IP: **.**.***.*** Success! - Published to myawesomeproject.surge.sh Verify your project is successfully published past Surge past visiting myawesomeproject.surge.sh, vola! For more setup details such equally custom domains, you tin visit Surge'south assistance page.
Bitbucket Cloud
-
As described in the Bitbucket documentation y'all demand to create a repository named exactly
<USERNAME>.bitbucket.io. -
It is possible to publish to a subfolder of the main repository, for instance if yous want to have multiple websites. In that case, set up correct
publicPathinvue.config.js.If yous are deploying to
https://<USERNAME>.bitbucket.io/, you tin can omitpublicPathas it defaults to"/".If yous are deploying to
https://<USERNAME>.bitbucket.io/<SUBFOLDER>/, setpublicPathto"/<SUBFOLDER>/". In this instance, the directory structure of the repository should reflect the url structure, for example, the repository should take a/<SUBFOLDER>directory. -
Inside your project, create
deploy.shwith the following content and run it to deploy:#!/usr/bin/env sh # abort on errors set -e # build npm run build # navigate into the build output directory cd dist git init git add -A git commit -m 'deploy' git push -f git@bitbucket.org:<USERNAME>/<USERNAME>.bitbucket.io.git master cd -
Docker (Nginx)
Deploy your awarding using nginx inside of a docker container.
-
Install docker
-
Create a
Dockerfilefile in the root of your project.FROM node:latest as build-phase WORKDIR /app COPY bundle*.json ./ RUN npm install Re-create ./ . RUN npm run build FROM nginx as product-stage RUN mkdir /app COPY /app/dist /app Re-create nginx.conf /etc/nginx/nginx.conf -
Create a
.dockerignorefile in the root of your projectSetting upward the
.dockerignorefile preventsnode_modulesand any intermediate build artifacts from being copied to the image which can cause bug during building. -
Create a
nginx.conffile in the root of your projectNginxis an HTTP(s) server that will run in your docker container. It uses a configuration file to determine how to serve content/which ports to mind on/etc. See the nginx configuration documentation for an instance of all of the possible configuration options.The post-obit is a unproblematic
nginxconfiguration that serves your vue project on port80. The rootalphabetize.htmlis served forpage non institute/404errors which allows us to usepushState()based routing.user nginx ; worker_processes one ; error_log /var/log/nginx/error.log warn ; pid /var/run/nginx.pid ; events { worker_connections 1024 ; } http { include /etc/nginx/mime.types ; default_type application/octet-stream ; log_format main '$remote_addr - $remote_user [$time_local] "$asking" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"' ; access_log /var/log/nginx/access.log main ; sendfile on ; keepalive_timeout 65 ; server { listen 80 ; server_name localhost ; location / { root /app ; alphabetize index.html ; try_files $uri $uri/ /index.html ; } error_page 500 502 503 504 /50x.html ; location = /50x.html { root /usr/share/nginx/html ; } } } -
Build your docker image
docker build . -t my-app # Sending build context to Docker daemon 884.7kB # ... # Successfully built 4b00e5ee82ae # Successfully tagged my-app:latest -
Run your docker image
This build is based on the official
nginxprototype and so log redirection has already been set up and self daemonizing has been turned off. Some other default settings accept been setup to ameliorate running nginx in a docker container. See the nginx docker repo for more info.docker run -d -p 8080:80 my-app curl localhost:8080 # <!DOCTYPE html><html lang=en>...</html>
Source: https://cli.vuejs.org/guide/deployment
0 Response to "How to Upload Specific Location in Firebase Vue"
Post a Comment