Put ReactJS inside Blogspot Strategy

Diposting oleh Edinofri pada tanggal


Hi there, have you wondering how I can put my portofolio page inside blogspot and do not break the css style with blogspot theme? or you already notice when you are checking my blogspot home page and portofolio page which have different page source?

home page

portofolio page

Disclaimer

In this post I want focus with the theme provide by blogger, so if you use different theme or custom theme, please focus on similar html tag or even xml blogger tag.

Preparing

  • ReactJS project (I use Vite to generate the project)
  • Github Page
  • Blogspot

Setup

React Project

I assume you have react project generated with Vite, and we will build our project with command
npm
npm run build

yarn
yarn build

and now we have dist directory which contains 
  • index.html
  • assets/index-{hash}.js
  • assets/index-{hash}.css
edinofri@karizal portofolio % yarn build
yarn run v1.22.19
$ vite build
vite v4.4.9 building for production...
✓ 339 modules transformed.
dist/index.html                   0.68 kB │ gzip:   0.41 kB
dist/assets/index-3b3f058c.css    1.64 kB │ gzip:   0.67 kB
dist/assets/index-5358a864.js   335.69 kB │ gzip: 113.38 kB
✓ built in 994ms
✨  Done in 1.79s.

inside index.html we can see 

<body>
  <div id="root" ></div>
</body>

We will add this div and with the id later on our blogspot theme, and for the assets we will host it on github pages, you can read from official documentation how to host page in github page.

Blogspot

Download theme xml from blogspot and please create one blog just to try this guidance, I don't recommend you make change directly on your main blog.

Now open your xml with code editor, if you don't want to use your theme and wanna use default theme instead, you can check in this source.

After that, we will choose when we show the reactjs. in this example I will create a page with title hello world and the url should be [blogger-url].blogspot.com/p/hello-world.html


so when we visit the page now will be like this.
page hello-world.html before put Reactjs

and we want the result like this




back to your code editor, paste your blogger xml theme and collapse the code like this, so we can easily wrap with our logic.

Wrapping

we will make conditional in blogger xml like this code
<b:if cond='not data:view.isPage'>
  <!-- if load not page -->
<b:else/>
  <!-- if page -->
</b:if>

we will put it inside head tag and body tag.

Head

  1. put <b:if cond='not data:view.isPage'> before <b:skin version='1.3.3'>
  2. put <b:else/> </b:if> before <b:include data='blog' name='google-analytics' />
  3. put your hosted script and css inside <b:else/> </b:if>

Body

  1. put <b:if cond='not data:view.isPage'> before <b:include name='skipNavigation'/>
  2. put <b:else/> </b:if> before <b:template-script async='true' name='indie' version='1.0.0' />
  3. put this code inside <b:else/> </b:if>
<div id='root' />
Result

After that we can save that theme in our blog and try to visit page hello world page.


as you can see, we successfully put react inside blogger, you can make specific react project per page with condition and load script and style base on page id.

Komentar

Posting Komentar