Skip to content

Commit

Permalink
Merge pull request #102 from undpindia/feature-mobileview
Browse files Browse the repository at this point in the history 
Feature mobileview
  • Loading branch information
@Maneesh7012
Maneesh7012 authored Dec 13, 2024
2 parents 0619f8c + dd2f69b commit 2733272
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 22 deletions.
120 changes: 100 additions & 20 deletions src/documentation/_docs/Installation Guid/frontend-installation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,34 @@ Steps:
1. Clone the github repo containing the frontend app `git clone https://github.com/undpindia/dicra.git`
2. Navigate to web_portal folder `cd dicra/src/web_portal`
3. Unzip package-lock.zip `unzip package-lock.zip`
4. Create .env file and add REACT_APP_API_KEY=google_map_api_key
4. Create .env file and add

REACT_APP_APIEND= api_key

// hosted_url= replace dicra api backend url

REACT_APP_APIEND_RASTER= https://{hosted_url}/LAYER_DETAILS_ID/RASTER_TILE/raster_tile.tif

REACT_APP_APIEND_VECTOR= https://{hosted_url}/LAYER_DESC_ID/VECTOR/CURRENT_BOUNDS/LTDATE.geojson

REACT_APP_APIEND_DOWNLOADS= {api_key}/downloadfile?layerId=LAYER_ID&filename=FILE_NAME&name=USER_NAME&email=EMAIL_ID&usage_type=USAGE_TYPE purpose=PURPOSE

REACT_APP_API_KEY = google_map_api_key
// state_name= replace with telangana , uttarakhand , gujarat , jharkhand , kerala , maharashtra , odisha
PUBLIC_URL=/state_name

5. Run the command `npm install` then it will install the required packages for running the application
6. After the installation we can able to run the Web application in Development server using the command `npm start`
6. a) The state config information were added in cd dicra/src/web_porta/src/components/MapComponent/ExampleConfig/{configstatename}.js

b) Copy the config of the state of your choice and paste it in config.js file located in cd dicra/src/web_porta/src/components/MapComponent/Config/config.js

c) Now change in PUBLIC_URL key in the env file with the state name

7. To create the production build we need to run the command npm run build. After the successful execution of the command it will create a folder called build, it contain all the build files (this build corresponds to particular state_name that you have provided above, like wise if you want for other states change the env and repeat the build process again)

8. Upload all the build files to nginx website deployment location

9. Make changes to the web server configuration


### Running Web App Production Build In a web Server(Nginx)
Expand All @@ -27,11 +52,39 @@ Steps:
1. Clone the github repo containing the frontend app `git clone https://github.com/undpindia/dicra.git`
2. Navigate to web_portal folder `cd dicra/src/web_portal`
3. Unzip package-lock.zip `unzip package-lock.zip`
4. Create .env file and add REACT_APP_API_KEY=google_map_api_key
5. Run the command `npm install` then it will install the required packages for running the application.
6. To create the production build we need to run the command `npm run build`. After the successful execution of the command it will create a folder called `build`, it contain all the build files
7. Upload all the build files to nginx website deployment location
8. Make changes to the web server configuration
4. Create .env file and add

REACT_APP_APIEND= api_key

// hosted_url= replace dicra api backend url

REACT_APP_APIEND_RASTER= https://{hosted_url}/LAYER_DETAILS_ID/RASTER_TILE/raster_tile.tif


REACT_APP_APIEND_VECTOR= https://{hosted_url}/LAYER_DESC_ID/VECTOR/CURRENT_BOUNDS/LTDATE.geojson


REACT_APP_APIEND_DOWNLOADS= {api_key}/downloadfile?layerId=LAYER_ID&filename=FILE_NAME&name=USER_NAME&email=EMAIL_ID&usage_type=USAGE_TYPE&purpose=PURPOSE

REACT_APP_API_KEY = google_map_api_key

// state_name= replace with telangana , uttarakhand , gujarat , jharkhand , kerala , maharashtra , odisha

PUBLIC_URL=/state_name

5. Run the command npm install then it will install the required packages for running the application.

6. a) The state config information were added in cd dicra/src/web_porta/src/components/MapComponent/ExampleConfig/{configstatename}.js

b) Copy the config of the state of your choice and paste it in config.js file located in cd dicra/src/web_porta/src/components/MapComponent/Config/config.js

c) Now change in PUBLIC_URL key in the env file with the state name

7. To create the production build we need to run the command npm run build. After the successful execution of the command it will create a folder called build, it contain all the build files (this build corresponds to particular state_name that you have provided above, like wise if you want for other states change the env and repeat the build process again)

8. Upload all the build files to nginx website deployment location

9. Make changes to the web server configuration


### Running Web App Production Build in Azure Blob
Expand All @@ -40,30 +93,57 @@ Steps:
1. Clone the github repo containing the frontend app `git clone https://github.com/undpindia/dicra.git`
2. Navigate to web_portal folder `cd dicra/src/web_portal`
3. Unzip package-lock.zip `unzip package-lock.zip`
4. Create .env file and add REACT_APP_API_KEY=google_map_api_key
5. Run the command `npm install` then it will install the required packages for running the application
6. To create the production build we need to run the command `npm run build`. After the successful execution of the command it will create a folder called `build`, it contain all the build files
7. To deploy react production build in Azure we need to create a storage account in Azure
8. After the successful Deployment of the storage account Goto static website menu and enable static website option and fill index document name as `index.html` and leave error document path as empty (its optional). After saving this it will provide us a primary endpoint.
4. Create .env file and add

