loading...
Cover image for A dev.to client pwa application with vuejs

A dev.to client pwa application with vuejs

ashraful profile image Ashraful Islam Updated on ・2 min read

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

Happy Blogging :-)

Discussion

pic
Editor guide
Collapse
ben profile image
Collapse
ashraful profile image
Collapse
pcrunn profile image
Alexander P.

This is great! Good job

Collapse
ashraful profile image
Collapse
ansonhkg profile image
Anson

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

Collapse
ashraful profile image
Ashraful Islam Author

Yes. I have plan for better SEO.