Sunday, May 14, 2023
HomeSoftware EngineeringThe right way to Deploy React App to S3 and CloudFront
Software Engineering

The right way to Deploy React App to S3 and CloudFront

By admin
0
9


If you need to deploy a React App to AWS S3 and AWS CloudFront, then you may observe this information.

The next answer creates a React App and deploys it to S3 and CloudFront utilizing the shopper’s CLI.
It additionally chains instructions so {that a} React construct, S3 sync and CloudFront invalidation can happen with a single command.

import ‘./App.css’;
import React from “react”;
import {
BrowserRouter as Router,
Routes,
Route,
Hyperlink
} from “react-router-dom”;

  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Hyperlink to="/">Dwelling</Hyperlink>
          </li>
          <li>
            <Hyperlink to="/about">About</Hyperlink>
          </li>
        </ul>
      </nav>

      <div className="content material">
        <Routes>
          <Route path="/about" aspect={<About />} />
          <Route path="/" aspect={<Dwelling />} />
        </Routes>
      </div>

    </div>
  </Router>

</div>

);
}

export default App;


Open the&nbsp;`App.css`&nbsp;file as substitute it with the next:

ul {
padding: 0;
}
li {
show:inline;
padding: 10px;
}
.content material {
padding: 0 10px;
}


If we run the React app with `npm begin`, we'll now see the next:<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-9-484x350.png" alt="" class="wp-image-9382" width="819" peak="592" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-9-484x350.png 484w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-9-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-9-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-9-1536x1112.png 1536w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-9.png 1644w" sizes="(max-width: 819px) 100vw, 819px" /> </determine> 

If we click on on `About` within the navigation, the web page modifications and reveals the `About` element.<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-10-484x350.png" alt="" class="wp-image-9383" width="818" peak="592" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-10-484x350.png 484w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-10-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-10-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-10-1536x1112.png 1536w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-10.png 1644w" sizes="(max-width: 818px) 100vw, 818px" /> </determine> 

# Establishing S3 and CloudFront within the AWS Administration Console

Head over to the S3 console and `create a brand new bucket`.  
Give it a singular `bucket identify` and click on `Create bucket.`<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-28-483x350.png" alt="" class="wp-image-9412" width="819" peak="593" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-28-483x350.png 483w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-28-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-28-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-28.png 1536w" sizes="(max-width: 819px) 100vw, 819px" /> </determine> 

We now have a brand new bucket, with nothing inside.<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-29-483x350.png" alt="" class="wp-image-9416" width="824" peak="597" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-29-483x350.png 483w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-29-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-29-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-29.png 1536w" sizes="(max-width: 824px) 100vw, 824px" /> </determine> 

Head over to CloudFront and&nbsp;`create a distribution`:<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-30-483x350.png" alt="" class="wp-image-9418" width="819" peak="593" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-30-483x350.png 483w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-30-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-30-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-30.png 1536w" sizes="(max-width: 819px) 100vw, 819px" /> </determine> 

Choose the&nbsp;`Origin area`, which would be the newly created S3 bucket.  
Specify a&nbsp;`Identify`. Notice that it's going to create one for you from the&nbsp;`Origin area`&nbsp;by default for those who don’t specify one your self.

For S3 bucket entry, Select&nbsp;`Sure use OAI`, create a brand new OAI and choose&nbsp;`Sure`&nbsp;for the&nbsp;`Bucket coverage Replace`.<determine class="wp-block-image size-full">

<img decoding="async" loading="lazy" width="774" peak="340" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-14.png" alt="" class="wp-image-9387" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-14.png 774w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-14-300x132.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-14-768x337.png 768w" sizes="(max-width: 774px) 100vw, 774px" /> </determine> <determine class="wp-block-image size-full"><img decoding="async" loading="lazy" width="774" peak="340" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-14.png" alt="" class="wp-image-9388" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-14.png 774w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-14-300x132.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-14-768x337.png 768w" sizes="(max-width: 774px) 100vw, 774px" /></determine> 

Underneath&nbsp;`Default cache conduct`, choose&nbsp;`Redirect HTTP to HTTPS.`

Underneath&nbsp;`Settings`, specify the&nbsp;`Default root object`&nbsp;to be&nbsp;`index.html`

