Exploring the dynamic duo of Github and vue.js

As I am new to programming and currently learning JavaScript and Vue.js, I have been trying to deploy my first Vue.js app without success. Despite spending hours on it, I still cannot figure it out and need to seek assistance.

Every time I try to deploy, all I get is a blank page.

This is what my vue.config.js looks like:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({   transpileDependencies: true,  
publicPath:process.env.NODE_ENV === 'production' 
?'/My-repo/'  
: '/'
})

And here is an excerpt from my deploy.bat file:

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5d534e7a5d534e524f5814595557">[email protected]</a>:<USERNAME>/<USERNAME>.github.io.git main

# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46212f3206212f322e33246825292b">[email protected]</a>:myUsername/myRepository.git master:gh-pages

cd -

I appreciate any help or guidance in resolving this issue. Thank you.

Answer №1

Greetings for sharing your insights, folks.

May it be beneficial to others as well.

In my experience with Ubuntu, using VSCode I devised the deploy.sh file:

#!/usr/bin/env sh

# halt on errors
set -e

# compile
npm run build

# move to output directory
cd dist
    
git init
git add -A
git commit -m 'deploy'

# if deploying to https://<USERNAME>.github.io/<REPO>
git push -f <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72151b0632151b061a07105c111d">[email protected]</a>:<USERNAME>/<REPO>.git master:gh-pages


cd -

then I inputted the following commands in the vscode terminal:

chmod +x deploy.sh

and then

ssh-keygen -t ed25519 -C "<<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7920160c0b391c14181015571a1614">[email protected]</a>>"
  • copy the key
  • navigate to the settings on Github
  • Add a new SSH Key

Proceed to package.json and insert "deploy":"sh deploy.sh" within scripts:

"scripts":{
"deploy":"sh deploy.sh"
},

following which, in Terminal:

npm run deploy

Within github, navigate to:

  • your repository
  • choose the "gh-pages" branch
  • access settings
  • visit Pages
  • choose -> Branch: gh-pages
  • Then click on the link.

Thank you all and have an enjoyable day. Apologies for any language barriers ;)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for implementing automatic line wrapping in a PDF document using React-PDF

I am experiencing an issue with a PDF rendering where very long words are not wrapping onto a new line, instead overflowing the container and disappearing off the page. Below is the setup causing this problem. The styles are listed followed by the actual ...

How can I use `app.js` in Zendesk to connect to an external API using the complete URL

As someone new to developing Zendesk apps, I've been following the step-by-step guide available here. To Summarize I'm facing an issue with passing external API URLs to the AJAX call syntax within Zendesk's app.js file. You can find my sim ...

End the child process.execution after a specific amount of time

I have been searching for information on child process waiting time or response waiting time, but I haven't found anything useful. I'm in need of something like that, so I hope someone can assist me. When I look at the code below, I am printing ...

Importing models in SceneJS does not function properly with Internet Explorer

I've been exploring different webGL frameworks lately. While I like SceneJS, I've noticed some compatibility issues with Internet Explorer. For instance, in IE 11, importing OBJ files seems to cause the online examples to freeze up: Check out th ...

Develop a video in mp4 format using Node.js and ffmpeg by combining two or more jpg images

I am currently working on a video animator project where I generate .jpg images from an html canvas tag and then use these images as frames for the video. The tool I am using for video generation is ffmpeg. Successful with Single Image const ffmpeg = req ...

Troubleshooting: React Testing Library Issue with Updating Material UI DatePicker Input Content

I'm attempting to update the value of the Material UI Datepicker Input using React Testing Library. Unfortunately, I have not been successful with the fireEvent.change() method. import React from "react"; import { render, screen, waitFor, fi ...

Testing reactive streams with marble diagrams and functions

Upon returning an object from the Observable, one of its properties is a function. Even after assigning an empty function and emitting the object, the expectation using toBeObservable fails due to a non-deep match. For testing purposes, I am utilizing r ...

Can you guide me on creating a post and get request using ReactJS, Axios, and Mailchimp?

I am brand new to ReactJS and I am currently working on developing an app that requires integration with Mailchimp to allow users to subscribe to a newsletter. I am looking for assistance on making a request using axios. Where should I input my API key? ...

Firebase allows for the updating of an object within a nested array

Within Firestore, I have a Document that includes a property named "items" which is of type array. This array consists of ShoppingItem objects with the specified structure: export class ShoppingItem { id?: string; name: string; checked = false; } To ...

How can I adjust the transparency in a JavaScript popup modal window for an ASP.Net GridView?

Recently, I added an 'onclick' event to every row of an asp gridview and the popup window that appears is functioning perfectly. Now, I'm interested in adding a transparency level to the body of the popup window for a translucent effect. Can ...

Utilizing Loadash for Sorting in VueJs

I am currently utilizing lodash's sortBy function in my code. Below is how it looks: import { sortBy } from 'lodash.sortby'; computed: { visibleInsights() { return sortBy(this.insights.filter(insight => { const id = thi ...

What is the proper usage of main.js and main.css within the skeleton portlet project that is created by the Liferay 6.0.6 plugin SDK?

Is it a good practice to include portlet-specific JS or CSS in them only if <portlet:namespace /> works within them? Should I rely on unique function/variable names or class names instead? ...

Is it possible to replace the catch function in JavaScript with a custom function?

Below is the code snippet: function xyz() { try { var a = someexecutions(); handlesuccess(a) } catch (err) { handleerror(err) } } This type of function is repeated numerous times in my codebase and I am looking for a way to improve it. f ...

Is there a way for me to retrieve the icons through a content query?

Currently, I am working on customizing a background slider. However, in the CSS file: span.cbp-binext:before { content: "\e000";} The issue I am facing is that I am only getting squares as icons. Is there a way for me to replace these squares with a ...

Retrieve a prepared response from a TypeORM query

I need to retrieve all the courses assigned to a user with a simple query: There are 2 Tables: students & courses return await this.studentsRepository .createQueryBuilder('s') .leftJoinAndSelect('courses', 'c' ...

The $.inArray() function returns a value of false or -1, despite the fact that the variable

My goal is to verify that my currentMedia variable (which exists in the DOM) can be located within my array media, and then return the index i, which should be 0 instead of -1. When I execute console.log(media[0]); and console.log(currentMedia);, the outc ...

disable hover effect

Kindly visit the link below and click on 'Story': Upon mouseover, the animation can be observed: How can I remove this effect? The CSS I am using for this is as follows: .storypageThumb1 { float:left; width:175px; height:91px; ...

Error in VueJS: Variable not defined

I've hit a roadblock with this problem and could use some assistance. After searching for similar issues, I was unable to find a suitable solution. The problem is straightforward: my components are unable to access my variables.scss file unless it&apo ...

The CORS policy has blocked access to XMLHttpRequest at 'http://localhost:8080/' from the origin 'http://localhost:3000'

There seems to be an issue with the CORS policy blocking access to XMLHttpRequest when trying to send a post request from NuxtJS frontend to a Node server hosted on localhost:3000. Despite using CORS in the app, the error persists, preventing insertion of ...

Sketch the borders of the element (animated)

Seeking a way to create a button with an animated border that looks like it is being drawn. Current progress involves some code, but it's not working smoothly with border-radius set. (keep an eye on the corners) https://codepen.io/anon/pen/MbWagQ & ...