This repository contains the static HTML, Javascript, CSS, and images content of the Deriv SmartTrader website.
In this document
- Other Documents
- Pre-installation
- Quickstart
- Preview on your local machine
- Test link deployment
- Manage releases
Before running or contribute to this project, you need to have the setup of the following packages in your environment
- Ruby, RubyGems
- Sass (
sudo gem install sass
) - Node.js (14.19.3 is recommended)
- NPM (see https://nodejs.org/en/download/package-manager/)
- NVM (see https://www.linode.com/docs/guides/how-to-install-use-node-version-manager-nvm/ and follow install NVM section)
- Grunt (
sudo npm install -g grunt-cli
)
-
Fork the project
In order to work on your own version of the SmartTrader application, please fork the project.
-
Clone using SSH
git clone git@github.com:deriv-com/smarttrader.git
-
Enter project directory
cd smarttrader
-
Add SmartTrader project as your upstream
git remote add upstream git@github.com:deriv-com/smarttrader.git
-
Ensure you are running node version 14
- Check node version
node -v
- Check list of available node versions
nvm ls
- To install node 14
nvm install 14
- To switch to a different node version in the current terminal
nvm use {version number}
- Check node version
-
Install your dependencies:
npm ci
-
To start developing:
npm run start
-
Open the source code and start editing!
Your site is now running at https://localhost
-
To preview your changes locally, run
npm run serve
- It will watch for Javascript or CSS changes and will rebuild on every change you make.
-
Go to https://localhost/en/endpoint.html and change App ID and Server
-
Login with test account
-
To test changes made to templates, you need to re-compile them:
grunt shell:compile_dev
to re-compile all templates.grunt shell:compile_dev --path=about-us
to re-compile only template(s) which serve about-us path in URL.
-
To fix eslint errors run
npm run eslint
-
Commit, push your changes, and create a pull request. GitHub Actions will automatically deploy your application and generate a test link.
-
Register your application here. This will give you the ability to redirect back to your deployed page after login. Use
<GENERATED_TEST_LINK_URL>/en/logged_inws.html
for the Redirect URL and<GENERATED_TEST_LINK_URL>/en/redirect.html
for the Verification URL.- Have your API token ready from app.deriv.com account in order to register
- Make note of your App ID to use at
<GENERATED_TEST_LINK_URL>/en/endpoint.html
Alternatively, you can manually deploy your test link using gh-pages with the following configurations:
-
Register your application here. This will give you the ability to redirect back to your Github pages after login. Use
https://YOUR_GITHUB_NAME.github.io/smarttrader/en/logged_inws.html
for the Redirect URL andhttps://YOUR_GITHUB_NAME.github.io/smarttrader/en/redirect.html
for the Verification URL.If you're using a custom domain, replace the Github URLs above with your domain.
-
In
src/javascript/config.js
: Insert theApplication ID
of your registered application inuser_app_id
.
- NOTE: In order to avoid accidentally committing personal changes to this file, use
git update-index --assume-unchanged src/javascript/config.js
- Run
grunt dev
grunt dev
grunt deploy
grunt dev --path=about-us
There are times that you are working on various branches at the same time, and you want to deploy/test each branch separately on your gh-pages, you can simply use --branch=branchname
for grunt commands:
grunt dev --branch=branchname
This will deploy your changes to a sub-folder named:br_branchname
and it can be browsed at: https://YOUR_GITHUB_USERNAME.github.io/smarttrader/br_branchname/
In order to remove the created folders from your gh-pages, you can use either:
-
grunt dev --cleanup
: removes allbr_*
folders and deploys to the root folder.or
-
grunt shell:remove_folder --folder=br_branchname1,br_branchname2,...
: only removes the specified folder(s) from your gh-pages.or
-
grunt shell:remove_folder --keep --folder=br_branchname1,br_branchname2,...
: only keeps the specified folder(s) on your gh-pages and removes everything else. Just add the--keep
flag.
In order to use your custom domain, please put it in a file named CNAME
inside scripts
folder of your local clone of the smarttrader repo.
git tag ${RELEASE_TARGET}_vYYYYMMDD_${INTEGER} -m 'some message'
RELEASE_TARGET
could be one of staging or production for staging and production release respectively.
Example:
git tag production_v20191010_0 -m 'release fixes to production'
Push the tag:
git push origin staging_v20191010_0
To add translation manually use manual translation doc