I have a React Native project where I'm trying to bundle some pre-generated HTML, JS, and CSS with the application, and have a WebView render the web assets using the react-native-community/react-native-webview library. I can load the index.html file just fine, but it won't load the other assets because it seems to be pointing to the wrong path. I've tried using baseUrl but it doesn't seem to work.
My React Native code looks like this:
<WebView
source={{ uri: './assets/index.html' }}
allowFileAccessFromFileURLs={true}
allowUniversalAccessFromFileURLs={true}
originWhitelist={["*"]}
mixedContentMode='always'
/>
And then as part of the build process, my assets directory has this structure:
ios
|- assets
|- index.html
|- js
|- main.js
|- css
|- main.css
I have this as part of the Copy Bundle Resources step in Xcode, so the assets directory is included with the ios app bundle.
Inside index.html is this code:
<html>
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
Hello World!
<script type="text/javascript" src="/js/main.js"></script>
</body>
</html>
Going back to the original question, when I run this application, I can see the "Hello world!" so that tells me the HTML is loading, but the CSS and the JS files don't load because as far as I can tell it's trying to load from file:///assets/js/main.js instead of being relative to the app bundle location. Is there any way I can get this to work as desired?
I'd really, really like to avoid having to change the script src from /js/main.js if at all possible. The actual application I'm building auto-generates these files from a separate react project I have.
I have a sample minimal project that demonstrates this issue here:
https://github.com/jabbawookiees/psyduck
You can just clone this project then run the following if you want to try fixing it:
yarn install
cd ios && pod install && cd ..
yarn run react-native run-ios
What I ended up doing was bundling a web server with my iOS app and serving the resources from there.
https://github.com/futurepress/react-native-static-server
Related
First, it would be really nice if the stagehand "reversed text" Dart Polymer default example worked in all browsers.
Reading this > this, I changed the example's index.html to include the webcomponents line:
<body unresolved>
<main-app></main-app>
<script type="application/dart" src="index.dart"></script>
<script src="packages/browser/dart.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
</body>
I also downloaded the webcomponents zip and copied the js file to my project web folder and referenced it there. Clearly, I don't know what I'm doing. Do I need to change or add something to pubspec dependencies?
Thanks
Steve
There is the Dart web_components package that wraps web-components polyfills for Dart. Stagehand automatically adds the dependency to your pubspec.yaml.
After you run pub get or pub upgrade you can find the scripts in the packages/web_components/ directory.
Just add
<script src="web_componentsjs/webcomponents-lite.min.js"></script>
in the head of your entry page (not after the Dart script tag as shown in your question).
Stagehand is a community project. Please file an issue in the GitHub repo to add the script tag or create a pull request with the necessary changes.
I'm used to building ng applications using just Angular and with this typical structure:
app
js
home
home.controller.js
home.directive.js
shared
usedByAll.controller.js
usedByAll.directive.js
templates
home.html
test
e2e
protractor tests
node_modules
index.html
package.json
So that when someone else coming in wants to catch up they just need to run
npm install
to install all the dependencies listed into their node_modules folder saving them time.
But recently I've started working on a Ruby-on-Rails project that is looking to angularize some of its components. This naturally means they're following their own MVC style and project structure and the angular stuff has been restricted to the following folders:
app/assets/javascripts/angular-components/component1
component2
component3
lib/angular.js
angular-mocks.js
etc
This is fine for development but when it comes down to testing I think this could be a problem. So my questions are really the following:
1 - When installing new modules via npm and attempting to save them as devDependencies
npm install karma --save-dev
to the package.json file, doesn't it mean you should have the node_modules folder at the root as well as the package.json file at the root?
2 - Should the karma.conf.js file, like the node_modules folder and package.json file, always be at the absolute root of the application?
Thanks
In many rails/angular applications you can see that Angular is tucked away inside the app/assets/javascripts folder. I personally don't like mixing and matching what I'm using when it comes to pages - i.e. go and get a Rails generated view or this one is an Angular one so go there.
Instead I broke out the two. Essentially the Rails part of this just functions as an API whereas Angular now handles the front end entirely. This allows you to treat the angular part nearly as a standalone app, following the typical angular structure. By doing this you can have the karma.conf.js file at the root of this folder.
ExampleAppName
- app (All Angular stuff is in here)
- src
- gulpfile.js
- karma.conf.js
- package.json
- api (All rails stuff is in here)
- rails stuff
I have found a nice JS component that's installed with Bower.
I'd like to know how I could import my component and let it be served by Pub.
So far I've tried to bower install it, and it gets downloaded in the root of my project in /bower_components
And then in my index.html I tried:
<link rel="import" href="../bower_components/paper-date-picker/paper-date-picker.html">
but Pub won't load the files (seems like it can't figure out relative paths in Bower).
By default, pub serves web as root folder, so you cant go deeper than root.
The easiest way to get this to work is to symlink bower_components folder into web folder, like pub does for packages folder.
Don't forget to remove .. before /bower_components in your href attribute after that.
Your path looks right ../ this is correct but go to /bower_components/paper-date-picker/paper-date-picker.html and make sure it is right.
or change that line to
../bower_components/paper-date-picker/paper-date-picker-dialog.html
and see if it works.
I have installed into a new project in codekit the following components:
jquery
animate.css
normalize
Modernizer
I understand that keeping these components in the bower directory is recommended so these files are easily updated. However, do we link to these in our html files directly? My sass files get compiled and outputted to assets/css but there aren't any sass files in the bower components and creating them in the original folder would, I assume, get overridden if I was to upgrade. Seems very odd to me to upload the entire bower_components file to the production server with all the dependent files. I have been building site for a long time without all this node, git, grunt, bower, et al stuff. I see the value in it, but I'm having a tough time getting up to speed. Any help sure would be appreciated.
In most cases, you would want to include the third-party components (e.g. css, javascript, ... files) within your own master css or javascript file and then minimize that file for production. For example, my folder structure looks like:
bower_components/
...
release/
css/
styles.min.css
img/
...
js/
scripts.min.js
src/
images/
...
scripts/
scripts.js
styles/
styles.less
templates/
...
And then, within styles.less, I might have:
#import (less) "../../bower_components/normalize-css/normalize.css";
Or within scripts.js I could have:
//#codekit-prepend "../../bower_components/jquery/dist/jquery.js"
I have CodeKit set to generate the minified versions in release/ from those files. The only files that go to production are all of the files in the release/ folder.
I just read Dart's article on Assets and Transformers and want to make sure I am understanding the correct way of structuring your asset directory.
Say my project name is MyApp, and it should produce - after cross-compiling - a JavaScript file called myapp.dart.js. Here is how I have the asset directory set up:
MyProject/
asset/
bootstrap/
css/
...
fonts/
...
js/
...
myapp/
... myapp's CSS and images
...other package's assets
web/
...
Am I doing this right? Or should I be placing my assets some place else, or in a different convention?
Yes it's fine this way.
The asset directory is currently only supported by pub serve and pub build but not by the web server integrated into the Darteditor.