"development mode" with jsmp bundle-sfx - reactjs

Is there any way to get jspm bundle-sfx to build without setting NODE_ENV to production? I'd like to set it to development for better error messages (specifically with React, which is defaulting to some 'minimized' production mode).
Have tried this with no results:
NODE_ENV=dev `npm bin`/jspm bundle-sfx [...]

jspm 0.17 will do this by default with the jspm build command (which replaces jspm build-sfx in 0.16) automatically treating it as a production build. jspm build --dev is then the way to do development-specific builds. I'd suggest trying the upgrade path if you can - the Beta release is quite stable at this point. See http://jspm.io/0.17-beta-guide/index.html for more info.

Related

How to specify runtime directory for Vite when running the dev server

I'm trying to use Vite for a React project. I need to configure Vite so that when I run the dev server it places the runtime files in a particular directory (because the files are used with another runtime environment). The server config doesn't seems to have an option but I'm not sure if I'm missing something or it is in a different place. Thanks
It doesn't seem to be possible right now according to this repo discussion https://github.com/vitejs/vite/discussions/6108
Meanwhile, you could run the dev command along with the build --watch command to have both, but it would get slower
npm run dev & npm run build -- --watch

Where does React put the continuous build files when using create-react-app

I'm using create-react-app. When I run npm start (react-scripts start) it continuously builds the changes for me and does it magic. But what is the output folder for that? I know when I build it manually where the files go.
I want to use firebase emulator to serve the current version (the continuous build) of my react all but I don't understand where's the output folder or how to achieve it.
You could try this package https://github.com/Nargonath/cra-build-watch
Install it and add the script to your package.json
{
"scripts": {
"watch": "cra-build-watch"
}
}
and run it
npm run watch
more info here
https://ibraheem.ca/writings/cra-write-to-disk-in-dev/
and if you go to the react repo issue linked in the article you would find more workarounds
tl;dr
run npm run build, not npm run start
More Detail
react-scripts start runs webpack-dev-server internally. As a default setting, webpack-dev-server serves bundled files from memory and does not write files in directory.
If you want to write files with webpack-dev-sever, you could set writeToDisk option to true in your dev server configuration.
However, I dont think this is what you want to serve on firebase emulator. Webpack-dev-server does not build optimal app for production, and you also need to use react-app-rewired to customize dev server configuration in cra template.
What you want to do is npm run build to run react-scripts build, which builds optimized production app in /build directory.

Expo EAS not resolving sentry-expo. Are dependencies cached?

I've joined the EAS preview, and I'm having problem when building my app. The build works perfectly with the classic build system. Here is a screenshot of the problem:
I think that EAS is caching the dependencies, but I'm not sure if this is the problem or how to clear their cache.
The first time I built the app, the process was slighty different:
As you can see, there is a "Install dependencies" step that isn't in the newer builds. That error of the install dependencies is already fixed.
I've sentry-expo in my package.json and in my app.config.js I have plugins: ["sentry-expo"],
I've also tried adding "cache": {"disabled": true} to the android build config with no success.
Does anyone know how to fix this problem?
Thanks!
This is likely a dependency management issue. In my case I was attempting to use yarn "pnp" which which doesn't support react-native at this time to my knowledge. I reverted that and was able to get past this.
My .gitignore
# yarn berry
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
My .yarnrc.yml
yarnPath: '.yarn/releases/yarn-berry.cjs'
nodeLinker: 'node-modules'
Try to install dependencies
npm i sentry-expo -s
yarn add sentry-expo
And rebuild eas build --platform ios --profile preview
This is working for me

How to do a react build, when react-scripts is marked as dev-dependency

There is some license issue with one of the dependencies getting installed with react-scripts.
Project is created using CRA, so react-scripts is marked as dependency in package.json.
If I mark react-scripts as dev-dependency, since i don't need it for production, and install all the packages using 'npm install --production', I will not be able to use build script as react-scripts is not installed.
Browsing around this I see react-scripts should ideally be a Dev-dependency.
So just wanted to check if anyone can help here, how to use build script keeping react-scripts as Dev-dependency? is using webpack as a to bundle would be the only option here?
NPM and package.json initially were created for Node.js, which is intended to either run some scripts, or to run continuously. In this cases you might need some dependencies only when you are developing (for example some debuggers, or nodemon and so on), but don't need them in production.
In case of CRA, you don't need any dependencies on production, since you are building bunch of static files. Generally, you have some build pipeline, that will install all dependencies, build your static files and then transfer only built files to produciton (where only production dependencies may be installed again, or it can be another build step in pipeline). If you don't have such pipeline, you can install all dependencies, build on server and then delete node_modules.

Is node-sass a dev or a production dependency on React projects?

In variaous React documentation I see it being added as a prod dependency but I'm not understanding why. Shouldn't it be a devDependecy since SASS only gets compiled during development and when pushed to prod you are actually pushing the compiled CSS files?
Since it's required to do a production build, it should be in the production dependencies list imho.
In my experience, most of the time the project gets build afresh for production, so needs all the packages required to build from scratch.
A dev dependency might something like webpack-dev-server which isn't needed for a prod build, but clearly is used in development (assuming one is using it).
On the official NPM site of sass (linked also here: " Sould SASS be installed as a 'dependency' or as a 'devDependency? ") it is suggested to install it as development dependency (aside from installing it globally) so I believe that's the way to go.
Also, as it's suggested on official Node website, Babel should be installed as a development dependency and that's the package that, I believe, may be required to create a production build. Considering that I think that all packages that are not required during runtime of an application should be installed as development dependencies.

Resources