DEV Community: Mindaugas Januška

Part 0: Prerequisites and summary of the project

Mindaugas Januška — Sat, 12 Feb 2022 12:24:40 +0000

Prerequisites
Why I created this project?
What I will build?
Next step

Prerequisites

To feel comfortable to follow along with the implementation of this project you should have at least basic knowledge of Javascript, VueJS, CSS (I will be using CSS framework Bulma), GitHub and how to use Terminal on your computer.

Why I created this project?

In one of my job interviews for the frontend developer role I have been asked to write a code with Vue 3 and provide it for review together with a link to the deployed (live) version.
I have decided to write detailed tutorial how I have solved this task, because I like to learn. And I learn a lot when explain to others how I approached to solve tasks.

I have chosen to store my code on public GitHub repository to make it available for review. Once a code is ready on GitHub repo, then it is really easy to deploy it free of charge to GitHub Pages to make it available online.

What I will build?

Hence, I have been asked to code a demo website with a list of products. Following conditions should have been met:

Loaded page should have several demo products stored.
It should be available to add, edit and delete a product.
Backend or database shouldn't be used, but products should be stored for each particular user who uses demo website.
Product code, name and price should be available to add manually by the user.
When a price of the product is added by the user, then subtotal price should be displayed immediately with a tax of 21% added.
Values should be reactive.
Input fields should have validation rules, so that invalid values wouldn't be accepted.
Demo website should have only 2 pages. Main (index) page to display, add, delete, edit products and billing page to display a list of products and subtotal price of all the products.

Next step

So, let's get started on the action!

Part 4: Deploy VueJS project to GitHub pages for live version

Mindaugas Januška — Sat, 12 Feb 2022 12:12:00 +0000

Clone GitHub repository if you have jumped straight to the Part 4 of this series
What is done so far?
Quick overview
Step 1: Create new git branch and checkout to it
Step 2: Remove dist folder from gitignore file
Step 3: Create vue.config.js file
Step 4: Alter file at /src/router/index.js/
Step 5: Build production version of the project
Step 6: Stage all changes
Step 7: Commit all changes
Step 8: Push dist folder to the gh-pages remote branch on GitHub
Step 9: Enjoy live version of website
IMPORTANT NOTICE

Clone GitHub repository if you have jumped straight to the Part 4 of this series

If you haven't followed all parts of the tutorial, but jumped straight to this part you might consider to clone public GitHub repository with project finished and ready to be deployed to GitHub pages. There is a link to the public GitHub repo.

What is done so far?

Hence, so far I have done:

created new empty project on GitHub.
cloned remote GitHub repository to my local computer.
created new template Vue 3 project on my local computer.
pushed initial template Vue 3 code from my local computer to the remote repository on GitHub.
created a demo website with a list of products.
pushed all code changes to the remote repository on GitHub.

Quick overview

Now I am going to deploy Vue 3 demo website list-with-products to GitHub Pages to make it available online.

I am going to create a new git repository on my local computer, because:

I need to create dist folder and push (commit) it to the remote gh-pages branch on GitHub.
By default dist folder is included to .gitignore file to avoid poluting master branch.
I want my master branch to be clean and clear.

So, let's get started on the action!

Step 1

Open a project with code editor.
In your code editor's console type git branch to make sure that you are in *master or *main repository.
Create a new git branch with the name dist and checkout to it:

git checkout -b dist

Step 2

Navigate to gitignore file and remove dist folder from the list:

Step 3

Create vue.config.js file in the root level of your project and paste following code:

module.exports = {
    publicPath: '/list-with-products/'
}

It should look like that:

Step 4

Alter file at /src/router/index.js/, i.e. replace line 19 with the following code:

history: createWebHistory('/list-with-products/'),

And there is a file to be altered at line 19:

Step 5

Build production version of the project:

npm run build

As you might noticed dist folder were created:

Step 6

Stage all changes:

Step 7

Commit all changes:

Step 8

Push dist folder to the gh-pages remote branch on GitHub:

git subtree push --prefix dist origin gh-pages

Step 9

Congrats! Your project now is live! You can inspect it by navigating to Settings -> Pages:

IMPORTANT NOTICE