Go away all different fields as is and click on `Create distribution`.<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-31-483x350.png" alt="" class="wp-image-9420" width="818" peak="593" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-31-483x350.png 483w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-31-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-31-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-31.png 1536w" sizes="(max-width: 818px) 100vw, 818px" /> </determine> 

You'll now see a distribution being created for you.<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-39-483x350.png" alt="" class="wp-image-9432" width="818" peak="593" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-39-483x350.png 483w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-39-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-39-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-39.png 1536w" sizes="(max-width: 818px) 100vw, 818px" /> </determine> 

Notice that it will take a few minutes to prepare,

# Establishing the Deployment Scripts

Within the&nbsp;`bundle.json`&nbsp;file, below&nbsp;`src/`, find the next&nbsp;`scripts`&nbsp;traces:

“scripts”: {
“begin”: “react-scripts begin”,
“construct”: “react-scripts construct”,
“check”: “react-scripts check”,
“eject”: “react-scripts eject”
},


Right here we'll add some extra choices:  
We'll add a brand new script referred to as&nbsp;`deploy-to-s3`&nbsp;and it'll run the next command:  
`aws s3 sync construct/ s3://<your_s3_bucket_name>`

Notice you can additionally specify an AWS_PROFILE right here as follows if wanted:  
`aws s3 sync construct/ s3://<your_s3_bucket_name> --profile <profile_name>`

Replace the&nbsp;`scripts`&nbsp;part to look as beneath, however change your individual S3 bucket identify inplace:

“scripts”: {
“begin”: “react-scripts begin”,
“construct”: “react-scripts construct”,
“deploy-to-s3”: “aws s3 sync construct/ s3://sample-react-app-123654789”,
“check”: “react-scripts check”,
“eject”: “react-scripts eject”
},


Now we have to create a&nbsp;`construct`&nbsp;of our React app, in order that we will push it’s contents to S3.  
To do that, run the next command:  
`npm run construct`

Then deploy it to S3 as follows:  
`npm run deploy-to-s3`<determine class="wp-block-image size-large">

<img decoding="async" loading="lazy" width="800" peak="253" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-17-800x253.png" alt="" class="wp-image-9391" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-17-800x253.png 800w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-17-300x95.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-17-768x243.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-17.png 1042w" sizes="(max-width: 800px) 100vw, 800px" /> </determine> 

Now if we glance within the S3 console, we will see the information that had been deloyed:<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-33-483x350.png" alt="" class="wp-image-9423" width="818" peak="593" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-33-483x350.png 483w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-33-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-33-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-33.png 1536w" sizes="(max-width: 818px) 100vw, 818px" /> </determine> 

# Establishing CloudFront pages

We now must setup the CloudFront pages, which we'll do by way of the CloudFront console.<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-34-483x350.png" alt="" class="wp-image-9424" width="818" peak="593" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-34-483x350.png 483w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-34-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-34-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-34.png 1536w" sizes="(max-width: 818px) 100vw, 818px" /> </determine> 

Underneath the CloudFront distribution, click on `Create customized error response.`  
We do that as a result of React is a Single Web page Software (SPA) and no bodily information exist on the server for the totally different `Routes` that we've got specified. They're all dynamic.  
For instance, `/about` doesn't exist as a logical path on the drive, or server. So as a substitute, will probably be a `404 Not Discovered`when referred to as upon. So due to this fact, we'll inform CloudFront that for all `404 Not Discovered` paths, we would like `index.html` to deal with them.  
Keep in mind that `index.html` is the trail for the place React initializes.

To this finish, create a&nbsp;`404 Not Discovered`&nbsp;customized error response, that factors to our&nbsp;`/index.html`&nbsp;file, with a standing of&nbsp;`200 OK`:<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-35-483x350.png" alt="" class="wp-image-9425" width="818" peak="593" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-35-483x350.png 483w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-35-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-35-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-35.png 1536w" sizes="(max-width: 818px) 100vw, 818px" /> </determine> 

Additionally create a&nbsp;`403 Forbidden`&nbsp;customized error response, that factors to our&nbsp;`/index.html`&nbsp;file, with a standing of&nbsp;`200 OK:`<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-36-483x350.png" alt="" class="wp-image-9426" width="817" peak="592" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-36-483x350.png 483w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-36-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-36-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-36.png 1536w" sizes="(max-width: 817px) 100vw, 817px" /> </determine> 

