[{"data":1,"prerenderedAt":38},["ShallowReactive",2],{"article-a-dev-to-client-pwa-application-with-vuejs-37kf":3},{"type_of":4,"id":5,"title":6,"description":7,"readable_publish_date":8,"slug":9,"path":10,"url":11,"comments_count":12,"public_reactions_count":13,"collection_id":14,"published_timestamp":15,"language":14,"subforem_id":14,"positive_reactions_count":13,"cover_image":16,"social_image":17,"canonical_url":11,"created_at":15,"edited_at":18,"crossposted_at":14,"published_at":15,"last_comment_at":19,"reading_time_minutes":20,"tag_list":21,"tags":22,"body_html":27,"body_markdown":28,"user":29},"article",189451,"A dev.to client pwa application with vuejs","This is very basic dev.to API based client pwa application written in vuejs","Oct 15 '19","a-dev-to-client-pwa-application-with-vuejs-37kf","\u002Fashraful\u002Fa-dev-to-client-pwa-application-with-vuejs-37kf","https:\u002F\u002Fdev.to\u002Fashraful\u002Fa-dev-to-client-pwa-application-with-vuejs-37kf",6,29,null,"2019-10-15T14:38:51Z","https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=1000,height=420,fit=cover,gravity=auto,format=auto\u002Fhttps%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fmr840zdnxsx3pjrldbwm.png","https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=1000,height=500,fit=cover,gravity=auto,format=auto\u002Fhttps%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fmr840zdnxsx3pjrldbwm.png","2019-12-24T06:20:27Z","2019-10-16T00:46:38Z",2,"javascript, vue, pwa, api",[23,24,25,26],"javascript","vue","pwa","api","\u003Cp>\u003Cstrong>Originally posted on \u003Ca href=\"https:\u002F\u002Fashraful.dev\u002Fposts\u002Fa-dev.to-client-pwa-application-with-vuejs.html\">Ashraful's Blog\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Ch2>\n  \u003Ca name=\"intro\" href=\"#intro\">\n  \u003C\u002Fa>\n  Intro\n\u003C\u002Fh2>\n\n\u003Cp>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 \u003Ccode>dev.to-client\u003C\u002Fcode> application. So, that you can easily setup as your own. And it's highly configurable.\u003C\u002Fp>\n\n\u003Ch2>\n  \u003Ca name=\"features\" href=\"#features\">\n  \u003C\u002Fa>\n  Features\n\u003C\u002Fh2>\n\n\u003Cul>\n\u003Cli>Single Page Application. So, it's really faster than you believe.\u003C\u002Fli>\n\u003Cli>PWA(Progressive Web App).\u003C\u002Fli>\n\u003Cli>Landing Page with latest five post according to published date.\u003C\u002Fli>\n\u003Cli>List of posts page for showing all posts.\u003C\u002Fli>\n\u003Cli>Clickable Tag and filtering by tag.\u003C\u002Fli>\n\u003Cli>Disqus comments integration.\u003C\u002Fli>\n\u003Cli>Twitter profile and timeline integration.\u003C\u002Fli>\n\u003Cli>Card based cutting-edge design.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>\n  \u003Ca name=\"upcoming-features\" href=\"#upcoming-features\">\n  \u003C\u002Fa>\n  Upcoming Features\n\u003C\u002Fh2>\n\n\u003Cul>\n\u003Cli>Search for posts\u003C\u002Fli>\n\u003Cli>Dark\u002FNight mode\u003C\u002Fli>\n\u003Cli>Post category\u002Ftag showing on sidebar with filtering\u003C\u002Fli>\n\u003Cli>SEO friendly page\u003C\u002Fli>\n\u003Cli>Write markdown from this app for posts\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>\n  \u003Ca name=\"how-to-run-on-local-machine\" href=\"#how-to-run-on-local-machine\">\n  \u003C\u002Fa>\n  How to run on local machine?\n\u003C\u002Fh2>\n\n\u003Cul>\n\u003Cli>Fork this repository \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fiashraful\u002Fdev.to-client\">Github Repo\u003C\u002Fa>\n\u003C\u002Fli>\n\u003Cli>Clone it from your fork\u003C\u002Fli>\n\u003Cli>Open \u003Ccode>user-config.json\u003C\u002Fcode> file and update according to your blog configuration. i.e:\n\u003C\u002Fli>\n\u003Cli>* \"dev__to_username\" is you dev.to handle\u002Fusername\u002Flogin name.\u003C\u002Fli>\n\u003Cli>* \"twitter_username\" is your twitter username\u003C\u002Fli>\n\u003Cli>\u003Cul>\n\u003Cli>\"disqus_shortname\" is disqus shorname or discuss comments url prefix.\u003C\u002Fli>\n\u003C\u002Ful>\u003C\u002Fli>\n\u003Cli>\u003Cp>Run \u003Ccode>$ npm install\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\n\u003Cli>\u003Cp>Run \u003Ccode>$ npm run serve\u003C\u002Fcode>\u003Cbr>\u003Cbr>\n\u003Cstrong>Also you can try with the docker.\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>\n  \u003Ca name=\"deploy-to-vpsany-machine\" href=\"#deploy-to-vpsany-machine\">\n  \u003C\u002Fa>\n  Deploy to VPS\u002Fany machine\n\u003C\u002Fh2>\n\n\u003Cul>\n\u003Cli>I have included the docker file already. So, you can try with docker.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch4>\n  \u003Ca name=\"docker-process\" href=\"#docker-process\">\n  \u003C\u002Fa>\n  Docker Process\n\u003C\u002Fh4>\n\n\u003Cul>\n\u003Cli>RUN \u003Ccode>sudo docker build -t iashraful\u002Fdev.to-client .\u003C\u002Fcode>\n\u003C\u002Fli>\n\u003Cli>RUN \u003Ccode>sudo docker run -it -p 5000:80 --rm --name dev.to-client iashraful\u002Fdev.to-client\u003C\u002Fcode>\n\u003Cstrong>You can customize the port if you need. I that case, you must need to allow the post for tcp\u002Fip connection\u003C\u002Fstrong>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch4>\n  \u003Ca name=\"traditional-process\" href=\"#traditional-process\">\n  \u003C\u002Fa>\n  Traditional Process\n\u003C\u002Fh4>\n\n\u003Cul>\n\u003Cli>Run \u003Ccode>$ npm install\u003C\u002Fcode>\n\u003C\u002Fli>\n\u003Cli>Run \u003Ccode>$ npm run build\u003C\u002Fcode>\n\u003C\u002Fli>\n\u003Cli>Now tell your web server to serve from \u003Ccode>dist\u002F\u003C\u002Fcode> directory.\n\u003Cstrong>You must remember to forward every request to \u003Ccode>\u002Findex.html\u003C\u002Fcode>. \nBecause this app handles routing with \u003Ca href=\"https:\u002F\u002Frouter.vuejs.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">Vue Router\u003C\u002Fa>.\u003C\u002Fstrong> \u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>\n  \u003Ca name=\"resources\" href=\"#resources\">\n  \u003C\u002Fa>\n  Resources\n\u003C\u002Fh2>\n\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fiashraful\u002Fdev.to-client\">Github Repo\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fdev-to-client.netlify.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">Demo\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>\u003Cstrong>Happy Blogging :-)\u003C\u002Fstrong>\u003C\u002Fp>\n\n","---\ntitle: A dev.to client pwa application with vuejs\npublished: true\ndescription: This is very basic dev.to API based client pwa application written in vuejs\ntags: javascript, vue, pwa, api\ncover_image: https:\u002F\u002Fthepracticaldev.s3.amazonaws.com\u002Fi\u002Fmr840zdnxsx3pjrldbwm.png\n---\n**Originally posted on [Ashraful's Blog](https:\u002F\u002Fashraful.dev\u002Fposts\u002Fa-dev.to-client-pwa-application-with-vuejs.html)**\n\n## Intro\nHello 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.\n\n## Features\n* Single Page Application. So, it's really faster than you believe.\n* PWA(Progressive Web App).\n* Landing Page with latest five post according to published date.\n* List of posts page for showing all posts.\n* Clickable Tag and filtering by tag.\n* Disqus comments integration.\n* Twitter profile and timeline integration.\n* Card based cutting-edge design.\n\n## Upcoming Features\n* Search for posts\n* Dark\u002FNight mode\n* Post category\u002Ftag showing on sidebar with filtering\n* SEO friendly page\n* Write markdown from this app for posts\n\n## How to run on local machine?\n* Fork this repository [Github Repo](https:\u002F\u002Fgithub.com\u002Fiashraful\u002Fdev.to-client)\n* Clone it from your fork\n* Open `user-config.json` file and update according to your blog configuration. i.e:  \n* * \"dev__to_username\" is you dev.to handle\u002Fusername\u002Flogin name.\n* * \"twitter_username\" is your twitter username\n* * \"disqus_shortname\" is disqus shorname or discuss comments url prefix.\n\n* Run `$ npm install`\n* Run `$ npm run serve`  \n**Also you can try with the docker.**\n\n## Deploy to VPS\u002Fany machine\n* I have included the docker file already. So, you can try with docker.\n\n#### Docker Process\n* RUN `sudo docker build -t iashraful\u002Fdev.to-client .`\n* RUN `sudo docker run -it -p 5000:80 --rm --name dev.to-client iashraful\u002Fdev.to-client`  \n**You can customize the port if you need. I that case, you must need to allow the post for tcp\u002Fip connection**\n\n#### Traditional Process\n* Run `$ npm install`\n* Run `$ npm run build`\n* Now tell your web server to serve from `dist\u002F` directory.  \n**You must remember to forward every request to `\u002Findex.html`. \nBecause this app handles routing with [Vue Router](https:\u002F\u002Frouter.vuejs.org\u002F).** \n\n\n## Resources\n* [Github Repo](https:\u002F\u002Fgithub.com\u002Fiashraful\u002Fdev.to-client)\n* [Demo](https:\u002F\u002Fdev-to-client.netlify.com\u002F)\n\n**Happy Blogging :-)**\n",{"name":30,"username":31,"twitter_username":32,"github_username":33,"user_id":34,"website_url":35,"profile_image":36,"profile_image_90":37},"Mohamad Ashraful Islam","ashraful","_ashraful","iashraful",30490,"https:\u002F\u002Fashraful.dev","https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=640,height=640,fit=cover,gravity=auto,format=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F30490%2F9dc1ef64-0233-43b5-9127-79affd83cc43.jpg","https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=90,height=90,fit=cover,gravity=auto,format=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F30490%2F9dc1ef64-0233-43b5-9127-79affd83cc43.jpg",1784633124204]