

** Sometimes you need to enable cors for AWS Cloudfront and S3 hosted sites.My case is : I want to host assets from my Playcanvas project on my cdn which is hosted on AWS.We will do it quickly**

# At Start

As i said we will do it quickly.I dont get into the initial steps because i assumed you did it.
First of all we create S3 and load the assets that we want.Secondly , we create a cloudfront distrubution for this bucket and deploy it.

# Straight to the point 🧭

The main part of the article comes.Now we have a s3 bucket and a bounded cloudfront distrubution.

## The S3 part

In S3 part edit the cors setting of bucket like this.

<Warning type="info">
  For those who doesnt know where the edit esction is , it's in the **permissions** section of the s3 bucket
</Warning>

<Image src="/blog/s3-cloudfront-cors/cf5.jpg" alt="aws s3 cors" width={1012} height={516} />

```json
[
  {
    "AllowedHeaders":[],
    "AllowedMethods":[
      "GET"
    ],
    "AllowedOrigins":[
      "*"
    ],
    "ExposeHeaders":[]
  }
]
```
 ## Cloudfront part

 In the clodfront distrubution , edit tdistrubution and go to **behaviour** tab.
 As you see below image , there is a **cache key and origin request** section.When we create a new distrubution on Cloudfront
 , it creates default policies automatically.So we should edit these policies to modify the request origin.

 <Image src="/blog/s3-cloudfront-cors/cf3.jpg" alt="aws s3 cors" width={1012} height={800} />

<Warning type="info">
  There are two links in this section.**Create policy & View policy **
 </Warning>
   
Ok , Lets create **cache policy** & **Origin request policy** like this.   

### - Cache policy

In the **cache key settings** add the following headers.

<Warning type="info">
  Some headers might not be exist in the headers list , So we should add these manually by clicking **Custom**.
 </Warning>

<Image src="/blog/s3-cloudfront-cors/cf4.jpg" alt="aws s3 cors" width={1012} height={516} />

### - Origin Request Policy 

In the **origin request settings** add the following headers.

<Image src="/blog/s3-cloudfront-cors/cf1.jpg" alt="aws s3 cors" width={1012} height={516} />

<Warning type="info">
  Some headers might not be exist in the headers list , So we should add these manually by clicking **Custom**.
 </Warning>

 So we created two policies.
 
 And finally we add these two policies to the **cache key and origin request** section by choosing from the lists.
 
 # Conclusion

As you see , we enabled cors for s3 & cloudfront by creating policies for s3 & cloudfront quickly😉.So next step is , we can serve
our files from our bucket which is powered by cloudfront so we have ssl and all other benefits comes from cloudfront.

By the way , creating a cdn with Aws services is another subject.Maybe we talk about it in the future posts.
Have a nice cors ❗😃






**In my opinion, if you really want to be a developer, one day you must have your own blog.There are many tools in the market for this. However, making your own blog is important for both **improving yourself** and gaining **Self-Confidence** as a software developer. I set out with this way of thinking and aimed to create a blog within 3 days. While doing this, my main goal was to use **the latest technologies**. This article is the story of this journey.**

# Hello Cruel World👋

Keeping a blog nowadays is important for a software developer. Here, you can both take notes for yourself about what you have learned, and guide other software developers by sharing your knowledge and experience. On the other hand, a long personal blog is welcomed by employers and project managers very positively.

 As I said before, there are many tools for this. E.g

- [dev.to](https://dev.to)

- [Hashnode](https://hashnode.com/)

- [hackernoon](https://hackernoon.com/)

Although these tools are very easy and useful for blogging, it seems to me that having a developer's own blog will give him/her  many advantages.

I set out with these goals and decided to develop a programming-based blog.🤨 But I had to do this as fast as I could as I couldn't devote much time to this development due to my works. And also I wanted to do this with cutting edge technologies.💻 So I set several Frameworks. These:

> - Astro.js + Markdown
- Template Language + pure JS + CMS
- Angular + CMS/Markdown
- Scully + Markdown
- Next.js + MDX

Although each Framework has its own advantages, I finally decided to use **Next.js**. Because in this option, I would be able to use both **React** and benefit from the privileges and comfort of **MDX**.

<Warning type="info">
  On the other hand i had no experience with Next.js so it is always good to push yourself forward.😣
</Warning>

---

I immediately started researching **Github** to get going quickly. And the template prepared for him by a software developer named **Samuel** caught my attention. I immediately forked this from Github and started coding.When i run the code on my localhost a lot of error occurred and i searched,found and tweaked all the codes that give me error. I have added the features I want to add in general.


For example there is no pagination in the original code so all blog posts sits on the one page.So i implemented **pagination** like this :


```jsx:Pagination

  const totalPosts = filteredPosts.length,
       limit=3,
       pages = Math.ceil(filteredPosts.length / limit),
       hasNextPage = Math.ceil(totalPosts / limit) > pageNumber,
       hasPreviousPage = pageNumber > 1,
       viewPosts= filteredPosts.slice((pageNumber - 1) * limit, pageNumber * limit)
 let fPosts= currentSearch ? filteredPosts:viewPosts;

   <Button disabled={!hasPreviousPage} type="button" onClick={()=>{
          Router.push(`/blog/?page=${pageNumber-1}`)
        }}> Prev </Button>
```

But when i implemented pagination , this time searching mechanism broke down.And i modified the **search mechanism** for my needs🔎

I also implemented a **scrollToTop** button component and added to the main page layout component.


```tsx:topScroll.tsx
import { useState,useEffect } from 'react'
import styles from './topscroll.module.scss'
import Button from 'components/button'
import { BiUpArrow } from "react-icons/bi";

const Topscroll=(): JSX.Element=> {

    const [showScroll, setShowScroll] = useState(false)

    const scrollTop = () =>{
        window.scrollTo({top: 0, behavior: 'smooth'});
      };

      useEffect(() => {
        
            const checkScrollTop = () => {
                if (window.pageYOffset > 400) {
                    setShowScroll(true); 
                } else {
                    setShowScroll(false); 
                }
              };
          window.addEventListener('scroll', checkScrollTop)
          return () => window.removeEventListener('scroll', checkScrollTop)
      }, [])
    
    return (
        <div className={showScroll ? styles.active: styles.scrollTopBtn}> 
             <Button  type="button" onClick={scrollTop}> <BiUpArrow/>  </Button>
        </div>
    )     
}

export default Topscroll;

```

<p>Implemented <u>draft-publish system</u>.I tweaked and wrote a lot of Scss to style the views.Actually using <u>style modules</u> is very good experience.By the way , 
In <b>Angular</b> you can write sass in component based too.</p>

***

Finally , the initial version is ready.And i deployed to **Vercel** as you predict.Because , [Vercel](https://vercel.com/) is designed for essentially Next.js projects and very easy to use.I have a lot of experiences with AWS and i can say Vercel is easy peasy comparing to Aws.

<p>This is it.🥳Mission accomplished in 3 days and I grasp the next.js’s main concepts by myself with doing.Because as you now , 
the most effective way of learning is always doing...😎</p>


<p>I’ll write about programming JS , React , Angular , Next.js and other frameworks , my experiences , failures and success’.
And also Webgl.I created some big projects in Webgl and i’ll share my experiences , my snippets and tutorials.Finally as a 3D Designer 
i will share my 3D experiences ,too.</p>

So keep watching here guys…📺

If you have any questions , feel free to contact me...



Blog - page1