As soon as each have been created, the `Error pages` ought to have two (2) entries as follows:<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-37-483x350.png" alt="" class="wp-image-9427" width="818" peak="593" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-37-483x350.png 483w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-37-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-37-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-37.png 1536w" sizes="(max-width: 818px) 100vw, 818px" /> </determine> 

If we don’t create these, then we'll get the&nbsp;`AccessDenied`&nbsp;error when making an attempt to entry any of the&nbsp;`Routes`&nbsp;we specified within the React app, which seem like this:<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-23-484x350.png" alt="" class="wp-image-9397" width="817" peak="591" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-23-484x350.png 484w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-23-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-23-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-23-1536x1112.png 1536w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-23.png 1644w" sizes="(max-width: 817px) 100vw, 817px" /> </determine> 

Now as a substitute, we will see the precise&nbsp;`Route`&nbsp;itself:<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-24-484x350.png" alt="" class="wp-image-9398" width="818" peak="592" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-24-484x350.png 484w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-24-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-24-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-24-1536x1112.png 1536w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-24.png 1644w" sizes="(max-width: 818px) 100vw, 818px" /> </determine> 

# Enhancing the Deployment scripts

Everytime we replace the CloudFront distribution, by deploying new information to S3, we have to&nbsp;`Invalidate`&nbsp;the information.

Head over to the&nbsp;`bundle.json`&nbsp;file from earlier than and add one other command below the one we simply added:  
It can look one thing like this:

