Create a separate backend development server using webpack devServer.proxy

This post assumes that you have a basic knowledge on webpack and javascript.

Scenario

Setting up the client-end

I recently started used vue-webpack-simple-template as a boilerplate to develop a vue application for one of my projects.This template consists of webpack configuration which does the following functionalities.

  1. Build all the related into one single file called build.js inside /dist director
    web-pack-5
  2. Use webpack dev-server to host the front-end of the application in localhost.
    web-pack-6

So this was easy . All i had to do was run the command npm run dev and it will fire up the webpack-dev-server in localhost:8080 so that i can immediately get on with the development.

Setting up the server

I created a simple back-end using node , express . I created a server.js file for this purpose . There i wanted to have create a simple api end-point to test whether the back-end works. So this is what i did.

Created server.js
web-pack-1

Created a simple back-end api-end point to retrieve list of products from local mongodb collection called products. Note that i am using a different port (3000) for the back-end.
web-pack-2

and added a npm script to run the server. web-pack-3

And i executed the command npm run server , and tried accessing the api-end by typing
the url localhost:3000/api/products .web-pack-4Okay everything seems to be working up to this point. Okay what is the problem then ?

Problem

Integration of back-end and front-end

Next i wanted do was integrating the front-end with the simple back-end i have made.
So i wrote a simple $http.get to get results from /api/products in Main.vue file.

web-pack-7

And reloaded the page . But when i checked the console all i got was a 404 error . This confused me . It said localhost:8080/api/products/ was not found .

I rechecked the api-end by checking the url localhost:3000/api/products in the browser just to confirm the server runs okay and i got results !

Okay what was the problem then ?

2 different ports

After putting my mind on this for few minutes i realized what the problem was . And as usual it was a very stupid mistake.

My front-end configured by webpack was running on port 8080 while the simple back-end api i have created using node,express running on port 3000. So when i tried to access the /api/products from the application using $http.get method it was trying to get the resource from following url ..

localhost:8080/api/products

It is trying to access something which isn’t there , hence the 404 error. A classic dummy dev err.

Solution

So the solution is really simple . When you do developments using webpack and when you come across a scenario where you want to have a separate back-end server you can proxy the back-end api urls to the front-end using a special webpack-dev-server configuration.

web-pack-8

What does this do ?

It will proxy any request from localhost:8080/api/ to localhost:3000/api/

So for example when i do this in my application /api/products/

it will access localhost:3000/api/products and NOT localhost:8080/api/products even though the application is running on port 8080.

Conclusion

When i had this problem , i was surprised that i couldn’t find a decent solution specified anywhere with a proper explanation. That is why i decided to write a blog post my personal experience. Hope anyone with a similar issue will find this post useful.

You can find the relevant documentation for webpack devserver proxy here.

Advertisements

Spacing oddities in Javascript toString()

When you invoke javascript toString() on a number like below.

space1

You are thrown with an error saying there is a syntax error . But when you do the same with an space between the 123 and .toString(2) , code executes .

space2

Strange right ? But nothing is strange when you work with Javascript . What happens here is …

  • In the first example , 123.toString(2) is being evaluated as <123.t><oString(2)> as two different parts . Because “.” is a valid part of a Number in Javascript. So when you execute 123.WhatevertheMethod() , the interpreter think that whatever comes after the “.” belongs to the number . In this case , it is the letter “t” . Hence the error message.
  • 2nd example , since we are using a space , Javascript interpreter now knows that you are invoking toString(2) on “123” literal. So it executes !

Even better you can write the same as below

space3

using a parenthesis on the number , So that the interpreter knows that it is a literal “123”.

Vue.js .Is it worth it to learn yet another javascript library?

This is a very highlevel take on Vue.js and the reason for its popularity . If you want to go deeper , i suggest you to have look at the documentation and the official comparison between Vue.js other modern javascript frameworks/libraries.

Vue.js (pronounced /vjuː/, like view) is a lightweight library which can be used to develop data-reactive web components.It mainly focuses on building the “view” part of a web application.It also provide state management with vuex.Version 2 of Vue.js released just over an year ago , So you could say that it is relatively new when compared with other frameworks such as AngularJS , Angular , React or EmberJS.Vue.Js also contains a mix of some of the features you can find it in both AngularJs and React.But since it is a new library , the user community and the ecosystem of Vue.js are also relatively small , but its popularity growing rapidly as you can see below.

vue.js google trend in last 12 months

vue.js google trend in within last 12 months

source : https://trends.google.com/trends/explore?q=vue.js,react.js,angular.js

This brings us to the next question . Why is it so popular ?

It has adapted good features from similar , older javascript libraries.

From React, it got component-based approach, props, one-way data flow for components hierarchy, performance, virtual rendering ability and focuses on core library instead of bloating with so much of unwanted features .
From Angular, it got similar templates with good syntax, and two-way data binding when you need it (inside single component)

