I'm currently experimenting with react and express and I wanted to know if react files are hidden, what m trying to do right now is encrypting api responses server side then decrypting it in the frontend, but having the key visible to everyone makes the entire thing useless
When you deploy your React application, your entire source code is visible to everyone from the sources tab of the dev tools.
This is not an issue with the create-react-app but all of the source code is added because of the source map which helps to easily identify the source of the bug that will occur on the live site in the future.
There is an easy way to fix it :
Create a file with the name .env in your project folder with the below code inside it :
GENERATE_SOURCEMAP=false
Or add this in package.json file :
scripts: {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}
Now, when you run π»π½πΊ/yarn πΏππ» π―ππΆπΉπ± command from the terminal, It will generate a
π―ππΆπΉπ± folder with minified files without a source map that you can deploy to the production.
Hope you find my answer helpful !
Related
I started using react native 2 months ago , and when i create i project by expo init, I see that .expo-shared is not ignored, and it seems like it contains someting like a token,
so as a newbie with a web development background, I wanna know if it is okay to push it to the public repository.
There's a README in that folder which says:
> Why do I have a folder named ".expo-shared" in my project?
The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize".
> What does the "assets.json" file contain?
The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again.
> Should I commit the ".expo-shared" folder?
Yes, you should share the ".expo-shared" folder with your collaborators.
So that should answer your question
I have not git-ignored mine and all is well, but as this is an expo internal folder, you could add it to the git ignore file without problems.
Is it possible to an Expo app example to load a module located in the parent folder AND to see changes in the example app when i rebuild the package (with tsc -w to rebuild on any saved files)?
I precise that the module is not publish on npm yet.
I've already succeed to do that using monorepo architecture with yarn workspaces and expo-yarn-workspaces package.
But what about the case when you don't want to publish your package like a monorepo?
For example, in this repo https://github.com/cuvent/react-native-vision-camera
There is an example RN app in bare workflow and in its package.json there is no mention of the developed package (meaning that it's not installed like a normal dependency).
But in the app src/App.tsx, the package is used like that :
import { Camera, frameRateIncluded, sortFormatsByResolution, filterFormatsByAspectRatio } from 'react-native-vision-camera';
Though, the react-native-vision-camera is used like it's already and normally installed with yarn or npm.
How does it work ?
Thanks.
Finally, I've found something that works for me.
You can find my config for metro if you want here:
https://github.com/grean/react-native-metro-config-app-example
With it, you can access the parent component from the expo app, modify it and immediately see the hot-reload changes.
Create a file metro.config file in your expo root app directory with that code inside:
let config = require('#grean/react-native-metro-config-app-example/index.js');
module.exports = config
For a whole example, you can check this repo out:
https://github.com/grean/react-native-scale-text
I got an application what we white-label for others.
This means we share the same functionality through the apps but there are some specific design elements (mostly colors and pictures) in each app.
I'm looking for the easiest and best way to identify the built app for my Expo React Native codebase.
My plan is store everything in the same javascript codebase, and just get load the correct config files by the application name.
In this case, I would get a few apps in the stores:
BlueApp
RedApp
GreenApp
All of them would load the same expo app: exp.host/#comp/colours
And this expo app should set the background to blue in the BlueApp and red in the RedApp.
! I don't want to detach my expo app, I want to still build my apps with the expo.
It is possible to use a different configuration file by doing expo start --config=some-app.json. One problem I ran into is that some assets were still being required at a specific location (eg. assets/images/icon.png).
The solution I came up with is to switch the project, via a bash script, every time you start a project. That way, the development you run you will also publish without fussing around config parameters that expo may or may not support.
So in your package.json you can have run commands which look like this:
./switch project1 && expo start
The bash script would sync all assets from src directory, including app.json to their expected paths. The directory structure would looks like this:
src
- project1
- app.json
- assets
- project2
- app.json
- assets
and the script:
#!/bin/bash
if [ $1 == "swaggr" ] || [ $1 == "chatsera" ]
then
echo "switching to $1"
unlink app.json
cp ./src/$1/app.json ./app.json
rsync -rvz ./src/$1/assets/ ./assets/
else
echo "could not switch project. $1 is invalid"
fi
If you use this approach I'd probably add app.json and all assets in .gitignore.
I'm not sure if i understood you correctly but i kinda think of a solution.
I don't know if this is the best way.
You can use release channels to create 3 different version of the same code. Than you can load config for the channel using Expo.Constants.manifest.releaseChannel.
for more information https://docs.expo.io/versions/latest/distribution/release-channels
Let's say I initialize a project under react-native init <filename>, installed a bunch of node packages, and added code.
Then separately I initialize a different project under react-viro init <filename>, installed a bunch of node packages, and added code.
If I wanted to combine what I created under react-native init into what I created under react-viro init, is it as simple as copying files over and reinstalling missing node packages into the react-viro project?
Assuming you are working in the ./src folder, every file is independent of iOS or Android as part of the JavaScript bundle.
You can simply copy the .js files over and install the node packages in that project.
You probably should not copy any files that are outside the ./src folder, but I also suspect you wouldn't need to. Files in the Android and iOS folders are rarely touched as they contain operating system config settings and custom modules that you would have wrote in the native languages.
If the file renders JSX, you will be safe to just copy it over and hook it back up.
To state it another way, go into the folder that has node_modules in it. You shouldn't copy anything that is in that folder except additional files that you created. This is where people normally create an src folder and place all their JavaScript. You probably have an index file in there that points to ./src/app.js or you may have an index.ios.js and index.android.js that both point to a ./src/app.js. Anything inside src is safe.
That's my best answer without seeing your folders and files.
If you intend to copy code from one react native project to another, make sure the code you intend to copy is JS and not any native files. Make sure you do register the correct component using AppRegistry. Rest assured you can copy the code from one project to another.
Assuming you have a project at folder
/my-project/android
/my-project/ios
/my-project/src
Copy my-project and paste it at your desired folder like
/new-my-project
Change git origin
git remote set-url origin https://gitlab.com/..../**.git
Open /new-my-project/android in Android Studio, and then rename app/java/com.myproject to com.newmyproject
Go to app/build.grade and change com.myproject to com.newmyproject and sync
Create firebase project and download google-services.json file and add to new-my-project/android/app
Build application, then test application under metro bundler
npx react-native start
Create keystore, test notifications, change base_url_api, test apk etc Android finish now, iOS
Update pods on new-my-project/ios
pod install && pod update
open myproject.xcworkspace
Change bundle identifier to org.reactjs.native.newmyproject, version to 1.0, build to 1 and desired Display name. Let it index completely
Setup in firbase and replace GoogleService-Info.Plist file and Clean build folder in xcode
Go to developer.apple.com and create identifiers, APNS certificates, profiles
Download certificates from keychain and upload to firebase
Build the project in simulator/device and test it.
Done
I am a semi noob in web development.
I just started playing around with angular2 today. And i ran into a problem..
If I were to install angular2 with npm to my local computer, which file is the js file that should be linked to the html page that show up on the client?
In their guide, i see a file called /node_modules/angular2/bundles/angular2.sfx.dev.js. But i don't even see this file at all.
Is there some script that i should run to build that file? Or is the file renamed? I am really confused.
I tried some file /angular2/bundles/angular2.js, but it doesn't even export ng variable to window!
I see that in https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js, eventually ng gets exported. But what changed in alpha 53? (the version i get for doing npm install angular2)
In my projects, I a using
"node_modules/angular2/bundles/angular2.dev.js"
You might additionally need to install/add systemjs, just in case you are using the systemjs library.