Freecodecamp: Setting up the local environment on macOS: cannot access to some resources

Created on 8 Apr 2018  路  13Comments  路  Source: freeCodeCamp/freeCodeCamp

Issue Description

I'm setting up the local environment of freeCodeCamp on macOS.

I installed the freeCodeCamp following the steps of CONTRIBUTING.md.

I can start the server, but when I access to localhost:3000 on Chrome/Firefox, I cannot access to some resources.

I turned off all the plugins on each browsers, but the result was the same.


The errors of the browser says:

(index):1 Refused to apply style from 'http://localhost:3000/css/main.css?cacheBreaker=0.6311597832396934' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
Refused to execute script from 'http://localhost:3000/en/vendor-main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Refused to apply style from 'http://localhost:3000/css/main.css?cacheBreaker=0.6311597832396934' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.


The node server says:

$ npm start develop

[email protected] start /Users/noguchihiroki/Desktop/freeCodeCamp
babel-node server/server.js "develop"

Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class
Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs
fcc:server freeCodeCamp server listening on port 3000 in development +0ms
fcc:server connecting to db at mongodb://localhost:27017/freecodecamp +0ms

fcc:server db connected +122ms
200 GET 522.348 ms - /en/
302 GET 354.925 ms - /js/main.js
302 GET 359.071 ms - /js/vendor-main.js
200 GET 330.103 ms - /css/main.css?cacheBreaker=0.2477890782225567
200 GET 184.328 ms - /en/vendor-main.js
200 GET 367.499 ms - /en/main.js
302 GET 12.294 ms - /
200 GET 285.421 ms - /en/
200 GET 224.583 ms - /css/main.css?cacheBreaker=0.9212165035468252
302 GET 128.232 ms - /js/vendor-main.js
302 GET 12.069 ms - /js/main.js
200 GET 188.590 ms - /en/vendor-main.js
200 GET 144.242 ms - /en/main.js

Browser Information

  • Browser Name, Version: Chrome
  • Operating System: macOS 10.13.3
  • Mobile, Desktop, or Tablet: Desktop

Screenshot


assets

Info on the Web

https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type

blocked

Most helpful comment

@scissorsneedfoodtoo
Thank you for sending me a message! I'll try to spread freeCodeCamp in my city!

All 13 comments

@t-cool, sorry you're having some problems. I see that you have some ad blockers, looks like Adblocker Plus and uBlock Origin. Could you try turning those off? They might be what's causing the issue here.

Alternatively you could try opening localhost:3000 in an incognito window with all the ad blockers and other extensions disabled.

@scissorsneedfoodtoo
Thank you for you advice.
I turned them off, and I tried on Firefox, Safari too.
But the result was the same...

Are there any other extensions you might be running? And did you try using an incognito window with all extensions disabled? If so I'm stumped. Hope someone's else can chime in and help you figure this out!

Also, make sure that MailHog is running. I remember that being an issue when i was trying to get freeCodeCamp running locally on my computer.

@scissorsneedfoodtoo
I don't use any other plugins, and I tried incognito too.

If you've tried without the plugins, in incognito, and have MailHog running at localhost:8025, I'm really not sure what the issue is. Hope that someone else will chime in and we can get you up and running soon!

I used curl.