Please be patient and wait several minutes if your website will not become available online after you will push a code to the gh-pages remote branch on GitHub. From my own experience I can say, that sometimes it might take up to 5 minutes for the website to become available online.

Part 3: Edit project to meet requirements

Mindaugas Januška — Thu, 10 Feb 2022 08:07:04 +0000

What is done so far?
What I am going to build now?
Install required packages
Register installed packages
Create Router at /src/router/index.js
Create vuex at /src/store/index.js
Create file /src/views/Products.vue/
Create file /src/views/BillPage.vue/
Replace code in /src/App.vue/
Replace code in /src/main.js/
Create new component at src/components/NavBar.vue
Stage and commit changes
Git push code to the remote GitHub repository
Summary

What is done so far?

Hence, so far I have done:

created a new project on GitHub.
cloned remote GitHub repository to the local computer.
created template Vue 3 project.
pushed template Vue 3 code from local computer to the remote repository on GitHub.

But this project does nothing. It is just standard template generated by @vue/cli.

What I am going to build now?

Now I am going to create a demo website with a list of products.

To recap from Step 0 following conditions should be met:

Loaded page should have several demo products stored.
It should be available to add, edit and delete a product.
Backend or database shouldn't be used, but products should be stored for each particular user who uses demo website.
Product code, name and price should be available to add manually by the user.
When a price of the product is added by the user, then subtotal price should be displayed immediately with a VAT of 21% added.
Values should be reactive.
Input fields should have validation rules, so that invalid values wouldn't be accepted.
Demo website should have only 2 pages. Main (index) page to display, add, delete and edit products and billing page to display a list of products and subtotal price of all the products.

So, let's get started on the action!

Install required packages

As you probably noticed earlier I have installed default Vue 3 project. It means, that vue-router and vue-store wasn't installed by default. I have done this intentionally, so that I have to install and register them manually. When things are done by default it is not always clear what is going on and how it works behind the scenes. By installing/adding sofware manually it is always possible to learn and better understand principles of these software.
Hence let's install and register following packages required for this project:

vue-router
vue-store
vee-validate form validation library for Vue.js
Yup data validation library which will be used on top of vee-validate
Bulma CSS

npm i vue-router@next

npm i vuex@next

npm install bulma

npm install vee-validate@next

npm i yup

After the instalation package.json file was added with above mentioned packages:

Register installed packages

When packages are installed they should be registered to be available to use in the application.
Replace default code in the src/main.js file with the following code:

Create `Router` at `/src/router/index.js`

Create a new folder and new file at src/router/index.js and paste following code:

Create `vuex` at `/src/store/index.js`

Create a new folder and new file at src/store/index.js and paste following code:

Create file `/src/views/Products.vue/`:

Create file `/src/views/BillPage.vue`:

Replace code in `/src/App.vue`:

Replace code in `/src/main.js`:

Create new component at `src/components/NavBar.vue`

Stage and commit changes

Git push code to the remote GitHub repository

git push

Summary

Congrats! Application is ready to be used. Run npm run serve to run the application if it is not running yet.

Part 1: Create a new project on GitHub and clone it to your computer

Mindaugas Januška — Wed, 02 Feb 2022 10:49:24 +0000

Step 1: Login to your GitHub account
Step 2: Give a name of your new Github repository
Step 3: Copy URL of your project
Step 4: Clone GitHub repository to your computer
Step 5: Open a project with code editor
Summary

Step 1: Login to your GitHub account

Step 2: Give a name of your new Github repository

Give a meaningful name to your new GitHub repo and configure other settings:

Step 3: Copy URL of your project

After the hit of the button Create repository you will be redirected to the new window.
Copy URL address of the project:

Step 4: Clone GitHub repository to your computer

Open a terminal on your computer. Navigate to the folder you would like your project to live. Type following command in your terminal and hit enter:

git clone paste-a-code-you-copied-in-Step-3

My command looks like that:

git clone https://github.com/mindaugas-pro/list-with-products.git

Step 5: Open a project with code editor

Your project is ready to be maintained on your computer.
Open a project with your preferred code editor. In my case it is Visual Studio Code.
To open a project with Visual Studio code execute following commands in terminal:

cd list-with-products

code .

Summary

