Giter VIP home page Giter VIP logo

Comments (35)

baadc0de avatar baadc0de commented on March 29, 2024 9

I've been using static for some time now, with good understanding from the rest of the team(s) about it containing purely copied, unprocessed assets. It has been a useful crutch for when a resource path is dynamically generated and/or webpack processing is not required/wanted.

from create-react-app.

mxstbr avatar mxstbr commented on March 29, 2024 8

I love static, working on a PR now! 🚢

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024 4

Yeah, I agree it’s a bad name. (I don’t like assets because people will immediately think it’s the place to put their CSS and images in.. which it is not.)

Maybe we should just use html-loader and make it that <link href> is automatically rewritten and those files are also processed by webpack. I feel like this could solve the majority of cases (e.g. touch icons or vendor CSS sheets), and even use webpack’s features like content hashes.

from create-react-app.

lacker avatar lacker commented on March 29, 2024 2

I like the name static - it's the folder name Django encourages, and it is also a pretty accurate description of what goes there - the files that are not dynamically generated by some process, but are just a static copy of what's in your filesystem. As opposed to assets which implies that it has to be some sort of image or media asset.

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

https://www.npmjs.com/package/copy-webpack-plugin

from create-react-app.

bigblind avatar bigblind commented on March 29, 2024

This would also be useful for files referenced solely in index.html, like manifest.json, or apple-touchìcon.png, and scripts like web workers and service workers.

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

This would also be useful for files referenced solely in index.html, like manifest.json, or apple-touchìcon.png, and scripts like web workers and service workers.

Yep.

from create-react-app.

cliedeman avatar cliedeman commented on March 29, 2024

Hi there, I just bumped into this issue.

I am trying to implement this using copy-webpack-plugin but I can't figure out how to test my branch.
Are there are notes on doing this?

Ciaran

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

Does this help? https://github.com/facebookincubator/create-react-app#contributing

Also, we’d need to solve #21 first because this change will also have implications for it.

from create-react-app.

ForbesLindesay avatar ForbesLindesay commented on March 29, 2024

vendor doesn't seem like the right name here. Seems more like it should be something like "assets". i.e. this is about serving files that don't need building, not necessarily files that have been vendored in.

from create-react-app.

hnordt avatar hnordt commented on March 29, 2024

static looks like a better name than vendor or assets.

from create-react-app.

bigblind avatar bigblind commented on March 29, 2024

I actually agree with not having a special directory at all. All the
compiled files will be static assets anyway. I think just having babel load
resources referenced by html files would be better. This also gives you
more freedom in your folder structure.

On Tue, Jul 26, 2016 at 7:57 PM Héliton Nordt [email protected]
wrote:

static looks like a better name than vendor or assets.


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#28 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAtA1c3w9cK6QqOkQrYcv_Y2gq9yzE7Jks5qZkp4gaJpZM4JQQtC
.

from create-react-app.

taion avatar taion commented on March 29, 2024

Also worth noting that in general static assets should not go in this directory – they should just be imported and dealt with by webpack loaders. I.e. this is the wrong way to pull in e.g. Bootstrap CSS.

from create-react-app.

timarney avatar timarney commented on March 29, 2024

Bringing this up for discussion as noted in the Readme re:images

I think this style of loading images works for most cases

import logo from './logo.png';
<img src={logo} alt="Logo" />;

I worked on a project pre create-react-app where I had to work with roughly 5000 images.

The images were in directories roughly in this style img/large/building_type/texture_type/colour

Given x # of buildings and x # of colours the path to the images had to be dynamic

The filenames were all provided so this looks more complicated than it was but ... I ended up with this

const path = `${assetPath}/img/large/${buildingPath}`
const clad = `${path}cladding/amB${toTitleCase(building)}C_DR_${cladObj.file}.png`

For Local dev assetPath was '' for Prod it was roughly '/client/myapp/'

Bit crazy but it's a real world use case (perhaps a one off and not to worry about).

Creating import statements in such a case wouldn't make any sense.


In this case for prod I could easily add the domain and get it to work but locally I don't think that would work with Webpack dev server.


Wasn't sure if I should even bring this up as it's not a typical setup but figured I should at least mention such a case.

Something like a Photo Gallery might be a more typical use case.

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

@timarney I sort of feel that for this use case you’re better off serving them from a local static server on a different port, and deploying them to a CDN in production.