$ curl http://127.0.0.1:3000/en | tidy -im
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--: 80 12988   80 10446    0     0  55977      0 --:--:-- --:--:-- --:--:100 12988  100 12988    0     0  69277      0 --:--:-- --:--:-- --:--:-- 69085
line 11 column 188 - Warning: missing </button> before <div>
line 11 column 319 - Warning: inserting implicit <button>
line 11 column 365 - Warning: discarding unexpected </button>
line 11 column 3142 - Warning: <img> lacks "alt" attribute
line 11 column 5564 - Warning: <img> lacks "alt" attribute
line 11 column 5770 - Warning: <img> lacks "alt" attribute
line 11 column 188 - Warning: trimming empty <button>
line 1 column 375 - Warning: discarding unexpected <meta>
Info: Document content looks like HTML5
Tidy found 8 warnings and 0 errors!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="generator" content=
  "HTML Tidy for HTML5 for Apple macOS version 5.6.0">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content=
  "width=device-width, initial-scale=1.0">
  <meta name="csrf-token" content=
  "3bVw2Gji-NsmtvChe_-xWP43O7hit9zVOudk">
  <title>Learn to Code and Help Nonprofits | freeCodeCamp</title>
  <link rel="canonical" href="https://www.freecodecamp.org">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content=
  "width=device-width, initial-scale=1.0">
  <meta name="csrf-token" content=
  "3bVw2Gji-NsmtvChe_-xWP43O7hit9zVOudk">
  <meta property="og:title" content=
  "Learn to code with free online courses, programming projects, and interview preparation for developer jobs.">
  <meta property="og:site_name" content="freeCodeCamp">
  <meta name="twitter:widgets:csp" content="on">
  <meta name="p:domain_verify" content=
  "d0bc047a482c03c24f1168004c2a216a">
  <meta property="og:url" content="https://www.freecodecamp.org">
  <meta property="og:description" content=
  "Learn to code with free online courses, programming projects, and interview preparation for developer jobs.">
  <meta property="og:image" content=
  "https://s3.amazonaws.com/freecodecamp/curriculum-diagram-full.jpg">
  <meta property="og:type" content="article">
  <meta property="article:publisher" content=
  "https://www.facebook.com/freecodecamp">
  <meta property="article:section" content="Responsive">
  <link rel="publisher" href=
  "https://plus.google.com/+Freecodecamp">
  <link rel="author" href="https://plus.google.com/+Freecodecamp">
  <meta name="description" content=
  "Learn to code with free online courses, programming projects, and interview preparation for developer jobs.">
  <meta name="twitter:creator" content="@freecodecamp">
  <meta name="twitter:url" content="http://www.freecodecamp.org">
  <meta name="twitter:site" content="@freecodecamp">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image:src" content=
  "https://s3.amazonaws.com/freecodecamp/curriculum-diagram-full.jpg">
  <meta name="twitter:title" content="Learn to code for free">
  <meta name="twitter:description" content=
  "Learn to code with free online courses, programming projects, and interview preparation for developer jobs.">
  <meta content="a40ee5d5dba3bb091ad783ebd2b1383f" name=
  "p:domain_verify">
  <meta name="msapplication-TileColor" content="#FFFFFF">
  <meta name="msapplication-TileImage" content="/">
  <link rel="android-chrome" sizes="144x144" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/android-chrome-144x144.png">
  <link rel="android-chrome" sizes="192x192" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/android-chrome-192x192.png">
  <link rel="android-chrome" sizes="36x36" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/android-chrome-36x36.png">
  <link rel="android-chrome" sizes="48x48" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/android-chrome-48x48.png">
  <link rel="android-chrome" sizes="72x72" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/android-chrome-72x72.png">
  <link rel="android-chrome" sizes="96x96" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/android-chrome-96x96.png">
  <link rel="android-chrome-manifest" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/android-chrome-manifest.json">
  <link rel="apple-touch-icon" sizes="114x114" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/apple-touch-icon-180x180.png">
  <link rel="apple-touch-icon" sizes="57x57" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon-precomposed" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/apple-touch-icon-precomposed.png">
  <link rel="apple-touch-icon" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/apple-touch-icon.png">
  <link rel="favicon" sizes="16x16" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/favicon-16x16.png">
  <link rel="favicon" sizes="32x32" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/favicon-32x32.png">
  <link rel="favicon" sizes="96x96" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/favicon-96x96.png">
  <link rel="mstile" sizes="144x144" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/mstile-144x144.png">
  <link rel="mstile" sizes="150x150" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/mstile-150x150.png">
  <link rel="mstile" sizes="310x310" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/mstile-310x310.png">
  <link rel="mstile" sizes="310x150" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/mstile-310x150.png">
  <link rel="mstile" sizes="70x70" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/mstile-70x70.png">
  <link rel="favicon" href=
  "https://s3.amazonaws.com/freecodecamp/favicons/favicon.ico">
  <link rel="shortcut icon" href=
  "//s3.amazonaws.com/freecodecamp/favicons/favicon.ico">
  <link rel="stylesheet" type="text/css" href="/css/lato.css">
  <link rel="stylesheet" type="text/css" href=
  "https://cdnjs.cloudflare.com/ajax/libs/cal-heatmap/3.5.2/cal-heatmap.css">
  <link rel="stylesheet" href=
  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href=
  "https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
  <link rel="stylesheet" href=
  "/css/main.css?cacheBreaker=0.2377675284896119">
