haochuan / create-express-react Goto Github PK

In app.js, there is one wildcard (asterisk / *) route that redirects to index.html for production environments:

// Load React App
// Serve HTML file for production
if (env.name === "production") {
  app.get("*", function response(req, res) {
    res.sendFile(path.join(__dirname, "public", "index.html"));
  });
}

Unfortunately, this means when the browser tries to load create-react-app's pre-configured ServiceWorker at public/service-worker.js, it initially gets routed through this wildcard route and gets sent to the browser with the incorrect MIME type of text/html in its http headers, resulting in this console error:

Error during service worker registration: DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').

The solution I found is to add an additional route before the wildcard route for service-worker.js:

if (env.name === "production") {
  app.get("/service-worker.js", (req, res) => {
    res.sendFile(path.resolve(__dirname, "public", "service-worker.js"));
  });
  app.get("*", function response(req, res) {
    res.sendFile(path.join(__dirname, "public", "index.html"));
  });
}

@haochuan, if you're OK with this solution, I will gladly create a pull request for it.

There is no transpilation preset defined in either the npm script buildServer, or in a .babelrc file, so Babel doesn't actually do any transpilation of the built files that get produced in the dist folder.

As a result, I immediately get an error on the first line of dist/index.js because import statements are not natively supported (yet) by nodejs.

Unfortunately, I am also having issues when I create a .babelrc file with presets that should work, like:

{
  "presets": ["es2015"]
}

The first error I get is related to the server/config/env.js file; it doesn't seem to import correctly:

if (_env2.default.name === "production") {
              ^

TypeError: Cannot read property 'name' of undefined
    at Object.<anonymous> (/Users/msidor/Documents/fmeco/ceed/dist/app.js:80:19)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/msidor/Documents/fmeco/ceed/dist/index.js:7:12)
    at Module._compile (module.js:635:30)

I'm inexperienced with Babel, so I could use some help to figure out the correct configuration for this repository.

@haochuan, have you been able to get the build script to run correctly on your machine?