from create-react-app.

timarney avatar timarney commented on March 29, 2024

@gaearon ya I think your right. It's really only a problem for local dev and it's fairly trivial to work around as you suggest.

from create-react-app.

eMerzh avatar eMerzh commented on March 29, 2024

i'm in the same kind of issue than @timarney , we have like sentry dns ... or api url or other config key that depend on the server / env. It would be cool to be able to "load" a and external js/json/something file to "configure" our app at run time.

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

You have access to environment variables. This is documented in the usage guide in this repo. Does that help?

from create-react-app.

eMerzh avatar eMerzh commented on March 29, 2024

@gaearon yes I saw it... but it seems to help only for the dev version.. not for the builder one... Or I'm missing something?... I don't want those config variables into my compiled bundle... Because it change with every deployment

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

Do you mean that you want to deploy the same build output to different servers, and making a separate build for each environment separately would be a pain?

from create-react-app.

eMerzh avatar eMerzh commented on March 29, 2024

Hum... Didn't think about that... might be possible but not really practical... And the tooling to make the multiple builds for dev/prod has to be made...
But wat if i want to distribute as compiled bundle but still with configurable parts...

PS: I totally understand and share your quest to keep it simple stupid and avoid any config. Just sharing my current workflow/issues

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

You could post-process HTML for this like described here.

<head>
  <script>
    // $CONFIG
  </script>

You can replace // $CONFIG with something like window.CONFIG = { something: 42 } depending on environment before deployment, and you can have a fallback in your code if window.CONFIG doesn’t exist.

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

I’m closing because I’m coming to the conclusion that this is either unnecessary or out of scope of CRA. Currently we give a strong guarantee that if a file changes, browser cache will be busted. We also give a single way to include images and other assets. I would prefer to keep it this way, and address other use cases on a case by case basis (e.g. #558).

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

I drafted a proposal to solve this in #703. Unless we find some fatal flaws, it should come out in 0.5.0. Let me know what you think!

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

This is now supported in 0.5.0.

Read about using the new public folder.

See also migration instructions and breaking changes in 0.5.0.

from create-react-app.

PrimeLens avatar PrimeLens commented on March 29, 2024

Hi gaearon, I'm still looking for what you asked in the op which was the ability to bring a pre-minified javascript file into the bundle without it passing through webpack's minifier. Would it be possible to put this back on the to do agenda?

Edit: I do believe in the need for create-react-app as well as the need for alignment of general react ecosystem

from create-react-app.

PrimeLens avatar PrimeLens commented on March 29, 2024

@gaearon

from create-react-app.

PrimeLens avatar PrimeLens commented on March 29, 2024

Possible workarounds are to delay the firing of "ReactDOM.render of < App / > on #root until vendor files have loaded. This would mean include the vendor files in public, and linking to them in public/index.html and have them fire events off the window after each of them have loaded

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

Hi gaearon, I'm still looking for what you asked in the op which was the ability to bring a pre-minified javascript file into the bundle without it passing through webpack's minifier. Would it be possible to put this back on the to do agenda?

Not into the bundle, but it's possible to put it into the public folder and load as a separate <script> tag. Does that help?

from create-react-app.

PrimeLens avatar PrimeLens commented on March 29, 2024

Thats what I meant in the post just before your reply. It does mean figuring out a way to prevent the bundle from running before the other scripts have loaded

from create-react-app.

PrimeLens avatar PrimeLens commented on March 29, 2024

Can also bring the script in and let it pass thru the web pack minification again and hope it is fine (it should be theoretically)

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

The main bundle will always run last as far as I know. The bundle script is appended to the end of the document body.

from create-react-app.

PrimeLens avatar PrimeLens commented on March 29, 2024

The calls are made asynchronously so bundle can start running before one of the earlier scripts has returned its called

from create-react-app.

gaearon avatar gaearon commented on March 29, 2024

JS scripts wait for each other to execute. If your earlier script needs to do something async then you should export a global that lets the other script to wait:

// myscript.js
window.waitForThingsToHappen = function() {
  return fetch(/* ... */).then(/* whatever */);
}

// index.js
window.waitForThingsToHappen().then(() => {
  ReactDOM.render(<App />, root);
});

from create-react-app.

PrimeLens avatar PrimeLens commented on March 29, 2024

Got it. Thanks @gaearon

from create-react-app.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.