Easy to setup and use

Vue.js is extremely easy to setup and use . It all just takes few lines of code to setup to start using it . As someone who worked with AngularJs for the past few years , it was really surprising to see how little code is needed to configure Vue.js . Even if you are a person who just entered in to modern javascript development, you can easily start using it by just referring the guidelines of the official documentation.

Lightweight

Vue.js only focusing on the core functionalities . If you want to add more features you have the freedom to add them as additional dependencies into your project.

Easy documentation and rapidly growing user community

Vue.js is still at its early stage . But the community is growing due to its simplicity . The official website provides a clear and comprehensive documentation on its API . Stackoverflow has a growing community on Vue.js as well. Vue.js has been starred on github more than 60k times surpassing Angularjs and is only behind React among modern , popular javascript libraries/frameworks.

MIT licensed

Vue.js is developed under MIT license , you no need to worry about any complications you might face in the future  ;D

My experience so far with Vue.js

I’ve been developing Single Page Applications for the past 3 years using AngularJs.

Some of the issues I’ve faced while using AngularJs such as steeper learning curve , tightly coupled core with unwanted features/plugins and complex configuration were bugging me for a long time.

I was never really comfortable with React and never had the chance to switch to React.But when i came across Vue.js right after its 2nd major release , i saw that all of my problems stated above were immediately solved.I loved it because of the simplicity it provides.Recently we have integrated Vue.Js to one of our core projects.My opinion is that if there is a requirement to create data-reactive webcomponants without much configuration , then Vue.js is the answer.

Valuable resources for Vue.js

  1. vue-devtools : This is a tool to debug Vue.js applications . There is a chrome extension available under the same. I have written a blog post related to this tool awhile back.
  2. Awesome Vue.js : Long list of various resources for Vue.Js.
  3. 30 minute video tutorial by dev coffee.
  4. An introduction to Vue.js Udemy course.
  5. A sample application done using Vue.js and Node (Code is provided).
  6. Getting started with Vuex :  State management with Vue.js.
  7. vue-cli : Simple command line tool for scaffolding Vue.js applications

git – How to replace your Master

So in my project we had to face the following situation.

We have 2 main branches in our project repository , master and bug-fixing . bug-fixing was created as a temp branch so that the developers can create feature branches on-top of that. But after a while this temp branch sort of became as our main branch and when we finally decided that we need to update master branch it was too late . Because master branch was behind more than 300 + commits . So i had to find the easiest and safest way to replace old master with new updated commits . And this is how i did it.

Step 1 : Get all the updates from the bug-fixing remote branch using a pull

git-branch-2

Step 2 : Checkout master branch and hard reset with bug-fixing branch
” git reset –hard bug-fixing”

git-branch-8

Step 3 : Force push your local master to remote origin master.
git push origin master –force

git-branch-7

That’s it . All under 4 commands , and your master is updated !

 

Yo youtube , could you please get your color combinations right !

Recently i noticed something annoying with Youtube’s settings menu . It got me so infuriating i decided to make a blogpost about it .

youtube-good

 

The color combination they’ve used for the toggle switch for Autoplay , Annotations are virtually unidentifiable . Both switch on,off states have been differentiated using a grayish color combination . So for example, you have to really look twice to know whether the  Autoplay is switched on or off.

After adding some contrast to “on” state in toggle button – making it intuitive.

youtube-bad

See now it looks slightly better . A basic rule in UX is that when you want to differentiate two states in UI , you go for complementary color rule . So even a 70 year old grandma who wants to play her favorite cat videos on Youtube knows she has the set Autoplay option correctly by just looking at the color of the toggle switch .

too-easy-18683-1296944823-34

bonus link : Adobe color wheel . Very useful when you want to select color combinations for your UI.

Vue is not detected : How to fix vue dev-tools issue

Vue dev-tools is a handy little tool developed by VueJs to make the debugging easier when you develop Vue Applications . Currently there is a chrome extension available . Also you can install it via yarn or npm as well .

But sometimes you might come across a issue like this when you try to use this tool .

Vue is not detected.PNG

Following are few ways to fix the issue .

  1.  First of all , make sure you are using a non-minified version of VueJS.
  2. If you are using File:// protocol , By enabling “allow access to file URL’s option” in the chrome extension

    .vue-is-not-detected-chrome-extension
    after this try closing and reopening the chrome .

  3.  By adding the devtools = true in the app.js file .
    Vue.config.devtools = true

    More info here
  4. If non of the above doesn’t work , try loading your Vue app over a local http-server.
    Here is a simple http-server. And close and reopen your chrome tab .

I was able to resolve this issue by following option 2 and 3 .

Vue is not detected solved.PNG