I understand that in react you cannot import files outside src folder.
But what is the reason for it exactly and can I disable it?
In my project react web app is only part of the whole thing, and different parts share some files (configs, build output), so folder structure looks like this
ProjectRoot/
config
build-output/
Part1/
Part2/
WebApp/
src/
...
Sure, you can copy files or create symlinks, but that's duplication and inconvenient.
This is a restriction of Create React App only.
This tool exists to get new users up and running with the react framework as fast as possible by abstracting away the tooling. The part of tooling that is limiting you in this instance is their webpack configuration, which is preset to only look for javascript files in your src directory.
That explains the why? but to answer the other half of your question:
how can I disable it?
Is that you would need to eject from Create React App and then modify your webpack config to allow it to search directories other than src/
First - this has nothing to do with react itself.
If you refer to importing javascript modules (for now using module loaders like systemjs, require, etc.) then the answer is:
It depends what directory is being served by web server. If you have set up your web server to serve WebApp/src folder only - then no, browser will not be able to get access to the files outside and so module loaders. If you will serve all ProjectRoot directory - then yes, you can.
If you prepare your web application for deployment using some sort of bundlers (webpack, browserify) - it depends on how you will configure them and instruct to include the required files in the resulting bundle.
Related
i created a create-react-app and want to use filetypes like webp or mp3.
When i run my application on localhost via npm run start everything works fine, but after my deployment on my server (which uses npm run build and delivers the build folder) it doesn't load filetypes like mp3 or webp anymore. Why is this happening? i think its any simple configuration in react or anything like that, but i cant solve this problem by my own. Thanks for your help.
The issue may be with typescript (if that is what you're using). Typescript will convert .ts and .tsx files to .js, but not move most other files over to build. If they are in a separate assets directory, you have to ensure that gets deployed too. If this is the issue, you have a few choices.
You can manually move the files over to build as a 'post' deploy step (using say, a shell script).
You can use a bundler like webpack to help you maintain the references to those other assets and bundle them correctly.
I finally found the problem that caused this behaviour. Amazon AWS Amplify creates a rewrite rule for single page applications (SPA). You can find this setting under Rewrites and redirects in your Amplify application settings. There you will find a rewrite rule with following source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
...change it to...
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|mp3)$)([^.]+$)/>
... for example, to allow mp3 files. This is also important to allow webp-Images or woff2-Fonts.
I'm using create-react-app and Semantic UI React to create a web part for SharePoint. (2016 on-prem. Started as 2013, so I wasn't able to use SPFx, so it's just regular old React.)
I created the solution as a Farm solution, so I could map the Layouts folder, and the CRA build output (.js and .css files) is getting deployed to the Layouts folder. I've also mapped the 16 hive folder on the dev server as a drive on my development machine, so part of my development process has been, after running npm run build, to copy the bundles directly over to the server so I can check on my changes/progress etc., without going through the usual SharePoint deployment process.
I have only ever copied the .js and .css files, and the icons used to work.
Now however, the icons are not showing up any more, and it looks like the code is trying to load icons.[hash].woff2, icons.[hash].woff and icons.[hash].ttf from the build/static/media folder in the CRA app.
Specifically, I'm seeing 404s for
https://servername/static/media/icons.[hash].woff2 etc.
Now, I would prefer to get the icons bundled in with the regular .css (and/or .js) files, so I don't have to worry about the media folder. However, I don't really have a problem with having to deploy the icon files in a media folder as well, but I would need the React build to know the correct place to look for them which would not be in
https://servername/static/media
it would be more like
https://servername/sites/my-site/_layouts/path/to/my/feature/media
So how can I either
get the icons bundled in the .css/.js files
or
indicate to CRA/Webpack the place where those files will actually end up, so the app is looking for them in the right place?
Bypassed the problem by switching from bundling the Semantic UI CSS to pulling it from the official CDN, which makes it pull the icons from a CDN somewhere, so I don't have to deal with them.
I'm wondering if it is possible to split up bundles using the angular cli based on a component. For instance, I would like to have multiple components in this app that could or could not exist on the same page, but reference them through separate bundles. Some kind of set up like this would be desired:
/test-app
.angular-cli.json
package.json
tslint.json
src
app
email-list
*.ts
*.html
email-compose
*.ts
*.html
links-links
*.ts
*.html
After the project is built, I would like to be able to have the following bundles:
poylfills.bundle.js
vendor.bundle.js
email.bundle.js
links.bundle.js
Is this possible?
They've prepared support for multiple apps/entry-points (which is equivalent to what you're asking) in the angular-cli.json, but they havn't gotten around to implement it yet. Here's a link to the issues page
In addition, they've announced that they don't intent to expose the webpack configuration of angular-cli, so you wont be able to use your own custom webpack config to do the separate bundling.
So for now, I guess the conclusion is, that it may not be possible (or worth the effort) to make Angular-cli create multiple separate bundles. So you'll probably have to either wait, or skip using the cli, and do the bundling "manually" (create your own bundling process using grunt, gulp, webpack or similar).
I am using the Go runtime of Google App Engine and have two modules. I would like to share HTML templates between them but don't the best way.
My modules are organised as below:
src/github.com/myproject/moduleone/app.yaml
src/github.com/myproject/moduleone/templates/base.html
src/github.com/myproject/moduleone/templates/homeone.html
src/github.com/myproject/moduletwo/app.yaml
src/github.com/myproject/moduletwo/templates/base.html
src/github.com/myproject/moduletwo/templates/hometwo.html
In my situation base.html is the same for moduleone and moduletwo. How can I share it between both modules without having to duplicate the file as is done now?
I would like to put base.html in a directory called src/github.com/myproject/templates but I believe neither moduleone or moduletwo would be able to access the file as it's not in the same or child directory of the module app.yaml files. Is my only option to symlink the base.html file between each module's template directory?
GAE regards each module as a standalone application (each will run in its own GAE instance). No uploadable artifacts are shared at GAE level between the modules, each such artifact needs to be separately uploaded in each module using it.
While other approaches are technically possible (as other mentioned) symlinking the files is IMHO the simplest solution to avoid code duplication in your own repo.
You could copy the templates to each module as part of a build step and gitignore the copied files.
Is it possible to optionally override a static files directory in the Google App Engine app.yaml file if another directory exists? I have a source directory (unminified) and a build directory (minified and concatenated). I want Google App Engine to automatically use the build directory instead of the src directory, if it exists. That way I can dev using the src directory, then create a build and deploy it. Then, if I delete the build directory, GAE goes back to serving my static files from the src directory.
The reason I need to do this is because I am building an application with Backbone.js & Require.js as modules. I need to be able to optimize my code and deploy without changing my app.yaml file every time.
I'm pretty happy with my current system where my framework uses different paths in the templates to the source javascript files. Then at startup, through a combination of checking os.environ and get_application_id() I automatically detect whether I'm running locally on dev_appserver, or under my test appid or production appid on GAE.
And on to the next step, you most likely want to cache your minified JS aggressively, in which case you'd be unable to force clients to update a new version. The typical workaround is to append a hash or date string to the minified js filename whenever it's updated. This is something you'll also need to do in your framework/templating layer instead of app.yaml.
I would do this at the template layer - when you go to render the template that includes links to your assets, check to see if the minified version exists. If it does, link to that - otherwise, link to the unminified version.
This also helps if you accidentally deploy without creating a build - you'll just be serving unoptimized assets.