title: My css , js , and images stop working when I use node server
body: <p>main_page.html</p>
  <pre><code>   &lt;head&gt;
         &lt;meta charset=&quot;UTF-8&quot;&gt;
         &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
         &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/css/style.css&quot;&gt;
         &lt;title&gt;Document&lt;/title&gt;
     &lt;/head&gt;
     &lt;body&gt;
         
         &lt;a class=&quot;counselor&quot; href=&quot;&quot;&gt;
             &lt;img src=&quot;img/icons/counselor.svg&quot; alt=&quot;counselor&quot; title=&quot;Counselor&quot;&gt;
         &lt;/a&gt;
         &lt;!-- &lt;a class=&quot;application&quot; href=&quot;http://localhost:5500&quot;&gt;
             &lt;img src=&quot;img/icons/application.svg&quot; alt=&quot;application&quot; title=&quot;Apply for Colleges&quot;&gt;
         &lt;/a&gt; --&gt;
     
         &lt;section class=&quot;main-page&quot;&gt;
     
             &lt;header class=&quot;header&quot;&gt;
                 &lt;div class=&quot;logo&quot;&gt;
                     &lt;a href=&quot;main-page.html&quot;&gt;&lt;img src=&quot;img/icons/logo-b.svg&quot; alt=&quot;logo&quot;&gt;&lt;/a&gt;
                 &lt;/div&gt;
                 &lt;div class=&quot;header-items&quot;&gt;
                     &lt;a href=&quot;pick-course.html&quot; id=&quot;header-engi&quot; &gt;Engineering&lt;/a&gt;
                     &lt;a href=&quot;pick-course.html&quot;&gt;Medical&lt;/a&gt;
                     &lt;a href=&quot;pick-course.html&quot;&gt;Business&lt;/a&gt;
                     &lt;a href=&quot;pick-course.html&quot;&gt;Law&lt;/a&gt;
                     &lt;a href=&quot;pick-course.html&quot;&gt;Design&lt;/a&gt;
                     &lt;a href=&quot;pick-course.html&quot;&gt;Science&lt;/a&gt;
                     &lt;a href=&quot;application_main.html&quot; class=&quot;application_main&quot;&gt;Application&lt;/a&gt;
                 &lt;/div&gt;
             &lt;/header&gt;
     
             &lt;h2 class=&quot;heading2&quot;&gt;A place to find your dream college&lt;/h2&gt;
             &lt;img class=&quot;img img-1&quot; src=&quot;img/bg1.jpg&quot; alt=&quot;bg1&quot;&gt;
             &lt;img class=&quot;img img-2&quot; src=&quot;img/bg2.jpg&quot; alt=&quot;bg2&quot;&gt;
             &lt;img class=&quot;img img-3&quot; src=&quot;img/bg3.jpg&quot; alt=&quot;bg3&quot;&gt;
             &lt;img class=&quot;img img-4&quot; src=&quot;img/bg4.jpg&quot; alt=&quot;bg4&quot;&gt;
             &lt;input type=&quot;text&quot; class=&quot;search&quot; placeholder=&quot;Search for college&quot;&gt;
             &lt;a href=&quot;&quot; class=&quot;search-icon&quot; &gt;&lt;img src=&quot;img/icons/search.svg&quot; alt=&quot;searchicon&quot;&gt;&lt;/a&gt;
         &lt;/section&gt;
    
     
     
      &lt;script src=&quot;main-page.js&quot;&gt;&lt;/script&gt;   
      
     &lt;/body&gt;
     &lt;/html&gt; 
  </code></pre>
  <p>application.js</p>
  <pre><code>const express=require(&quot;express&quot;)
  const mongoose=require('mongoose')
  const bodyParser=require(&quot;body-parser&quot;)
  
  const app=express()
  
  app.use(bodyParser.urlencoded({extended:true}))
  
  mongoose.connect(&quot;mongodb://localhost/StudentData&quot;,{useNewUrlParser:true},{useUnifiedTopology:true})
  
  const studentSchema={
      name:String,
      dob:String,
      gender:String,
  
  }
  
  const Student=mongoose.model(&quot;Student&quot;,studentSchema)
  
  app.get('/main-page.html',(req,res)=&gt;{
      res.sendFile(__dirname+&quot;/main-page.html&quot;)
  })
  
  app.get('/application_main.html',(req,res)=&gt;{
      res.sendFile(__dirname+&quot;/application_main.html&quot;)
  })
  app.get('/application.html',(req,res)=&gt;{
      res.sendFile(__dirname+'/application.html')
  })
  
  app.post('/',(req,res)=&gt;{
      let student= new Student({
      name:req.body.name,
      dob:req.body.dob,
      gender:req.body.gender,
      })
      student.save()
      res.redirect('/application.html')
  })
  
  app.listen(8080,()=&gt;{
      console.log(&quot;Server on &quot;)
  })
  
  </code></pre>
  <p>When I add the get request for <code>main-page.html</code> and go to <code>localhost:8080/main-page.html</code>, only the HTML shows, my images  have broken, the CSS file does not apply and an effect I had done <code>main-page.js</code> doesn't work. How can I fix it? All my paths are correct.</p>
  <p>For CSS it shows the following error:</p>
  <pre><code>Refused to apply style from 'http://localhost:8080/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
  </code></pre>
  <p>For images:</p>
  <pre><code>Failed to load resource: the server responded with a status of 404 (Not Found)
  </code></pre>
  <p>And the <code>main-page.js</code> file, which had basic JS code (<code>eventlistener</code> and <code>querySelector</code> etc) just doesn't work.</p>