Vaah Store Setup - Vaah Docs

Note: this is for WebReinvent Team only

Step-1 : Clone the store-dev repo

NOTE

First you need to have a git6 account and make sure you have the access of store-dev and store-module-dev repo
Make sure you have XAMPP installed in your system, if not download and install latest XAMPP and APACHE from this link https://www.apachefriends.org/download.html
To Install PHP and Mysql in macOS please refer to this link: https://dev.to/themodernpk/install-php-for-laravel-in-macos-jkh
You also need to make sure that project you are going to clone exists in the xampp > htdocs directory

Go to the following url: https://git6.webreinvent.com/vaah/store-dev
On the right side of the screen, you will find a dropdown button named Clone with light blue background,
click on the dropdown button and from the list of available options,copy the url from Clone with SSH key
option
On the Dashboard of GitKraken, click on Clone a repo a modal will open having title Repository Management.
It will have three sections, on the left most section you need to make sure you choose Clone option,from the
middle section you need to make sure Clone with URL option is chosen. In the right most section having title
Clone a Repo you will have two fields Where to clone to here choose the directory where you want to clone
the repo and in the URL field enter the copied URL and click on Clone the repo button

Step-2: Initialize Sub Modules

After cloning the repo it will ask for would like to initialize submodules for store-dev?,
you need to click on yes option, it will automatically initialize the submodules for the Store-dev repo.
Scroll the left panel of the store-dev repo, in the bottom section of it, under the SUBMODULES section
you will be able to see the VaahCms/Modules/Store submodule.
To open the VaahCms/Modules/Store submodule, double click on the VaahCms/Modules/Store submodule section,
a panel will appear with title as Edit Submodule, in the bottom section of it, click on Open this submodule button
Similarly to go back to store-dev repo, you can simply click on cross button available next to the Store submodule
available at the right next to store-dev repo.
NOTE
If you get SSH key related error while initializing the submodule, you need to make sure same SSH Key is added in your GIT HUB and GIT 6 account

Step-3 : Initialize Git Flow

NOTE
To checkout to any branch in GitKraken, just double click on the branch you want to checkout

Initialize Git Flow in the store-dev repo,

Make sure you are in the master branch of the repo, just click on the Local option on the left side of the screen
then check whether the master is checked or not.
On the topmost section to the right of your screen, click on settings icon next to your profile
In the left panel of your screen, after scrolling you will be able to see Gitflow just click on that
A panel will appear to your right, to the bottom section of the panel click on Initialize Gitflow button

NOTE
To exit from Preferences section, scroll to the top then click on Exit Preferences button

Initialize Git Flow in the Store submodule repo,

Scroll the left panel of the store-dev repo, in the bottom section of it, under the SUBMODULES section
you will be able to see the VaahCms/Modules/Store submodule.
Double click on the VaahCms/Modules/Store submodule section,a panel will appear with title as Edit Submodule,
in the bottom section of it, click on Open this submodule button
Make sure you are in the master branch of the Store submodule repo, just click on the Remote option on the left
side of the screen then scroll to the bottom section of the Remote check whether the master is checked or not.
On the topmost section to the right of your screen, click on settings icon next to your profile
In the left panel of your screen, after scrolling you will be able to see Gitflow just click on that
A panel will appear to your right, to the bottom section of the panel click on Initialize Gitflow button

NOTE
You must check out to the master branch while initializing the Git Flow.

Step-4 : Add Remote URL on Store Sub-Module

When you hover the mouse on the Remote Section of the Store Sub-Module repo, you will be able to see a plus(+)
icon with the green background
Click on the plus icon, a panel will appear from the left side to your screen having title as Add Remote
From the available options to the bottom of the Add Remote, click on URL
you will be able to see three fields 1. Name 2. Pull URL 3. Push URL
In the Name section of it add Git6
In the Pull URL section of it, add the store-module-dev repo url by copying the url from Clone with SSH key option.
NOTE
Copy the url from Clone with SSH key option from this link : https://git6.webreinvent.com/vaah/store-module-dev
The Push URL section of the Store sub-module will get autofilled with the same value as of PULL URL
Click on Add Remote present at the bottom of the panel,

