<p>My app is</p>

<pre><code>      React Front-end &lt;------&gt; Nodes js back-end &lt;------&gt; mongodb
</code></pre>

<p>Source code can be downloaded from <a href="https://github.com/aamirpinger/todo-app-client-server-kubernetes.git" rel="nofollow noreferrer">here</a></p>

<p>You can deploy above <strong>./setup.sh</strong> command at minikube kubernetes</p>

<p>1) mongoDB deployment with clusterIP Type service resource</p>

<p>2) Backend node js server with clusterIP Type service resource</p>

<p>3) front-end React build with nginx and LoadBalancer type service resource</p>

<p>Accessing monogdb pod from node js pod using mongodb service FQDN is working fine as mongodb service is cluster IP type and accessing from nodejs pod is working smoothly.</p>

<p>I am having trouble in having communication using axios from react (build) using FQDN of back-end service resource. It is saying:</p>

<pre><code>**POST http://todo-backend-service:5000/init net::ERR_NAME_NOT_RESOLVED**
</code></pre>

<p>I have even tried with cluster IP with 5000 port instead of FQDN, not working.</p>

<p>This seems to be a problem after making build or something else?</p>

<p>Solution to it would be appreciated. </p>

<p>So the issue here is that a frontend application makes requests from your browser (it is client-side, not server-side) meaning essentially what you need to do is expose your node.js backend</p>

<p>Example:
if you are using Minikube you could do something as simple:
Change your service type for you node.js to type Loadbalancer:</p>

<pre><code>apiVersion: v1
kind: Service
metadata:
  name: todo-backend-service
spec:
  ports:
  - port: 5000
    targetPort: 5000
  selector:
    app: todo-server-app
  type: LoadBalancer
</code></pre>

<p>You would then need to run:</p>

<pre><code>minikube service todo-backend-service --url
# OUTPUT
http://192.168.99.113:30048
</code></pre>

<p>This IP address and port is what your frontend should use to connect to the node.js backend:</p>

<pre><code>curl -X POST http://192.168.99.113:30048/todo/list
# OUTPUT
{"error":"Please login first."}
</code></pre>

<blockquote>
  <p>Just a note here, when listing items generally you should use a GET request</p>
</blockquote>

<p>The reasoning behind the example:</p>

<p>A client-side application loads in your browser, therefore any request made to your backend service will need to be via an external endpoint as your browser will not be on the same network as your Kubernetes Pods</p>
