A dev.to client pwa application with vuejs

Originally posted on Ashraful's Blog

Intro

Hello there, Have you ever wished to have all the dev.to posts under your own domain. It's time to achieve this. I have created an open source project name dev.to-client application. So, that you can easily setup as your own. And it's highly configurable.

Features

• Single Page Application. So, it's really faster than you believe.
• PWA(Progressive Web App).
• Landing Page with latest five post according to published date.
• List of posts page for showing all posts.
• Clickable Tag and filtering by tag.
• Disqus comments integration.
• Twitter profile and timeline integration.
• Card based cutting-edge design.

Upcoming Features

• Search for posts
• Dark/Night mode
• Post category/tag showing on sidebar with filtering
• SEO friendly page
• Write markdown from this app for posts

How to run on local machine?

• Fork this repository Github Repo
• Clone it from your fork
• Open user-config.json file and update according to your blog configuration. i.e:
• * "dev__to_username" is you dev.to handle/username/login name.
• * "twitter_username" is your twitter username
• • "disqus_shortname" is disqus shorname or discuss comments url prefix.

• Run $ npm install

• Run $ npm run serve
  
  Also you can try with the docker.

Deploy to VPS/any machine

• I have included the docker file already. So, you can try with docker.

Docker Process

• RUN sudo docker build -t iashraful/dev.to-client .
• RUN sudo docker run -it -p 5000:80 --rm --name dev.to-client iashraful/dev.to-client You can customize the port if you need. I that case, you must need to allow the post for tcp/ip connection

Traditional Process

• Run $ npm install
• Run $ npm run build
• Now tell your web server to serve from dist/ directory. You must remember to forward every request to /index.html. Because this app handles routing with Vue Router.

Resources

• Github Repo
• Demo

Happy Blogging :-)

Comments

[Ben Halpern]

Neat!

[Mohamad Ashraful Islam]

Thank you.

[Alexander P.]

This is great! Good job

[Mohamad Ashraful Islam]

Thank you

[Anson]

Nice! It would be great to have it prerendered so it could be crawled perfectly by search engines. :)

[Mohamad Ashraful Islam]

Yes. I have plan for better SEO.