How to rename react-native entry file (index.ios.js) - javascript

When I init a react-native project, index.ios.js is created as project entry file.
Can I change this file's name and if so, how?

When you start a react-native app you'll see this message output by the React Packager:
Running packager on port 8081
and then:
Looking for JS files in
/Users/gbirman/gil/mapily
React packager ready.
By this point, the packager has compiled your JS files and is serving them with the .js extension renamed to .bundle. For example, your index.io.js file is compiled and served from:
http://localhost:8081/index.ios.bundle
If you added another file foo.js in the same directory as index.ios.js, the packager would serve it from:
http://localhost:8081/foo.bundle
You can confirm this by opening that url in your browser.
Now to answer your question, your project has an iOS/AppDelegate.m file with the following line:
jsCodeLocation = [NSURL URLWithString:#"http://localhost:8081/index.ios.bundle"];
... as you can see, it loads the index.ios.bundle. You can change the path/filename there to whatever you want, but it's probably best to stick with the recommended approach of naming your entry file index.io.js

Suppose you've moved your index.ios.js into a folder called dist. You need to do two things
For your development environment: Update jsBundleURLForBundleRoot in AppDelegate.m to match your updated path.
For your release bundle: Open your Xcode project. You'll need to update the Bundle React Native code and images task under Build Phases for your project. Update the shell script in this section to look like below:
export NODE_BINARY=node
../node_modules/react-native/packager/react-native-xcode.sh dist/index.ios.js
react-native-xcode.sh accepts the ENTRY_FILE as an optional first argument, defaulting to index.ios.js if none is found.
Updated Build Phases Example
Reference - react-native/scripts/react-native-xcode.sh

Related

exporting .png files from a library to a React JavaScript project

I'm creating a utility project that will supply React components and resources to my other projects.
I'd like it to include a set of images (mostly .png files for icons) that can then be imported by the child projects.
I can't figure out how to make this work.
I can export the images from the library, and I can see them, name-mangled, in the node_modules of the child project. So, all good so far.
But, import {imgName} from "myLib" does not include the file in the child project's bundle.
It looks to me like my problem is explained by a clue in https://create-react-app.dev/docs/adding-images-fonts-and-files/:
You can import a file right in a JavaScript module. This tells
webpack to include that file in the bundle.
Presumably, CRA is not triggering this webpack behavior in my case, since I'm importing from another module, not from a file.
How can I get things working?
Assume:
I have complete ownership of the library and child projects, so I can change this solution in whatever way works. I just want to have a single common resource for the images.
I don't want to eject my child projects
Ideally, any complexity should be in the library project. The child projects should have minimal complex tooling. (My intent is for this library to be used by a team of other developers, who will want to focus on their own tasks; not on tooling details)
EDIT (ADDED LATER)
Per the comments in the first answer below, I've created a simple example of my problem. See:
Library repo: github.com/deg/media-file-bug-library
Library package: npmjs.com/package/media-file-bug-library
Client repo: github.com/deg/media-file-bug-client
Just pull the client repo and do yarn install and yarn start. This will bring up a little web page that shows the problem:
SCREEN SNAPSHOT:
The Problem is Not in CRA Trigger. Importing Png File like JavaScript Hides a Magic. Here you are importing a Image and Exporting it which then get Processed by bundler and The Bundled Index Actually Exports The name of the Processed Image File Which in Your Case is corss~nAalnlvj.png. That's Why Your Image is Broken but you are able to render name of File, The Case is Same for microbundle or parcel.
How You Can solve it is by separating your assets and components By Placing Images on separate assets folder and place your images there and then add assets to files in your files in package.json
{
.
.
"files": [ "dist", "assets"],
}
And Then Import Image & Using Like This
import React from 'react'
import ico_cross from 'media-file-bug-library-fix/assets/cross.png'
function App() {
return (
<div className="App">
<img src={ico_cross} alt="im"/>
</div>
);
}
For Further Reference Checkout
Here
A Npm Library For Your Fix I Published Npm media-file-bug-library-fix
enter image description here
hey David I found the solution please do check the above screenshot
as in you package just change in index.modern.js
// WebPack doesnt listen as a path it listen
// var cross = "cross~nAalnlvj.png";
// use import rather than simple name as it generate a full absolute path at parent level so that in child level it can be accessible as an Image
import cross from "./cross~nAalnlvj.png"

Why is eleventy trying to parse a file in a passthrough copy?

I added a "scripts" folder as a passthrough copy to my Eleventy site and installed some npm dependencies inside it for scripts to be run on the page load.
So my .eleventy.js has some lines like this:
eleventyConfig.addPassthroughCopy("img");
eleventyConfig.addPassthroughCopy("scripts");
eleventyConfig.addPassthroughCopy("css");
But when I run npx eleventy, I get a build error that says,
Language does not exist: sh
Problem writing Eleventy templates: (more in DEBUG output)
> Having trouble rendering liquid (and markdown) template ./scripts/wb-service-worker/node_modules/bs-fetch/README.md
Why is it trying to "render liquid" in a passthrough copy? (I thought the whole point of passthrough copies is it doesn't try to parse them.) How do I get it to stop?
addPassthroughCopy will copy the files through without parsing, but if the file is also in the input directory, eleventy will process it in its normal way too.
You should keep the assets that you want to be passthrough-copied in a seperate folder to the src files that you are inputting to eleventy for processing.
See these docs for more help:
Input Directory
Ignoring Files
Passthrough's handling of input files

How to change the paths for JS files inside runtime in a build project in angular?

I am working with angular 8, I have finished my project and I have used lazy loading, after having my project ready I have done an ng build --prod (therefore I generated several javascript files).
We use Django as a server, and because of our way of working we separate the JS and CSS files in a folder and the index.html in the root, what is the problem?
What the files to be called within the runtime file have an undefined path, I see that it has a src function that returns the location of the file, but I don't know how to modify this function.
Inside to runtime.js we have this
After performing a console.log in the variable "u.p" I can see EMPTY,
How can I modify a U.P. variable/function? I want to place u.p. = "js /" (I have manually replaced u.p with what I need and it works, but I want it to be automatic) I understand that it must be an Angular.json configuration or an extra command when doing the ng build --prod

Vue SPA - How to hide .vue files when rendered in browser

I'm working on a Single Page App developed in Vue.js hosted on a node.js server.
At the moment it is still under development but eventually it will be exposed to external customers, and since we will deal with sensitive data we would like to avoid to have the .vue files and the relative file-tree structure visible when users inspect the element in devtool.
See attached screenshot as a sample that shows the files I would like to hide.
Is there a way to achieve that?
I was able to make webpack export the SPA in a bundle by playing around with the config file.
In the file ./config/index.js I have changed the following flags:
build: {
// other code...
devtool: '', // Previously it was set as '#source-map'
productionSourceMap: false, // Previously it was set as true
cssSourceMap: false, // Previously set as true
// other code...
}
I've found the solution by reading the webpack documentation where it explains what the settings do: https://webpack.js.org/configuration/devtool/#production
Thanks everyone for putting me in the right direction.
It seems you are running on development mode of vue. And Of course files will be visible by then. When shipping a Vue SPA, it should be build and compiled into chunks of JS.
You can build a production version of your spa by running.
npm run build
This will produce 1 folder and 1 file inside the dist
--dist
----static
----index.html
When this were served. No .vue files will be visible anymore.
And when you check it on Browsers Dev tools. It should look more like of this
The folders node_modules, src, and theme should be a level up in the folder structure. Therefore, you have to modify your paths pointing to those files.
The app.js can be in that folder only with files that are JS executables.

How can I customize Jasmine's directory structure?

When using the Jasmine Rubygem, I find it extremely annoying that I have to conform to the generated directory structure which has a javascripts subfolder within the spec folder. I find it useless since I'm writing entirely in Javascript.
I find I can change this within the public folder by changing the generated jasmine.yml, however, this is not what I wanted since I still have to keep the javascripts folder with me.
Is there any way of customizing this folder structure?
Here's how I did this with jasmine gem 1.0.2.1:
1) Customize the jasmine_config.rb file to override the simple_config_file method to point to the correct yml file path. This file is initially generated at spec/javascripts/support/jasmine_config.rb. As seen on the github source (https://github.com/pivotal/jasmine-gem/blob/v1.0.2.1/lib/jasmine/config.rb), the method is hardcoded to use:
def simple_config_file
File.join(project_root, 'spec/javascripts/support/jasmine.yml')
end
I wanted to rename my 'spec' directory to 'test' so the top of my jasmine_config.rb file looks like this:
module Jasmine
class Config
def simple_config_file
File.join(project_root, 'test/javascripts/support/jasmine.yml')
end
end
end
2) Force rake to load the config file. I did this by adding the line:
require 'test/javascripts/support/jasmine_config.rb'
immediately after requiring jasmine in my Rakefile.
3) Update jasmine.yml (also in the support folder) to indicate where your javascript test files live. My yml file now ends with this:
# EXAMPLE:
#
# spec_dir: spec/javascripts
#
spec_dir: test/javascripts
Of course, you need to adjust that path "test" to be what you want.
I think this approach should work with the latest version of the gem, but this approach will break in the future if they change the interface of that Config class.
As of 2021, here's how to change the folder name when using the jasmine-browser-runner with NodeJS.
Install jasmine and setup the project:
npm install --save-dev jasmine-browser-runner jasmine-core
npx jasmine-browser-runner init
Rename the spec folder to test and edit jasmine-browser.json:
"specDir": "test"
Run the tests with this command:
npx jasmine-browser-runner runSpecs --config=test/support/jasmine-browser.json

Categories