aws cloudfront create-invalidation –distribution-id <distribution_id> –paths ‘/*’ –profile <profile_name>


You don’t must specify the&nbsp;`--profile`&nbsp;argument, except you should.

We will get the Distribution ID from CloudFront itself:<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-40-483x350.png" alt="" class="wp-image-9434" width="818" peak="593" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-40-483x350.png 483w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-40-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-40-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-40.png 1536w" sizes="(max-width: 818px) 100vw, 818px" /> </determine> 

Replace this new part as follows, keep in mind to switch your&nbsp;`--distribution-id`:

“scripts”: {
“begin”: “react-scripts begin”,
“construct”: “react-scripts construct”,
“deploy-to-s3”: “aws s3 sync construct/ s3://sample-react-app-123654789”,
“invalidate-cloudfront”: “aws cloudfront create-invalidation –distribution-id EIAUK8JFBCT6S – paths ‘/*’”,
“check”: “react-scripts check”,
“eject”: “react-scripts eject”
},


In case you run that step alone, you're going to get a verification as follows:

{
“Location”: “https://cloudfront.amazonaws.com/2020-05-31/distribution/EIAUK8JFBCT6S/invalidation/I17X51041BLJHR”,
“Invalidation”: {
“Id”: “I17X51041BLJHR”,
“Standing”: “InProgress”,
“CreateTime”: “2022-08-17T18:16:56.890000+00:00”,
“InvalidationBatch”: {
“Paths”: {
“Amount”: 1,
“Objects”: [
“/*”
]
},
“CallerReference”: “cli-1660760215-662979”
}
}
}


Now that we've got each the steps we'd like, let’s create an mixture command that may tie every thing collectively, in order that we solely must run a single command every time:

We'll add the next&nbsp;`script`:

“deploy”: “npm run construct && npm run deploy-to-s3 && npm run invalidate-cloudfront”,


So as soon as we've got added it to the&nbsp;`scripts`&nbsp;block, it should all seem like this:

“scripts”: {
“begin”: “react-scripts begin”,
“construct”: “react-scripts construct”,
“deploy-to-s3”: “aws s3 sync construct/ s3://sample-react-app-123654789”,
“invalidate-cloudfront”: “aws cloudfront create-invalidation –distribution-id EIAUK8JFBCT6S –paths ‘/*’”,
“deploy”: “npm run construct && npm run deploy-to-s3 && npm run invalidate-cloudfront”,
“check”: “react-scripts check”,
“eject”: “react-scripts eject”
},


This now means we've got a single command to `construct` our React App, `sync` the information to S3, and `invalidate` the information in CloudFront, as a chained command.

# Testing our Deployment scripts

If we take the present state of the deployed utility on CloudFront, it seems like this:<determine class="wp-block-image size-large is-resized">

<img decoding="async" loading="lazy" src="https://andrewodendaal.com/wp-content/uploads/2022/08/image-26-484x350.png" alt="" class="wp-image-9400" width="817" peak="591" srcset="https://andrewodendaal.com/wp-content/uploads/2022/08/image-26-484x350.png 484w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-26-300x217.png 300w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-26-768x556.png 768w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-26-1536x1112.png 1536w, https://andrewodendaal.com/wp-content/uploads/2022/08/image-26.png 1644w" sizes="(max-width: 817px) 100vw, 817px" /> </determine> 

If we open the&nbsp;`App.js`&nbsp;file and create a brand new&nbsp;`Route`:

<Route path=”/testing” aspect={} />


Which is added as follows:

} />
} />
} />

“`

Then add a brand new element for Testing:

const Testing = () => {
    return <h2>Testing</h2>
}

Then add a brand new nav merchandise:

<li>
    <Hyperlink to="/testing">Testing</Hyperlink>
</li>

Now all we have to do to see the modifications deployed, is run the next command:

npm run deploy
```

This may cycle by way of our steps and produce the next output:

```
> [email protected] deploy
> npm run construct && npm run deploy-to-s3 && npm run invalidate-cloudfront


> [email protected] construct
> react-scripts construct

Creating an optimized manufacturing construct...
Compiled efficiently.

File sizes after gzip:

  50.75 kB  construct/static/js/principal.95dbd789.js
  1.79 kB   construct/static/js/787.7c33f095.chunk.js
  301 B     construct/static/css/principal.58e1094f.css

The challenge was constructed assuming it's hosted at /.
You possibly can management this with the homepage discipline in your bundle.json.

The construct folder is able to be deployed.
You could serve it with a static server:

  npm set up -g serve
  serve -s construct

Discover out extra about deployment right here:

  https://cra.hyperlink/deployment


> [email protected] deploy-to-s3
> aws s3 sync construct/ s3://sample-react-app-123654789

add: construct/asset-manifest.json to s3://sample-react-app-123654789/asset-manifest.json
add: construct/static/js/787.7c33f095.chunk.js.map to s3://sample-react-app-123654789/static/js/787.7c33f095.chunk.js.map
add: construct/index.html to s3://sample-react-app-123654789/index.html
add: construct/robots.txt to s3://sample-react-app-123654789/robots.txt
add: construct/manifest.json to s3://sample-react-app-123654789/manifest.json
add: construct/static/js/787.7c33f095.chunk.js to s3://sample-react-app-123654789/static/js/787.7c33f095.chunk.js
add: construct/favicon.ico to s3://sample-react-app-123654789/favicon.ico
add: construct/static/css/principal.58e1094f.css.map to s3://sample-react-app-123654789/static/css/principal.58e1094f.css.map
add: construct/static/css/principal.58e1094f.css to s3://sample-react-app-123654789/static/css/principal.58e1094f.css
add: construct/logo512.png to s3://sample-react-app-123654789/logo512.png
add: construct/logo192.png to s3://sample-react-app-123654789/logo192.png
add: construct/static/js/principal.95dbd789.js.LICENSE.txt to s3://sample-react-app-123654789/static/js/principal.95dbd789.js.LICENSE.txt
add: construct/static/js/principal.95dbd789.js to s3://sample-react-app-123654789/static/js/principal.95dbd789.js
add: construct/static/js/principal.95dbd789.js.map to s3://sample-react-app-123654789/static/js/principal.95dbd789.js.map

> [email protected] invalidate-cloudfront
> aws cloudfront create-invalidation --distribution-id EIAUK8JFBCT6S --paths '/*'
```

Now we will refresh the browser and we'll see our new `Route` added and linked to our new `TestingComponent` as quickly because the CloudFront invalidations have accomplished.
Previous articlePotensic Atom SE Drone Assessment – Droneblog
Next articleThe Significance of Testing in DevOps: Methods and Instruments
adminhttp://webpapaji.com
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Load more

Recent Comments

ABOUT US

webpapaji is your technology, robotics, apple website. We provide you with the latest breaking news and videos straight from the technology industry.

POPULAR POSTS

POPULAR CATEGORY

copyright 2022 © webpapaji.com. All rights reserved.