I have multiple apps (independent of each other) which has let's say the Login state the same in the redux across the apps. The code for Login for both action creators and reducers will be the same. So how can I without copy pasting share the code between the apps?
If you have a frequently used functions, you can isolate those functions into a separate package called core or something like that.
There are some techniques to resolve dependencies to your common functions. If public package is OK, using npm as normal. If private package is a must, one option is using resolve feature of webpack to treat a local repository as a node module.
https://webpack.js.org/configuration/resolve/
So the solution I came up with for this issue was to use Lerna. With Lerna I created a sub-module which was installed as a package for the main app. There are articles available which mention creating a monorepo with Lerna.
Related
I have created a React package that I've uploaded to an NPM repo for being consumed for React Apps. What I want to achieve is to be able to set up certain parameters when consuming my component. Let's suppose that my package calls an API. This package is being used for 2 apps, App A and App B. App A needs that the component calls an url whilst App B is going to call another url. Is there any particular way to achieve this (like Axios does ie).
The main thing, I think, is that my package has a lot of components and this configuration can be used in any of them, so what I want to do is not to pass it to the root component, just having it available all the time. I have read about Context API but I am not sure if this is the correct approach or if there is even an easier way since these values are not going to be updated once the application started, these values will remain static.
Please let me know if my question is unclear.
Thanks.
what you can do is to follow the rule "build oncedeploy everywhere"...you can put a app-config.json that contain your app config file in your public folder... in your main component you fetch that file ...
a second approach is to use .env file and use it everywhere in your app like this :process.env.REACT_APP_API_URL...check this out https://create-react-app.dev/docs/adding-custom-environment-variables/
Now there is an alternative to dotenv in React for configuration: wj-config. Currently in beta, the v2 will provide a very robust set of configurations. The ReadMe for this package is very extensive and explains how to use it in React in detail.
I am unsure if all you need is a configuration method or not. In any case, I would still recommend that you give it a shot. You may also read this blog post that explains this new configuration package.
I would like to generate Typescript React pages or components by using an API and not a CLI tool (like Plop.js) offers for example. The idea is to generate those components from templates based after a tool is run and it should happen behind the scenes without user interacting with the default CLI tools that they usually come in.
Thank you.
You can use http://json2ts.com/ for this issue.
Or also there is package
https://www.npmjs.com/package/json-to-ts
I have come across Hygen and used their setup that was noted down in the Readme to setup an API for generating custom components without interacting with any default CLI tools.
Hi guys i try for create global variables with file .env but not works i use react native expo
i wrote process.env.API_URL but not found this variable. What i to do for works ?
I'm desesperated
I read https://www.npmjs.com/package/react-native-dotenv and https://docs.expo.io/guides/environment-variables/ but not works for me.
I need HELP !!!
https://docs.expo.io/guides/environment-variables/#the-app-manifest-env
If you have installed the expo-constants module in your managed
workflow project, you can access the app manifest's properties. One of
these properties is the .env property, a property that is only
available when running expo start. As the name suggests, it contains
some of your system-defined environment variables. For security
reasons, only the variables that starts with REACT_NATIVE_ or EXPO_
are available.
If you want the API url to be available it needs to be prefixed with REACT_NATIVE_ or EXPO_
Defined
REACT_NATIVE_API_URL=....
or
EXPO_API_URL=....
Accessed via
process.env.REACT_NATIVE_API_URL
or
process.env.EXPO_API_URL
Edit
If using the react-native-dotenv module
Usage
Add your env key-value pairs to your .env file
API_URL=....
Now import it in your .js file
import { API_URL } from 'react-native-dotenv';
I ran into so many issues getting environment variables to work. Oddly, the most highly recommended package was react-native-dotenv, and the first line of code in index.js is to require('fs'), which is a Node module that isn't available in React Native.
Anyways, I ended up creating a new context to handle Environment Variables. I don't have logic to automatically import variables based on environment, but that's as simple as commenting out one line.
Create a JSON file with your variables, import it into your context, and place it at the top of your app.js return, allowing everything in your app to consume it. From there, import it with useContext() as you would any other context, and you have access to all your variables.
Edit: After repeated issues, I decided to simply only use production variables for app testing. It's not ideal at all, but I'm sure many are in the same position as I'm in where the only real difference in variables is the route name for the API (local test server vs. production server). Unfortunately, both iOS and Android do not support http requests, or https requests with self-signed certificates without editing config files. Those config files are not available if you're using an Expo managed flow. Thus, my only choice was to simply do my testing on the production API. Luckily, I have good logs to go by, and the API itself is fairly mature and has endured plenty of testing via the web React app.
If anyone has a better solution, I'd love to hear it.
I currently have a growing React JS project. Within the project I have a folder for my utils that include business logic and API calls.
The plan is to separate the the web client, the utils and a new react native based app client into three different projects. The web and app client will both make use of the same api calls and business logic.
What's the best way to go about splitting up the current project and how would I link everything? Is an NPM package the way to go or is there a way to do something similar within Github?
TL;DR: What's the best way to separate my utils folder into its own project and using it within my current web project?
You could make an NPM package. That would work. However I found it is easier to use a symlinked folder. It's quicker, simpler, and plays better with dev and debug tools.
The downsides of an NPM package are:
Getting build processes like webpack to work and give you nice source code maps for debugging is a headache.
It's easier to get code-versioning issues.
I need a React component sharing solution so components that I use in multiple applications keep synced. Let's say I have a TopBar component in 1 app of 10 apps I have, all of the rest apps would get the updated TopBar component. There are solutions like Bit.dev made for this job but, is it possible to do this using Azure Artifacts?
Note: To my understanding, Azure Artifacts is for packages and what I am looking to accomplish is component sharing, these are two totally different.
Azure Artifacts is a universal store for all the artifacts which you can use as part of development and deployment, includes NuGet, npm, Maven packages and Universal Packages.Azure Artifacts manages the dependencies used in your codebase and provides easy tools to ensure the immutability and performance of those components.
In your scenario, you can package your TopBar component as an Azure Artifacts and publish the artifact. Please follow this document to use npm to store JavaScript packages in Azure DevOps Services or TFS.