Frontend Core

this is the repository that runs sportiv core

Prerequisites

Before you begin, ensure you have met the following requirements:

You need to install node and git locally. The project is based on ES2015+, vue, vuex, vue-router, vue-cli , axios and element-ui. Understanding and learning this knowledge in advance will greatly help the use of this project.

Getting started

# clone the project
git clone https://github.com/sportivapp/frontend-core

# enter the project directory
cd frontend-core

# install dependency
npm install

# develop
npm run dev

.env

for running in your machine, please prepare your .env

Development

TOURNAMENT_URL=https://tournament.quickplay.app
TOURNAMENT_CREATE_URL=https://tournament.quickplay.app/tournament/form/step-1

Production

TOURNAMENT_URL=https://tournament.sportiv.app
TOURNAMENT_CREATE_URL=https://tournament.sportiv.app/tournament/form/step-1

Deployment Staging

# pull production branch
git pull staging

# install dependency
npm install

# build for production and launch server
$ npm run build

Deployment Production

# pull staging branch
git pull main

# install dependency
npm install

# build for production and launch server
$ npm run build

Advanced

# preview the release environment effect
npm run preview

# preview the release environment effect + static resource analysis
npm run preview -- --report

# code format check
npm run lint

# code format check and auto fix
npm run lint -- --fix

Code Editor

To simplify and make it easier to develop Vue JS, we recommend to use VS Code, it has a large library of very useful extensions.

Install these mandatory extensions:

• ESLint (dbaeumer.vscode-eslint)
• Prettier - Code formatter (esbenp.prettier-vscode)

Install these optional extensions:

• Install both Sass extensions:
  • Sass (robinbentley.sass-indented)
  • SCSS IntelliSense (mrmlnc.vscode-scss)
• TODO Highlight (wayou.vscode-todo-highlight)
• Auto Close Tag (formulahendry.auto-close-tag)
• Auto Complete Tag (formulahendry.auto-complete-tag)
• Auto Rename Tag (formulahendry.auto-rename-tag)
• Color Highlight (naumovs.color-highlight)
• Highlight Matching Tag (vincaslt.highlight-matching-tag)
• JS Refactor (cmstead.jsrefactor)

The project will already be setup up with Workspace settings which will assume that the above extensions are installed.

Browser

As the main browser for development and testing, we recommend using Google Chrome as it has some very powerful debugging extensions for Vue and Vuex.

Install these extentions:

• Vue Developer Tools Before committing your code, you should always check that the new changes work as expected in the browsers:

Browsers support

Modern browsers and Internet Explorer 10+.

IE / Edge	Firefox	Chrome	Safari
IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions

For detailed explanation on how things work, check out Nuxt.js docs.