Step-5 : Change upstream on Store Sub-Module

::alert{type="warning"class="flex items-center p-4 mb-4 text-sm text-yellow-800 border border-yellow-300 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-800" role="alert"} NOTE
Whenever you create a new feature, make sure you change the upstream to GIT6, ::

Steps to Change Upstream

Right click on the develop or feature branch, you want to change upstream ,out of available options
click on Set Upstream option.
It will ask for "What remote/branch should feature/feature-name" push to and pull from?
From the drop-down available, choose Git6 and click on submit button

Step-6 : Update the develop branch of Store submodule

Checkout to develop branch of Store submodule by double clicking on it,
Pull the latest code by clicking on the Pull option from the options available on the top of the screen.

Step-7 : Setup the Store on the local machine

Follow these steps to setup the VaahStore:

First you need to create database for your local machine from below provided link
http://localhost/phpmyadmin/
Follow these steps to create a database

Click on New in the Left Panel of phpMyAdmin
A new screen will be visible to you, in the Create database fieldset provide the database name
Click on Create button in front of it, a new database will be created and it's link will be added in
the sidebar of phpMyAdmin.

On the GitKraken checkout to the develop branch of the store-dev repo
Go to the text editor for e.g Php Storm, on the top nav bar click on File > open, a pop screen will be visible to you,
choose the directory where you cloned store-dev repo and click on ok button.
In the root directory i.e store-dev, create a file named as .env (just copy the content from .env.example file)
Verify these details in .env files
- DB_DATABASE : it should be filled with the database name, you have just created for vaah store
- DB_USERNAME : it should be filled with root
- DB_PASSWORD : it should be blank
Now move to the browser and open the following link in your browser:
http://localhost/your-directory-name/store-dev/public/vaahcms/setup, here replace your-directory-name with your directory
If you encounter PHP errors or require_once errors when trying to open your project locally,go to the terminal of Editor
which is found in the bottom of the screen to the left side and run the command: composer update

http://localhost/your-directory-name/store-dev/public/vaahcms/setup, here replace your-directory-name with your directory

Now go the browser and refresh the page, you will be able to see the setup page of vaah cms
This will ask some basic questions that we already have discussed while setup the vaahcms.
Click on the link to read more about that : https://docs.vaah.dev/vaahcms-2/the-basics/setup
After successfully setup the store-dev, login to the Vaah Store by clicking on backend sign in button or you can directly go to this link : http://localhost/sumit-k001/store-dev/public/backend#/, here replace sumit-k001 with your directory-name.
After login click on Extends > Modules click on activate button, in the left sidebar section Storewill be added to the left sidebar,click on Store to see the dashboard of the Vaah Store.
Go to your text editor, scroll to the bottom of your left panel open your custom env file for e.g .env.sumit and add MODULE_STORE_ENV=develop
Run npm install and npm run dev in the package.json file of the Store module.
Refresh the page or login again by using following url:http://localhost/sumit-k001/store-dev/public/backend/ ,
here replace sumit-k001 with your directory

Step-8 : Create a new feature in Store submodule repo using Git 6

Now you can create a new feature for your Store submodule and can start working on that.
Follow the steps to create a new feature in Git 6

Make sure you are in the develop branch of the repo, just click on the Gitflow option on the left side of the screen then check whether the develop is checked or not.
Hover the mouse over the GITFLOW, you will be able to see a Open Gitflow button with green background, click on that
Then click on Start > Feature > Feature name > Start Feature button

NOTE
While creating a feature you need to make sure feature name shouldn't have any spaces with it, otherwise you will not be able to create that feature.

Step-9 : Setup the Store on the testing environment

