After creating a new React app with create-react-app, there is no .flowconfig file. If I flow at command line, I get:
Could not find a .flowconfig in . or any of its parent directories.
See "flow init --help" for more info
If I do a flow init, it'll create a .flowconfig file, but with no default configuration:
[ignore]
[include]
[libs]
[options]
This seems to be all that I need to do to get flow working. In contrast, a newly created React Native app has a .flowconfig file with a lot of "default" configuration.
Is there a recommended default configuration for a React JS environment?
I don’t know much about React Native, but indeed this should be all that’s necessary to get Flow working with an app generated by Create React App. Of course you’ll also need to add // #flow to the files in which you want Flow to be enabled.
See also “Adding Flow” in the User Guide.
Related
So I have an existing Create React Application and I want to be able to build a chrome extension to work in conjunction with it. Is there a away I can use webpack or something so that my extension kind "lives in" the React application? I want to do this because the existing application is quite large and I don't want to have to make changes (UI, api, or otherwise) twice. In my head I'm picturing it something like this:
- MyApplication/
- src/
- index.html
- App.tsx
- components/
- <bunch of other useful stuff>
- extension/
- index.html
- Extension.tsx (equivalent of App.tsx in react app)
Basically I'd be able to import whatever I need into the extension and run some command like build extension and it would bundle just the files and dependencies imported and necessary for the extension and output that to some directory I can upload to the Chrome Web Store.
I also briefly considered splitting the application into into something like MyApplication-core, MyApplication-web, and MyApplication-extension or something and just installing core in both web and extension but not sure if that's the best strategy or not. The first strategy I outlined seems simpler to maintain but I could be wrong.
Also, if there is another strategy I haven't thought of please let me know! Happy to add clarification if necessary as well! TIA!
Just build it and add manifest with required configurations. After this you will have posibility to load it as an extension.
I setup react project by create-react-app and I found that the subfolder of react won't able to autoload when I create a new file, eg
<!-- file: /public/subfolder/index.html -->
<p>subfolder content here</p>
anyone knows how? According to the official react doc, it looks like react doesn't allow this kind pattern? Anyone knows more content?
This is not actually a restriction from React itself. That was how Webpack has configured in create-react-app. Please look at the below code snippet of a typical Webpack config file in a React application. If we need more custom configuration, we have to manually configure Webpack and Babel as per our requirements.
Link for the documentation: The best webpack configurations for React applications
Initially posted this on reddit but got no response.
I last used service workers a couple years ago using CRA 3
The way I understood it was, just call the register function in the index.js file and voila, it's more-or-less working.
Pass in an config object to the call to add customizability. For me, all I needed it was for calling a callback that set redux state that was being listened to on a component that notified users if a new version was available via a snackbar. It was super easy and worked well.
Now I'm trying to implement similar functionality in CRA 4 and there's a whole layer of Google's workbox api on top of it; I'm sure it's super useful and necessary for some, but for my case -- just a call back after serviceworker registration -- it's a PITA.
First my service-worker.js file wasnt being built into the public directory so was resulting in 404s.
Only way out apparently was to create a new CRA app using cra-template-pwa then copy over the relevant files, which I've done.
Now the precaching workbox plugin is complaining about not being able to find my index html file as well as other static assets (have a multi-frontend app structure where those assets are in /app/frontendapp1(2,3,...n)/)
I've tried messing with the copied over service-worker.js file in src but my changes aren't being reflected in the public/service-worker.js file ...
Every reading I'm finding is getting really into the usages of each plugin, without an overall picture of react app via CRA -> serviceworker -> workbox. Anyone able to articulate ? Also have a couple of questions:
1- how does the public/service-worker.js file get built? Auto?
2 - is there a way to configure the public url for the precaching workbox?
I'm trying to separate my projects and keep logic as separate components that I will end up publishing. For now, before I do so, I'd like to keep it organized as such:
A library of TS scripts in a project called project-a
A separate React app that I created with create-react-app (using Typescript as the template) called project-b
The React app's .tsx components will pull from project-a's .ts files.
I've gone ahead in project-b and ran yarn add ../project-a. This installs the library as a dependency. I then import the .ts files and my code editor is able to see all the types and definitions really nicely. Great!
When I run the application, Webpack complains:
./node_modules/project-a/src/calc.ts 2:7
Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
> export enum Position {
| Inner = 0,
| Outer = 1
I don't understand why it's not parsing the file as a .ts. The whole React application is setup with TypeScript and I'm even import some .ts files locally. Do I need to tell Webpack to handle the files imported from this module as Typescript source (assuming Webpack wouldn't attempt parsing them if it didn't need to)?
The React template didn't setup a webpack (I'm assuming it's using a hidden default) but I am able to adjust the tsconfig.json file. I added my modules direct path into the include array. That didn't seem to do much either.
Basically: how can I get passed the above error and continue importing the TypeScript files from my dependency module in my main application?
You have to compile down project-a to javascript and emit the typings file, because imports from packages have to be Javascript.
The type infos you get from external packages is delivered via the .d.ts file alongside the package.
When you import other packages, you always import the Javascript file.
Even locally, Webpack doesn't compile the typescript for you, a loader during bundling does. So once running inside the browser, it's all Javascript.
But you are trying to import a Typescript file during runtime.
I'm looking to embed my react application into an existing plain html / javascript website. What I've found so far is that you are only able to embed individual components into existing websites, not entire react applications.
Naturally I have an app component which contains the entire application. Am I able to embed the full application by embedding this component? My concern is all the modules I'm using (e.g. axios, bootstrap) will break.
I've been looking for a good tutorial on how to do this but I'm not finding many examples of trying to embed the entire application into an existing page.
My understanding of how to do this, is to reference the react javascript source links in the html page head, possibly also babel although its unclear to me if babel will work. Then we can use the renderDom method like we normally would.
On page load can I run my index.js file to insert my react app component into the dom? If this would work, are there any issues with file structure, file updates I would need to take care of?
If I'm driving off path out into the wilderness and there is a better way to handle it I'm open to suggestions. I'm just looking to see if someone else has experience doing this before I start down a bad path.
I was able to embed my full react application by doing the following...
I built my react app production files with npm run build
I copied those files into the existing web project at the root level
Then I opened the index.html file generated from npm run build and copied the scripts in the head and body sections to the page I wanted to drop in my application
Finally I added a div with the id root (this is what my renderDOM method is looking for) where I wanted my application to appear on the existing web page.
That was it. Super easy, thanks for the help!
Just wanted to add a quick additional approach here.
If you already have a Flask app and you're trying to put React components or an app (so the base component of an app) onto an existing HTML page in the Flask app, basically the only thing that you need is Babel, unless you are able to write React components without using JSX (so in plain Javascript) in which case you'd need nothing.
Step 1: To attach Babel to your project, you'll have to grab the Babel node modules which means your project will be associated with NPM for the sole purpose of using the Babel functions. You can do this by running the following commands in your project root directory (Node.js must be installed):
npm init -y
npm install babel-cli#6 babel-preset-react-app#3
Step 2: Once Babel is attached to your project, you'll have to actually transpile the existing React component .js files from JSX into plain Javascript like so:
npx babel --watch (jsdirectory) --out-dir (outputdirectory) --presets react-app/prod
where (jsdirectory) is the path to the directory where your React component files written using JSX are, and (outputdirectory) is where you want your translated files to show up--use . for (outputdirectory) to have transpiled files appear in your root directory.
Step 3: After the plain Javascript versions of your React files appear, make sure they are linked to your HTML page instead of the original JSX-utilizing files (replace the original script tag's .js file)
Step 4: Make sure the HTML page in question is linked to the .CSS files you want (they will modify the transpiled Javascript in the same manner as they did the JSX files in a project made using Create-React-App because the class names are the same) as well as the required React resources:
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
After you do those quick steps your React components should render no problem on that page in your Python-Flask application.