Congrats! You new project is ready to be maintained on your computer and to be stored in the remote repository on GitHub.

Part 2: Create a Vue 3 project

Mindaugas Januška — Wed, 02 Feb 2022 10:49:03 +0000

Step 1: Uninstall old version of vue-cli
Step 2: Install new version of @vue/cli
Step 3: Launch @vue/cli
Step 4: Select features in @vue-cli
Step 5: Open a project with code editor
Step 6: Run the project
Step 7: Git stage all changes
Step 8: Git commit all changes
Step 9: Push changes to the remote GitHub repository
Summary

Step: 1: Uninstall old version of vue-cli

Open a terminal on your computer.
If you have new version of @vue/cli installed on your computer, then skip Step 1 and Step 2. Move to the Step 3.
If you have old version of vue-cli installed, then you need to uninstall it first by executing following command as per instructions there:

npm uninstall vue-cli -g
#or
yarn global remove vue-cli.

Step 2: Install new version of @vue/cli

If you have @vue/cli installed on your computer, then skip following line of code and move to the Step 3.
If you don't have installed @vue/cli, then execute following code in your terminal as per instructions there.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Step 3: Launch @vue-cli

In your terminal navigate to the folder you have git clone'ed from the remote GitHub repository. In my case I type:

cd Documents/code/list-with-products

Create new Vue 3 project by executing following command in your terminal:

vue create .

Step 4: Selected features in @vue-cli

You will be asked if project should be generate in the current directory? Type Y:

Navigate with arrow keys and select Default (Vue 3) by hitting enter:

Step 5: Open a project with code editor

Your new Vue 3 project is set up and ready to be maintained on your computer.
Open a project with your preferred code editor. In my case it is Visual Studio Code.
To open a project with Visual Studio code execute following commands in terminal:

code .

Step: 6: Run the project

In your code editor open a terminal and run following command:

npm run serve

Project is up and running:

Please note, that your URL address might be different. That doesn't matter. Paste this URL address to your browser and enjoy with your new Vue project.

Step: 7: Git stage all changes

Stage all changes:

Step: 8: Git commit all changes

Commit all changes:

Step: 9: Push changes to the remote GitHub repository

Push to the remote:

git push

Summary

Congrats! Your new Vue 3 project were created on your computer and pushed to the remote GitHub repository.

DEV Community: Mindaugas Januška

Part 0: Prerequisites and summary of the project

Table Of Contents

Prerequisites

Why I created this project?

What I will build?

Next step

Part 4: Deploy VueJS project to GitHub pages for live version

Table Of Contents

Clone GitHub repository if you have jumped straight to the Part 4 of this series

What is done so far?

Quick overview

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

IMPORTANT NOTICE

Part 3: Edit project to meet requirements

Table Of Contents

What is done so far?

What I am going to build now?

Install required packages

Register installed packages

Create Router at /src/router/index.js

Create vuex at /src/store/index.js

Create file /src/views/Products.vue/:

Create file /src/views/BillPage.vue:

Replace code in /src/App.vue:

Replace code in /src/main.js:

Create new component at src/components/NavBar.vue

Stage and commit changes

Git push code to the remote GitHub repository

Summary

Part 1: Create a new project on GitHub and clone it to your computer

Table Of Contents

Step 1: Login to your GitHub account

Step 2: Give a name of your new Github repository

Step 3: Copy URL of your project

Step 4: Clone GitHub repository to your computer

Step 5: Open a project with code editor

Summary

Part 2: Create a Vue 3 project

Table of contents

Step: 1: Uninstall old version of vue-cli

Step 2: Install new version of @vue/cli

Step 3: Launch @vue-cli

Step 4: Selected features in @vue-cli

Step 5: Open a project with code editor

Step: 6: Run the project

Step: 7: Git stage all changes

Step: 8: Git commit all changes

Step: 9: Push changes to the remote GitHub repository

Summary

Create `Router` at `/src/router/index.js`

Create `vuex` at `/src/store/index.js`

Create file `/src/views/Products.vue/`:

Create file `/src/views/BillPage.vue`:

Replace code in `/src/App.vue`:

Replace code in `/src/main.js`:

Create new component at `src/components/NavBar.vue`