Skip to content

Allow more customization to homepage option #1279

Description

@lucasavila00

The current setup doesn't allow to use CRA and a CDN if index.html isn't in the same url as the other assets.

Setting the homepage on package.json to "https://somethig.com" will pass "/" as publicPath to webpack.
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L38
That's fine.

But I'd like to serve all assets at a CDN (Firebase) and render "index.html" dynamically elsewhere (AWS Lambda) to add custom meta tags per route, as suggested here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server.
But then I have to set my publicPath to use Firebase's link.

At webpack's docs they say they support it:
https://github.com/webpack/docs/wiki/configuration

And a more complicated example of using a CDN and hashes for assets.

config.js

output: {
    path: "/home/proj/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
}

I wouldn't like to eject just for this, so, what do you guys think about letting me skip this logic https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L44 and set the publicPath I want?

Perhaps escaping the homepage field with a special char like "@https://foo.firebaseapp.com/" will disable https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L44

Proposed POC for this "fix" I came up with: #1280

Thanks for the great work you've been doing on this project 👍

Activity

  1. benknight commented on Dec 19, 2016

    @benknight

    I was able to get around this by setting my homepage to the unique string "$ASSET_URL" and then doing a find/replace on this string in a postbuild script:

    {
      // ...
      "homepage": "$ASSET_URL",
      "devDependencies": {
        // ...
        "replace": "^0.3.0"
      },
      "scripts": {
        // ...
        "postbuild": "npm run replace",
        "replace": "replace '\\$ASSET_URL/static' '..' build -r -s --include='*.css' & replace '\\$ASSET_URL' '\"+window.$ASSET_URL+\"' build -r -s --include='*.js' & replace '\\$ASSET_URL/' '/' build -r -s --include='*.html'"
      },
    }
  2. benknight commented on Dec 20, 2016

    @benknight

    Ah, what I forgot to mention is that I then set a global variable window.$ASSET_URL to whatever the CDN path is to the assets. It's a bit specific to my implementation (in this case a Visualforce site) but I'm sure you can tweak this basic idea to your needs. It's definitely a hack though and it would be nice to have some more customization ability around this.

  3. lucasavila00 commented on Dec 21, 2016

    @lucasavila00
    Author

    @benknight Your initial solution would do it for me, but I get the further idea.
    I guess the contributors are already thinking about this issue. After posting my issue and PR I saw another PR that aims to solve this issue with env variables but people weren't so fond of teaching env vars to beginners.
    I'll keep watching this project until they give an answer on the subject, and if they don't allow this configuration of CRA I'll steal your code as it's better to keep in versioning control.
    As of right now I'm hacking react-scripts on all PCs I use and put the code I mentioned at #1280

    I have given second thoughts on this topic and didn't came up with a better idea on how to allow this configuration cleanly and easy...
    Anyway, bring the popcorn and let's watch how this unfolds hahah
    popcorn-blank

  4. Timer commented on Feb 11, 2017

    @Timer
    Contributor

    Hi there! react-scripts v0.9.0 was just released which adds support for building for relative paths. You may read how to do so here.

    Please test it and don't hesitate to reach out if this doesn't solve your specific use case!

  5. added this to the 0.9.0 milestone on Feb 11, 2017
  6. locked and limited conversation to collaborators on Jan 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions