AliBigdeli / ReactJS-Hamravesh-Docker-Template

simple deployment of reactjs websites to hamravesh with cicd included

ReactJS Hamravesh Docker Template

Sample Project to use hamravesh service provider for reactjs app

Guideline

• Guideline
• Goal
• Development usage
  • Clone the repo
  • Build everything
  • Note
  • Check it out in a browser
• Testing Usage
• local deployment test
• Hamravesh deployment
  • 0- Create an account
  • 1- Create a repo app
  • 3- Setup react app
    • 1- General info
    • 2- Environment Variables
    • 3- Domain Address
    • 4- Pick a plan
    • 5- wait until its deployed
• CICD Deployment
  • Github CICD
  • Gitlab/Hamgit CICD
• Bugs

Goal

the only purpose of this sample is to help you getting started setting up a project for react with docker and docker-compose plus adding the functionality to deploy on hamravesh.

Development usage

You'll need to have Docker installed. It's available on Windows, macOS and most distros of Linux.

If you're using Windows, it will be expected that you're following along inside of WSL or WSL 2.

That's because we're going to be running shell commands. You can always modify these commands for PowerShell if you want.

Clone the repo

Clone this repo anywhere you want and move into the directory:

git clone https://github.com/AliBigdeli/ReactJS-Hamravesh-Docker-Template.git

Build everything

The first time you run this it's going to take 5-10 minutes depending on your internet connection speed and computer's hardware specs. That's because it's going to download a few Docker images and build the Python + requirements dependencies.

docker compose up --build

Now that everything is built and running we can treat it like any other ReactJS app.

Note

If you receive an error about a port being in use? Chances are it's because something on your machine is already running on port 3000. then you have to change the docker-compose.yml file according to your needs.

Check it out in a browser

Visit http://localhost:3000 in your favorite browser.

Testing Usage

in order to run your tests you can just the following command

docker-compose exec app sh -c "npm test"

local deployment test

this is just for testing your production base in your local first. first of all you need to build the image of the project which you can do it by running the following command:

docker build -t front -f ./dockerfiles/prod/Dockerfile .

then for running the built image you can use the following command:

docker run -p 80:80 front

now if you open your browser and head to http://localhost you should be able to see the page.

Hamravesh deployment

0- Create an account

in order to deploy your project inside hamravesh first you need to create an account. so please go to the following url and create your account.

https://console.hamravesh.com/signup

after that you need to sign in to your console panel. which is going to be like this.

1- Create a repo app

in order to deploy your project you can use repo mode (or منبع گیت) after clicking on the item. you will see a panel like this below:

as you can see you have to provide your github/gitlab/hamgit repo address for deployment. in our case the configuration will be as follow:

repo_address: https://github.com/AliBigdeli/ReactJS-Hamravesh-Docker-Template.git
# if you are just testing without cicd use main or if you want to use cicd script to delpoy create a prod branch and then add it here
branch_name: main
build_context: .
docker_file_address: ./dockerfiles/prod/Dockerfile

Note: as we are going to implement ci/cd and other stuffs we avoid auto deployment or even uploading file.

after your done with the inputs just click on (تنظیمات اپ) and go for next step.

3- Setup react app

follow the provided steps to finish this section.

1- General info

in this page you have to provide general information's about the app you are about to create, which in my case are as follows:

app_name: front-test # name of the app which is going to be called inside the portal
service_port: 80 # which is based on nginx port

Note: provided information is just enough to run our program for more details please visit this url https://docs.hamravesh.com/darkube/create/git-repo/settings/general/

2- Environment Variables

in this section you have to provide the environment variables which are going to be used in the project. you can switch to editor and paste your environments.

Note: provided information is just enough to run our program for more details please visit this url https://docs.hamravesh.com/darkube/create/git-repo/settings/envs/

3- Domain Address

pick a name for you app which is going to be accessed through the web and for better security please enable https redirect. keep in mind that you can give a different dns name through a provider like arvan or cloudflare.(we will provide more details for this matter later)

Note: provided information is just enough to run our program for more details please visit this url https://docs.hamravesh.com/darkube/create/git-repo/settings/domain-address/

4- Pick a plan

for launching purposes you have to pick a plan for resources. based on the scale and traffic of your project you have to pick one.

Note: at the moment we are not using disks and we are just using the static files being served by the Whitenoise.

5- wait until its deployed

now all you have to do is to wait util the project is fully deployed.

after its done you can access the website through the url you picked in stage 3 of the setup.

CICD Deployment

For the sake of continuous integration and deployment i have provided two samples for github and gitlab/hamgit for you. but there will be some configurations to be added for building and deploying purposes.

Github CICD

will be provided soon

Gitlab/Hamgit CICD

in order to do ci/cd in the sample project for gitlab/hamgit you have to create a duplicate of the .gitlab-ci.yml.sample but with different name as .gitlab-ci.yml in the root directory.

after that our pipeline will be always listening to the prod branch. if you commit in this branch it will go through the process.

note that you have to declare 5 or more environment variables in your gitlab/hamgit project repo, which you can add it by going to Settings>CI/CD>Variables, and in this section try to add all the needed variables.

these variables should be included:

• DARKUBE_APP_ID - which can be found in app info page
• DARKUBE_DEPLOY_TOKEN - which can be found in app info page
• IMAGE - registry.hamdocker.ir/<USERNAME>/<APPNAME>
• REGISTERY - registry.hamdocker.ir/<USERNAME>
• REGISTERY_PASSWORD - registry password
• REGISTERY_USER - username like 'bigdeliali3'

for having DARKUBE_APP_ID and DARKUB_DEPLOY_TOKEN head to the app page and use the following parameters in the picture.

for having REGISTRY and REGISTRY_USER and REGISTRY_PASSWORD head to the app page and use the following parameters in the picture. REGISTRY will be the url like this: registry.hamdocker.ir/<USERNAME> and for getting the username and passwords just go to the app section and click on docker image. you will see something like this, after that click on registries.

On top of the page you can find the credentials for registry that you need.

after that if everything goes well you can see that the jobs are working.

Bugs

Feel free to let me know if something needs to be fixed. or even any features seems to be needed in this repo.