I have a react application (created using create-react-app, and built using yarn).
When I build the application (yarn build) I want the static directory and all references to resources in it to be something other than static.
This issue references what I want to do: https://github.com/facebook/create-react-app/issues/1061
So, the question is: How can I change the yarn build process to put static resources in a directory called something other than static?
You need to eject from CRA and config webpack manually, maybe using this plugin https://github.com/webpack-contrib/copy-webpack-plugin
Related
Primarily, I'm trying to integrate a react application (Created and build separately) with Drupal.
Problem
Unable to install private package from Bitbucket using npm install git#bitbucket.org:user/shared-package.git in Drupal app, because no package.json found.
Implementation Details
Development Environment
To achieve this in development environment I run npm run build which produces the following content in dist directory.
Not going in the details of what are the roles of other files but to make the things work, I just need to copy bundle.js file and paste it inside a directory under app/web/themes/custom/abc_themes/js/.
This is okay for development environment to copy a folder from one project and paste it into another. However, for production environment it' not viable.
Production Environment
In production we thought to create a private package on Bitbucket, where through Bitbucket pipelines on every commit we trigger a build and push that build 's result into a separate repo (i.e. private package).
Here is the content that is pushed to the so-called private package. Since it's the entire react application (not a library) therefore when it builds it creates compiled js and doesn't contain packgae.json.
Now if I try to install this package throught npm install
code ENOLOCAL
npm ERR! Could not install from "bitbucket.org:user/shared-package.git" as it does not contain a package.json file.
That is obvious but to solve this I can't convert my project into a library. Because even if I convert it to a library, Drupal needs a build js file at the specified directory to work.
Expectation
Want to know if there is a way I could install that private package (that doesn't have package.json) into Drupal application.
OR any other way around to achieve the same.
NOTE: I know one solution could be to host the build file at some CDN and pull it from there. But problem is, the Drupal app might be running behind a corporate network and users won't be able to access the internet openly. Therefore, we want to make the react app a part of build process, so once Drupal is served, react application would be a part of it already. No loading at runtime.
I have a React App (Typescript templated created using create-react-app) which emits all the changes to localhost:3000 when I execute yarn start. All local changes are immediately served with hot loading.
I have another local dev server running which consumes this app's react files in /build (output from yarn build).
I would like to see all my compiled changes emitted by yarn start be consumed by another server running locally. in other words, I want the yarn to start to emit the change to my file system so they can be served.
I tried ejecting the project and changing configuration files to emit to the build directory with yarn start but that does not work.
I have also tried switching my project to https://neutrinojs.org but that may not be an option for me at moment.
Could someone suggest what approach should I be taking to achieve this.
I found the solution.
I used https://www.npmjs.com/package/cra-build-watch which serves the purpose
kindly we need to build my created app with static bundle how I can do it with the react-react-app template.
Best Regards
According to this it will be sufficient to run
npm run build
if you've created your react app using create-react-app.
I have not checked it.
A second way would be to use webpack as a third party tool.
I'm building a web app with the frontend done in react, and I was wondering if it's possible to compile my react code into static HTML and JS files to be used with any server. So far I've been using the server run with
npm start
but for my final project I need to use a different one.
npm run build
This command creates a built version of your application in the build folder
Static builds are a standard in react deploying pipelines. You have to setup a build pipeline with webpack configuring it for minification assets management and so on.
I'm trying to create a custom UI plugin in TypeScript
Here's the steps I'm taking
create a plugin project in a local folder
write .ts files for custom UI in the plugin project root
generate .js files out of those .ts files with tsc command in the plugin project root
go to the test NativeScript project and run tns plugin add <local plugin path> to include the created plugin
But I get compiling errors at step 3 because I have importing statements as follows
import { ContentView } from "ui/content-view";
import...
I referenced an example here https://github.com/NathanWalker/nativescript-cardview/blob/master/cardview.ios.ts
My question is how cardview.ios.ts in the example 'nativescript-cardview' is being compiled to cardview.io.js? It seems impossible to do this...
In the plugin, you have referenced the author has created a demo app and is using the declaration file for tns-core-modules from that demo. Look at this line where tns-core-modules.d.ts is included in tsconfig.json
You can follow this practice for testing cases and for your release you can create a relative path to the tns-core-modules (and references) declaration files from the app node_modules folder like done here
As a side note noEmiOnError flag in your package.json will allow the translation to continue without hanging on errors.
Thanks for linking to your repo. NativeScript's docs state that "if you are using a transpiler, make sure to include the transpiled JavaScript files in your plugin".
Your package.json specifies cardview.js as the entrypoint, but your transpiled JavaScript files haven't been added to the repo. I solved this problem in my nativescript-midi plugin by committing the transpiled files in a \dist directory. The plugin is written in ES 6 but transpiled to ES 5 for consumption. To make sure that the src and dist directories remain in sync, I use a git pre-commit hook that automatically runs the build command and commits the results. If you clone the nativescript-midi repo, you can view it in .git/hooks/pre-commit . A benefit of using this approach for your plugin is that it will also allow it to be used by developers who are not using TypeScript.