</head>
<body class="main-container">
  <script>
  (function(i,s,o,g,r,a,m){ i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-55446531-1', 'auto');
  ga('require', 'displayfeatures');
  ga('send', 'pageview');
  </script><!-- Leave the below lines alone!-->
  <script>
  (function(global) {
  global.main = global.main || {};
  global.main.isLoggedIn = false;
  global.main.userId = false;
  }(window))
  </script>
  <script src="/js/vendor-main.js"></script>
  <script src="/js/main.js"></script>
  <nav class="navbar navbar-default navbar-static-top nav-height">
    <div class="navbar-header">
      <div class="col-xs-12">
        <button type="button" data-toggle="collapse" data-target=
        ".navbar-collapse" class=
        "hamburger navbar-toggle"><span class=
        "hamburger-text">Menu</span></button>
      </div><a href="/challenges/current-challenge" class=
      "navbar-brand"><img src=
      "https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg"
      alt="learn to code javascript at freeCodeCamp logo" class=
      "img-responsive nav-logo"></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right hamburger-dropdown">
        <li>
          <a href="/map">Map</a>
        </li>
        <li class="dropdown">
          <a data-toggle="dropdown" role="button" href="#"
          aria-haspopup="true" class=
          "dropdown-toggle">Community</a>
          <ul class="dropdown-menu">
            <li>
              <a href="https://gitter.im/freecodecamp/home" target=
              "_blank" rel="noopener">Chat</a>
            </li>
            <li>
              <a href="https://forum.freecodecamp.org" target=
              "_blank" rel="noopener">Forum</a>
            </li>
            <li>
              <a href="https://medium.freecodecamp.org" target=
              "_blank" rel="noopener">Medium</a>
            </li>
            <li>
              <a href="https://youtube.com/freecodecamp" target=
              "_blank" rel="noopener">YouTube</a>
            </li>
            <li>
              <a href=
              "https://forum.freecodecamp.org/t/free-code-camp-city-based-local-groups/19574"
              target="_blank" rel="noopener">In your city</a>
            </li>
            <li>
              <a href="/about">About</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="https://www.freecodecamp.org/donate" target=
          "_blank" rel="noopener">Donate</a>
        </li>
        <li>
          <a href="/signin">Sign Up</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <div class="row flashMessage">
      <div class=
      "col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
      </div>
    </div>
  </div>
  <div class="container">
    <div class="text-center">
      <div class="row">
        <h1 class="landing-heading">Learn to code for free.</h1>
        <div class="big-break"></div>
        <div class="big-break"></div>
        <div class="big-break"></div>
        <div class="col-xs-12 col-sm-12 col-md-4">
          <img src=
          "https://s3.amazonaws.com/freecodecamp/landing-icon-community.svg"
          alt=
          "Get great references and connections to start your software engineer career"
          class="img-responsive landing-icon img-center">
          <p class="large-p">Join a supportive community of
          millions of coders.</p>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4">
          <img src=
          "https://s3.amazonaws.com/freecodecamp/landing-icon-certificate.svg"
          alt="Help nonprofits with bro bono code projects" class=
          "img-responsive landing-icon img-center">
          <p class="large-p">Build projects and earn free
          certificates.</p>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4">
          <img src=
          "https://s3.amazonaws.com/freecodecamp/landing-icon-experience.svg"
          alt=
          "Get hired as a developer and start your software engineer career"
          class="img-responsive landing-icon img-center">
          <p class="large-p">Get experience by coding for
          nonprofits.</p>
        </div>
      </div>
      <div class="big-break"></div>
      <div class="big-break"></div>
      <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-offset-2">
          <a href="/signin" class=
          "btn btn-cta signup-btn btn-block">Start coding (it's
          free)</a>
        </div>
      </div>
      <div class="spacer"></div>
      <h2>As featured in:</h2><img src=
      "https://s3.amazonaws.com/freecodecamp/as-seen-on.png" class=
      "img-center img-responsive">
      <div class="spacer"></div>
      <hr>
      <div class="spacer"></div>
      <h2>Launch your developer career</h2>
      <div class="spacer"></div>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-4">
          <img src="https://i.imgur.com/nsvNixW.jpg" alt=
          "Meta's testimonial image" class=
          "img-responsive testimonial-image img-center">
          <p class="testimonial-copy">Through freeCodeCamp, I built
          a robust and highly functional web app for a nonprofit.
          This led me to getting a fantastic job.</p>
          <h3>- Meta Hirschl</h3>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4">
          <img src="https://i.imgur.com/QPpjPac.jpg" alt=
          "Brian's testimonial image" class=
          "img-responsive testimonial-image img-center">
          <p class="testimonial-copy">freeCodeCamp is a great way
          for disabled veterans like me to retrain. I'm already
          receiving software engineering job offers.</p>
          <h3>- Brian Grant</h3>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4">
          <img src="https://i.imgur.com/wjlDigg.jpg" alt=
          "Maxim Orlov's testimonial image" class=
          "img-responsive testimonial-image img-center">
          <p class="testimonial-copy">I joined freeCodeCamp with
          zero knowledge of web development. 6 months later, I
          landed my first job as a back end engineer.</p>
          <h3>- Maxim Orlov</h3>
        </div>
      </div>
      <div class="spacer"></div>
      <hr>
      <div class="spacer"></div>
      <h2>Learn powerful skills</h2>
      <div class="spacer"></div>
      <div class="row">
        <div class="text-center negative-35">
          <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="landing-skill-icon ion-social-html5"></div>
            <h2 class="black-text">HTML5</h2>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="landing-skill-icon ion-social-css3"></div>
            <h2 class="black-text">CSS3</h2>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="landing-skill-icon ion-social-javascript">
            </div>
            <h2 class="black-text">JavaScript</h2>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <div class=
            "landing-skill-icon fa fa-database font-awesome-padding">
            </div>
            <h2 class="black-text">Databases</h2>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="landing-skill-icon ion-social-github">
            </div>
            <h2 class="black-text">Git & GitHub</h2>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="landing-skill-icon ion-social-nodejs">
            </div>
            <h2 class="black-text">Node.js</h2>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <div class=
            "landing-skill-icon custom-landing-skill-icon">
            <img src="https://s3.amazonaws.com/freecodecamp/react.svg"></div>
            <h2 class="black-text">React.js</h2>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <div class=
            "landing-skill-icon custom-landing-skill-icon">
            <img src="https://s3.amazonaws.com/freecodecamp/d3-logo.svg"></div>
            <h2 class="black-text">D3.js</h2>
          </div>
        </div>
      </div>
      <div class="big-break"></div>
      <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-offset-2">
          <a href="/signin" class=
          "btn btn-cta signup-btn btn-block">Start coding (it's
          free)</a>
        </div>
      </div>
      <div class="big-break"></div>
    </div>
  </div><!-- scripts should be moved here-->
  <script src=
  "https://cdn.optimizely.com/js/999692993.js"></script>
</body>
</html>

The alt attribute should be used to give a short description
of an image; longer descriptions should be given with the
longdesc attribute which takes a URL linked to the description.
These measures are needed for people using non-graphical browsers.

For further advice on how to make your pages accessible
see http://www.w3.org/WAI/GL.
One or more empty elements were present in the source document but
dropped on output. If these elements are necessary or you don't want
this behavior, then consider setting the option "drop-empty-elements"
to no.

About HTML Tidy: https://github.com/htacg/tidy-html5
Bug reports and comments: https://github.com/htacg/tidy-html5/issues
Official mailing list: https://lists.w3.org/Archives/Public/public-htacg/
Latest HTML specification: http://dev.w3.org/html5/spec-author-view/
Validate your HTML documents: http://validator.w3.org/nu/
Lobby your company to join the W3C: http://www.w3.org/Consortium

Do you speak a language other than English, or a different variant of 
English? Consider helping us to localize HTML Tidy. For details please see 
https://github.com/htacg/tidy-html5/blob/master/README/LOCALIZE.md
$

@t-cool check your gulp's output, using git status . --ignored in clone root directory.
it should comprise these files:
.env node_modules/ public/css/main.css public/js/frame-runner.js public/js/vendor-challenges.js public/js/vendor-main.js public/js/webpack-bundle-stats.html

Hi @t-cool!

You ran npm start develop instead of npm run develop. npm interpreted that as an instruction to run the start command, which we use for the production server, with "develop" as an argument. Running npm run develop instead should solve this problem.

Happy coding!

@systimotic @picospuch
Thank you for your advice!
I ran npm run develop and all the error has been fixed!

Thank you!

I'm glad to hear that it indeed did the trick. Thank you for contributing!

@systimotic, great catch! Glad everything's working now for you @t-cool :+1:

@scissorsneedfoodtoo
Thank you for sending me a message! I'll try to spread freeCodeCamp in my city!

Hi @t-cool!

You ran npm start develop instead of npm run develop. npm interpreted that as an instruction to run the start command, which we use for the production server, with "develop" as an argument. Running npm run develop instead should solve this problem.

Happy coding!

Hey I have the same problem but only when I try to sign into the local website offline.

I made sure I used the run command, even put it all into cmd shortcuts one with mongod and the other with the run seed and run develop commands, and the normal lessons are working but they aren't saving because I need to be able to sign in.

I tried making an ID and a secret ID and edited the .env with this method:
https://guide.freecodecamp.org/miscellaneous/how-to-log-in-to-your-local-instance-of-free-code-camp/
and for some reason localhost:3000/signin just isn't working.
I get redirected to the missing page error.
Please help!
On windows 7 using chrome.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

MichaelLeeHobbs picture MichaelLeeHobbs  路  3Comments

QuincyLarson picture QuincyLarson  路  3Comments

jurijuri picture jurijuri  路  3Comments

ar5had picture ar5had  路  3Comments

danielonodje picture danielonodje  路  3Comments