REACT_APP_APIEND= api_key
// hosted_url= replace dicra api backend url
REACT_APP_APIEND_RASTER= https://{hosted_url}/LAYER_DETAILS_ID/RASTER_TILE/raster_tile.tif

REACT_APP_APIEND_VECTOR= https://{hosted_url}/LAYER_DESC_ID/VECTOR/CURRENT_BOUNDS/LTDATE.geojson

REACT_APP_APIEND_DOWNLOADS= {api_key}/downloadfile?layerId=LAYER_ID&filename=FILE_NAME&name=USER_NAME&email=EMAIL_ID&usage_type=USAGE_TYPE&purpose=PURPOSE


REACT_APP_API_KEY = google_map_api_key
// state_name= replace with telangana , uttarakhand , gujarat , jharkhand , kerala , maharashtra , odish

PUBLIC_URL=/state name

5. Run the command npm install then it will install the required packages for running the application

6. a) The state config information were added in cd dicra/src/web_porta/src/components/MapComponent/ExampleConfig/{configstatename}.js

b) Copy the config of the state of your choice and paste it in config.js file located in cd dicra/src/web_porta/src/components/MapComponent/Config/config.js

c) Now change in PUBLIC_URL key in the env file with the state name

7. To create the production build we need to run the command npm run build. After the successful execution of the command it will create a folder called build, it contain all the build files (this build corresponds to particular state_name that you have provided above, like wise if you want for other states change the env and repeat the build process again)

8. To deploy react production build in Azure we need to create a storage account in Azure

9. After the successful Deployment of the storage account Goto static website menu and enable static website option and fill index document name as index.html and leave error document path as empty (its optional). After saving this it will provide us a primary endpoint.

Screenshot of the same is given below. We can use the primary endpoint to test our react production build, deployed in the storage account and same can be done after the completion of step 6.

9. After the completion of Static website enabling section it will create two containers called `$logs` & `$web`. And we need to upload the build files created in step 3 to `$web` container. We can upload Build files to $web container using multiple ways ie., Azure storage explorer, Visual studio extension Azure storage by Microsoft
10. After the completion of Static website enabling section it will create two containers called `$logs` & `$web`. And we need to upload the build files created in step 3 to `$web` container. We can upload Build files to $web container using multiple ways ie., Azure storage explorer, Visual studio extension Azure storage by Microsoft

Steps followed to upload build files to `$web` using Azure storage are

* Goto azure storage extension on visual studio code
* Sign In using Azure credentials
* Expand storage account we have created for web app deployment
* Under the Blob Container menu we can able to see `$web` container, right click on that, choose option Deploy to static website via azure storage, browse the build folder and complete the deployment.
* Goto azure storage extension on visual studio code
* Sign In using Azure credentials
* Expand storage account we have created for web app deployment
* Under the Blob Container menu we can able to see `$web` container, right click on that, choose option Deploy to static website via azure storage, browse the build folder and complete the deployment.

After completing the above steps we can test the deployment using the primary endpoint

![Image]({{ site.baseurl }}/images/image16.png)
![Image]({{ site.baseurl }}/images/image16.png)

10. Create CDN profile for the front end Create cdn profiles on Home->CDN profiles menu. after successful deployment of cdn profile, create cdn endpoint at the end point creation menu specify name as any meaningful name .
11. Create CDN profile for the front end Create cdn profiles on Home->CDN profiles menu. after successful deployment of cdn profile, create cdn endpoint at the end point creation menu specify name as any meaningful name .
origin type : Storage static website origin hostname : the hostname generated by the url when completing the first step

WE CAN ADD CUSTOM DOMAIN FOR OUR CDN HERE

11. Create Web application Firewall Policies (WAF) Goto home -> Web application Firewall Policies (WAF) menu Click create button On the basic tab under the project details section select AzureCDN Under the Instance details section select Policy mode select Prevention Add necessary custom rules under Custom rules tab Finally associate cdn end point at the Association tab and create the WAF policy
12. Create Web application Firewall Policies (WAF) Goto home -> Web application Firewall Policies (WAF) menu Click create button On the basic tab under the project details section select AzureCDN Under the Instance details section select Policy mode select Prevention Add necessary custom rules under Custom rules tab Finally associate cdn end point at the Association tab and create the WAF policy
1 change: 0 additions & 1 deletion src/web_portal/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@
"react-icons": "^4.8.0",
"react-leaflet": "^2.8.0",
"react-leaflet-draw": "^0.19.0",
"react-leaflet-vectorgrid": "^2.2.1",
"react-multistep": "^5.5.8",
"react-redux": "^8.0.5",
"react-router-dom": "^6.8.2",
Expand Down
2 changes: 1 addition & 1 deletion src/web_portal/src/components/MapComponent/Common/Download/LayerDetails.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -502,7 +502,7 @@ class LayerDetails extends Component {
lineHeight: '28px',
}}
target="_blank"
href={'https://api-dicra.undp.org.in/docs#'}
href={'https://dicra-api.centralindia.cloudapp.azure.com/docs#'}
rel="noreferrer"
>
know more
Expand Down

0 comments on commit 2733272

Please sign in to comment.