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.
Related
Does anyone have any pointers on how to go about adding a /docs page for website documentation to a next.js app? I've looked up Docusaurus but it seems like it's already a react app itself. Is there a way to integrate it inside an existing next.js app or are there other solutions?
Many Thanks
One idea might be to intercept the request and send the html file that docusaurus builds out, and putting all other files in the public folder.
https://medium.com/wesionary-team/render-html-file-in-pages-of-next-js-59281c46c05
Also checkout this discussion about it.
https://github.com/vercel/next.js/discussions/12373
I have done this with React apps using express. But never with Next. At first it looks like it would be possible with multi-zone in Next but that doesn't seem to do the job. So my other recommendation would be to try to use a docs.domain.com instead and host it separately. Then you have a /docs url or a button that redirects to the doc domain instead.
Firebase has free hosting and allows you to setup multiple sites. So it should be fast to test this setup there
I'm going to actively try to get this to work with Next myself but I do not think it will work because of how they are developed. So I would do the above recommendation and if I find a workaround, I'll post an update.
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 created an app with
react-create-app client
inside my e-commerce website(it uses nodejs and express), in order to implement some other functionalities. The problem is that i don't understand how to make the react-app work with ejs template, instead of using index.html. First of all i want the root component to be in a .ejs file inside views folder(outside react app). I think i need to change something in webpack, but i'm really confused, i can't even find config and there are a lot of additional plugins and code that i've never seen before, it's really difficult to understand something. Also when i run my server on port 3000 and app on port 5000 (with proxy set on 3000) it says 'something already running on port 3000'. What should i do? I can't use react on the entire website (all buttons, menus) because it's too simple for react i think, and there is some simple rendering done with ejs that i don't know how to implement with react.
At first you shouldn't use create-react-app for just bunch of components on existing page, this is whole environment done for true SPA done purely in React. If you need to just plug React to the existing page you have no choice than to read docs and learn or find a way how to setup in your existing app (you didnt say anything about it so I am not answering how.)
Secondly you need to eject your react app with yarn eject which will expose you all configs. https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject
Then you need html-webpack-plugin which can accepts .ejs format as entry point https://github.com/jantimon/html-webpack-plugin.
I don't see any reason why not to use React for everything, because it is "too" simple. You can render plain HTML with PureComponents and it will cost almost 0 memory for browser to render it.
I'm using create-react-app in my latest project and it's great! Now I'm facing one issue that I'm not sure how to solve properly.
I've created app using redux for my state managment, and that all is working well.
Now I don't have much experiance with server side renderin in React, but for my next feature I'll need to take one of the existing / working react components (that are connected to redux store) and render it on server that comes with create-react-app. The reason why I wanna do this is to be able to use some libs like pdf generators and simillar to be able to print out some of them (also some other stuff but that's the basic).
First thing I'm confused with, since I don't want to render everyting on server, what's the best / correct way (for development) to run webpack-dev server and node server that will do all those taks I mentioned above in parallel instead of just changing it's default port to let's say 8000, and run it manually?
Secound, should I be able to just use ReactDOMServer.renderToString on that existing component on server or there is something else that will complicate stuff (I know I'll need to add babel on server definitaly)?
Create React App does not support server rendering. You might want to migrate to Next.js which does.
Unfortunately, Create React App (CRA) doesn't have extensibility points to allow this. But there is a slightly altered version of CRA that allows compiling, testing and running both client-side and server-side code using regular CRA pipeline - npm start will compile and launch both cient-side and server-side portions of your app, using a single instance of Webpack, on the same HTTP port.
You can find more info by visiting React App SDK.
The interactive console accessible at localhost:8080/_ah/admin is very useful for debugging your App Engine app.
I always find myself importing the same modules over and over again, particularly models.
I've looked into monkey patching the interactive console to automatically import these models, and I'm stumped. Ideally, I could do it from my app so I wouldn't need to reapply the patch every time I update the SDK.
I'll investigate and hopefully find an answer, please let me know if you have any ideas about how to accomplish this.
Good question! The relevant code for the interactive console is in InteractiveExecuteHandler at google/appengine/ext/admin/init.py:188. Specifically, it executes the code like this:
try:
compiled_code = compile(code, '<string>', 'exec')
exec(compiled_code, globals())
except Exception, e:
traceback.print_exc(file=results_io)
Note that for the globals, it simply uses the globals of the module it's in. So in order to provide your own imports, all you need to do is this:
Create your own module, where you import and subclass InteractivePageHandler and InteractiveExecuteHandler
Import any additional modules and classes you want in your new module - they'll automatically be imported for any code that's executed by them.
Override the generate() function from BaseRequestHandler in those classes so they look for the templates on google/appengine/ext/admin/templates instead of in the 'templates' subdir under your own module.
I ended up using the App Engine Console project which comes with an autoexec.py that provides the functionality I asked about.
I'm not sure if this is at all what you're going for, but you can just edit the html template for the interactive console page to have different default text entered. It's located at:
./google_appengine/google/appengine/ext/admin/templates/interactive.html
This would apply to all your apps, and as you mentioned you'd have to goof with it every time the SDK updated.