NOTE: Before creating MR, you need to do these things:

rebase your feature branch with latest develop,ignore this step if you have created the feature branch with latest develop
update the version from VaahCms > Modules > Store > Config > config.php and composer.json file of Store module
run the command npm run build from the terminal
stage the changed files and push it

You need to create database for testing environment from below provided link
https://test.dev.getdemo.dev/phpmyadmin/index.php
It will ask for credentials like user-name and password, you need to contact your seniors to get that.
Follow these steps to create a database
1. Click on New in the Left Panel of phpMyAdmin
2. A new screen will be visible to you, in the Create database fieldset provide the database name
3. Click on Create button in front of it, a new database will be created and it's link will be added in
  the sidebar of phpMyAdmin.
Go to the text editor and create .env.your-name-feature file for example .env.sumit-feature
copy the content from similar env files already existing like .env.anil-feature
NOTE
Fill these details carefully
APP_ENV : it should be filled with name like sumitFeature
APP_URL=https://test.dev.getdemo.dev/store-dev/sumit-k001/public, here replace sumit-k001 with your user-name
DB_DATABASE : it should be filled with the database name, you have just create for Vaah Store like sumit_store_module
DB_USERNAME : it should be filled with root
DB_PASSWORD : get the password from your seniors
MODULE_STORE_ENV=testing
Scroll to the bottom of your text editor and from there open the file vaahcms.json, update the environments section of the vaahcms.json file, add the env files you have created here i.e .env.sumit-feature.You can take reference from already added files there.
These file changes will be reflected in the develop branch of the store-dev repo,now commit these changes and push this file from store-dev repo
Now you need to create MR for your feature
Go to store-module-dev repo, click on Merge requests from the left side bar
Click on New merge request button from the right side of your screen
A page will open, where in the Select source branch section choose your feature branch and make sure
develop branch is selected in the Target branch
Click on the button Compare branches and continue
Choose the Title of the MR, and in the Description section add your template for the MR or you can find
the template from already created Merged requests
Click on the Merge requests from the left side bar, click on a random MR from Merged Section
Click on Edit, then copy the content of its description section and paste the content in your description section
Now click on Create merge request button, the MR will be created
Once you create MR for your feature branch,the job will run
Click on the Merge requests option in the sidebar, you will be see all the merge requests in front of your screen
Click on the Merge request you have just created, it will redirect you to other page. Under the heading section
of your Merge request, click on Pipelines section
It will show all the Pipelines regarding to your Merge request then from the latest pipeline which is available
at the top. In the Pipeline column click on pipeline id which is available with hash symbol for e.g #5064
Click on the #5064 pipeline id, a new screen will appear with various options
Now click on Jobs section, from there details of the Job will be visible to you ,click on job id available with hash
symbol for e.g #7789
A new page will open with all the details of job, scroll to the bottom and you will be able to get testing environment url.
e.g https://test.dev.getdemo.dev/store-dev/sumit-k001/public/
If your job got failed due to PHP version error, then go to VaahCms/Store/.gitlab-ci.yml file and modify the line composer install to composer update and push the change from your feature branch.
The job will run again, and you will get the job detail which will get you the testing environment url
click on the testing environment url, it will redirect you to a new page
Run the vaah cms setup for e.g https://test.dev.getdemo.dev/store-dev/sumit-k001/public/vaahcms/setup
All the details will be automatically filled once you choose your feature .env file from the list of dropdowns
for e.g .env.sumit-feature
Click on test database connection, then save and next
Login with the credentials
After login click on Extends > Modules
Click on activate button in front of Store module button and then click on Publish Assets button
Store link will be added in the side bar
Sometimes changes are not reflected even after following these steps, in that case you need to hard reload
and clear the browser cache and login again.
Click on the Store link in the sidebar
You should be able to see the dashboard of Vaah Store with updated changes

Getting Started With VaahStore

Basics of Stores in VaahStore