DEV Community

Cover image for Embed Dev.to as a blog on your React Website
Sabesan Sathananthan
Sabesan Sathananthan

Posted on • Edited on

Embed Dev.to as a blog on your React Website

#devops #react #beginners #tutorial

I have already implemented Medium as a blog on my website. In the beginning, I used jQuery to fetch JSON objects. I have mentioned that method in my medium article. But I am not satisfied with that method. I don’t like that user interface. So I thought about using React for better user experience. Then I avoided jQuery and implemented it in pure JavaScript and React Js. Here you could see the live demo of this react application. This is my 2nd dev.to article.

Alt Text

I downloaded the shards dashboard lite and was impressed by its blog page. Then I thought, why can’t I implement that in my blog page. After that, I come up with a solution. But that didn’t work. Then I tried a new method that worked. Now I finished that and have a repo in GitHub. In this article, I am going to say how to start from scratch.

Step1: Setup React Project

First, you need to create a react application. For that run the following command in your shell/terminal in a specific folder (e.g., desktop )



npx create-react-app dev.to-post
Enter fullscreen mode Exit fullscreen mode

A new folder will be created, and it will be named as a dev.to-post. From this step, our application is bootstrapped with Create React App. Then open that project in your IDE. I am personally using the VS Code IDE.

Step2: Delete Unwanted Files

You need to delete some files and organize the files for the development after you open the folder in your IDE. Therefore you need to go to the src folder and delete Logo.svg, App.css, index.css, and App.test.js files. And create the following folders inside the src folder named components, assets, helpers, and utils, then move your serviceWorker.js into the helper’s folder. App.js file into the Components folder.

Alt Text

Now open the index.js file and delete the following snippet in index.js file.


 JavaScript
import ‘./index.css’;
Enter fullscreen mode Exit fullscreen mode

Then modify the App.js and serviceWorker.js files paths in index.js import like following.


 JavaScript
import App from ‘./components/App’;
import * as serviceWorker from ‘./helpers/serviceWorker’;
Enter fullscreen mode Exit fullscreen mode

Go to the Components folder and open the App.js. Delete the return part of the App function. Now your file organization will be like below.

Alt Text

Step 3: Install Shards React package

You can install Shards React via NPM.



npm i shards-react
Enter fullscreen mode Exit fullscreen mode

Once the package is installed, open the index.js and add the following snippet to the top of the code.


 JavaScript
import ‘bootstrap/dist/css/bootstrap.min.css’;
import ‘shards-ui/dist/css/shards.min.css’;
Enter fullscreen mode Exit fullscreen mode

Then you need to add this CSS file into the assets folder. Once you add the file inside the assets folder, import the CSS file in index.js.


 JavaScript
import ‘./assets/shards-dashboards.1.1.0.min.css’;
Enter fullscreen mode Exit fullscreen mode

Step4: Fetch data from Dev.to

Then create a new file named slider.js inside the components folder. Add the following code in the slider.js file.

replace the thepracticaldev with your dev.to username. Then create the utils folder and create the Totext.js file inside the utils folder. Add the following snippet in the Totext.js file.

Then create the ShortenText.js file inside the utils folder and add the following snippet in the ShortenText.js file

Create BlogCard.js file inside the Component folder and add the following snippet in the BlogCard.js file.

Finally, Render the Slider component in App.js, as shown below.

Conclusion

Here I have showcased four steps to embed dev.to as a blog on your React Website. If you use this, you won’t spend money to embed dev.to. However, when you follow these methods, you will be unable to show your related dev.to posts section in your blog. You can clone the Repo from this link. If this repo is useful for you don't forget to give a star ⭐️.

GitHub logo sabesansathananthan / react-dev.to-blog

React app for fetch dev.to posts and render in cards

React Dev Blog

Aim of this project is embed Dev as a blog on your React website

UI

licence GitHub package.json version GitHub repo size Twitter URL

🛠️ Built with

Installation

To setup the app for development on your local machine, please follow the instructions below:

  1. Clone the repo to your machine

    git clone https://github.com/sabesansathananthan/react-dev.to-blog.git
cd react-dev.to-blog
    Enter fullscreen mode Exit fullscreen mode

  2. Install packages

    If you use npm

    npm install
    Enter fullscreen mode Exit fullscreen mode

    or

    If you use yarn

    yarn
    Enter fullscreen mode Exit fullscreen mode

  3. Change username

    Use your dev.to username👤 instead of thepracticaldev. in Slider.js

    blogURL = "https://api.rss2json.com/v1/api.json?rss_url=https://dev.to/feed/thepracticaldev";
    Enter fullscreen mode Exit fullscreen mode

  4. Run the development server

    If you use npm

    npm start
    Enter fullscreen mode Exit fullscreen mode

    or

    If you use yarn

    yarn start
    Enter fullscreen mode Exit fullscreen mode

  5. Visit http://localhost:3000

Live Demo

Don't forget to give a star ⭐ for this repo 🙂

Article Related Article

Embed Dev.to as a blog on your React Website - Sabesan Sathananthan

Similar Projects

📄 License

This project is licensed under the MIT License…


View on GitHub


Happy Coding 😊 !!!

Top comments (0)

Read next

thedsdev profile image

Day 1: Getting Started with SQL - Basics | Beginners' Guide : Mastering

Deepangshi S. -

manisha_mardi profile image

Thinking in React: A Beginner’s Journey

Manisha Mardi -

jetthoughts-dev profile image

What Every Non-Technical Founder Must Know When Building a Tech Product

JetThoughts Dev -

bijkler profile image

Multiple Stacks in AWS CDK (Typescript)

Matthew Evan Eichler -