Comments (35)
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.
I love static
, working on a PR now! 🚢
from create-react-app.
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.
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.
https://www.npmjs.com/package/copy-webpack-plugin
from create-react-app.
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.
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.
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.
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.
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.
static
looks like a better name than vendor
or assets
.
from create-react-app.
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.
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.
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.
@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.
@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.
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.
You have access to environment variables. This is documented in the usage guide in this repo. Does that help?
from create-react-app.
@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.
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.
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.
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.
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.
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.
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.
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.
from create-react-app.
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.
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.
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.
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.
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.
The calls are made asynchronously so bundle can start running before one of the earlier scripts has returned its called
from create-react-app.
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.
Got it. Thanks @gaearon
from create-react-app.
Related Issues (20)
- npm error code E404 npm error 404 Not Found - GET https://registry.npmjs.org/creat-react-app - Not found npm error 404 npm error 404 'creat-react-app@*' is not in this registry. npm error 404 npm error 404 Note that you can also install from a npm error 404 tarball, folder, http url, or git url.
- cannot build projects when cwd contains a pathname with ! HOT 1
- Npx create-react-app: 8 vulnerabilities (2 moderate, 6 high) HOT 8
- Create react app HOT 1
- login issue
- my sign in not working
- HMR not working
- [email protected]
- "npx create-react-app" doesn't generate src or public folders HOT 1
- Usage override/workaround/hack with ESLint 9
- Frontend Host doesn't match the current host in the browser, so it's probably incorrect. Links in emails and file downloads from the API will not work. Click here to update. HOT 1
- [https://newsroom.spotify.com/news/](https://deezer.page.link/fCBsxrTRUZvKbLkA8) HOT 3
- react-scripts/v/5.1.0-next.14 contains multiple security vulnerabilities for inner modules
- Issue in creating react app HOT 4
- cra打包路由切换FiberRootNode会新增,webpack打包就不会 HOT 1
- Error -4048 and Error -4058 and ENOENT, HOT 1
- Des erreurs apres installation de mui sur un projet React 18.0.0 ou supérieur HOT 1
- del proyecto
- how i can run react program in vs code HOT 4
- React JS HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from create-react-app.