How do you use ffmpeg npm package with svelte? - npm

I want to use ffmpeg with svelte but I don't know how, I tried adding it to package.json but it didn't work (Running linux)

Are you using the ffmpeg npm package? This package is only supported when running from Node, it does not work inside a browser. If you need to use this package, you'll need a Node server that uses ffmpeg that the Svelte app communicates with.
The package #ffmpeg/ffmpeg can be used inside a browser that supports WebAssembly. It doesn't really interact with a front-end framework like Svelte, so you can call it from any Svelte event handler function that you'd like. You should look at their sample code to get started.

Related

Expo developer tools option is missing

When I start my project using command expo start , Expo is starting the Metro bundler but not opening the developer tool. Also developer tool option is not available in commands menu.
I suppose there should be command option : 'd' which will launch the developer tool on the localhost:19002 but it's not coming for me.
Using expo cli version 5.4.4
Developer tools removal
Since the release of expo-cli#6.0.0 the expo team has decided to discontinue the Web UI they had put in place. You can find more details about this in this blog post.
All of the actions that could be done within the Web UI can be done within the command line interface. For example, one used to be able to change connection mode directly within the UI :
Now to start expo in --tunnel mode you would have to have ngrok installed on the new expo version npm i -g #expo/ngrok and to run npx expo start --tunnel. Details on the CLI can be found in the docs here.
Accessing the Developer tools anyway
If you still wish to use the developer tools web UI, there are two options :
Use an older version of the expo sdk (~44.0), to do so you could use expo-cli#5.0.2 which is linked to that sdk. However, it is not recommended to stay on older versions which will be discarded at some point.
Use your own Web UI. Here is the source code from expo's original Web UI which you can use a base. There are likely over repos out there which fit this purpose.
If you're using a library such as react-navigation or anything (or itself) the relies on reanimated you won't be able to use remote debugging. https://docs.expo.dev/versions/latest/sdk/reanimated/
After changing the expo sdk version from 45.0.4 to 44.0.6, I am able to see the Developer tools running on http://localhost:19002.

Vue Native: Error when running in browser

I've just created a new "vue native" project. I didn't change anything in the default blank app.
I managed to run it on my android device, but impossible to run it on my browser.
I run "npm start" => "metro bundler" opens.
Then I click on "Run in web browser" and I get the error below :
Again, I didn't change anything. I just want to start the default app generated automatically when starting a new project.
Anyone already faced this problem?
Thank you
"This is a known issue, and it seems running vue-native app in web is not possible at the moment, because AppEntry.js tries to import ../../App. The default packager configuration specifies .json as a valid file extension. For some reason, in web, Expo seems to be looking for App.json and ignores App.vue."
https://github.com/GeekyAnts/vue-native-core/issues/268
See the official statement from vue-native creators 2020 7th of July:
"On iOS and Android, Metro is the only component required in the JS build pipeline. We have a custom transformer (in vue-native-scripts) which Metro uses to convert .vue files into equivalent React Native code, which then effectively gets piped into the default Babel transformer used by Metro (for .js) files.
On web, though, Webpack needs to be used for intermediate transformations so that the code can run on web. Metro is used here too, but not for the transformation.
From my findings, the Expo Webpack config uses the babel-loader for handling .js files. So we'd probably need a custom Webpack loader for .vue files (or maybe some other mechanism which can do the job). My guess is that the transformer exported by vue-native-scripts would help in making a loader. But the loader needs to meet the Webpack loader API requirements and expose raw, pitch etc. as described here. We haven't worked out the details of the implementation yet.On iOS and Android, Metro is the only component required in the JS build pipeline. We have a custom transformer (in vue-native-scripts) which Metro uses to convert .vue files into equivalent React Native code, which then effectively gets piped into the default Babel transformer used by Metro (for .js) files.
On web, though, Webpack needs to be used for intermediate transformations so that the code can run on web. Metro is used here too, but not for the transformation.
From my findings, the Expo Webpack config uses the babel-loader for handling .js files. So we'd probably need a custom Webpack loader for .vue files (or maybe some other mechanism which can do the job). My guess is that the transformer exported by vue-native-scripts would help in making a loader. But the loader needs to meet the Webpack loader API requirements and expose raw, pitch etc. as described here. We haven't worked out the details of the implementation yet."
https://github.com/GeekyAnts/vue-native-core/issues/268#issuecomment-640222479
Good news that devices and on simulator running works with expo, and mostly vue-native was designed to run on mobile devices not on web :)
For the web you can have a similar codebase using vuejs.

is a vanilla axios npm install considered a legit way to call api's in rn?

I've used axios in vanilla React apps which has worked well for me and axios seems to be a popular choice for this purpose. I did an npm install of axios into my RN app this evening. I wired it up to call an API and it returned data from the API as expected in my local Android emulator.
Is it really that easy to use axios in RN? I didn't configure any gradle dependencies or do any other type of special setup step or configuration beyond the basic npm install. I'm assuming that this setup will run as-is on iOS as well. If it's really that simple then that makes me pretty happy compared to all the hoops I've had to jump through to get the various firebase modules configured and working properly
Yes most 3rd party modules for React Native are very easy to use and only require you to run npm install - packetname - without touching any native code or extra files like gradle for example.

Using npm modules in React Native projects

Is it possible to use npm modules with React Native projects directly, like one uses them within a React project by npm install <module-name>?
Of course I mean modules that can be used with a React app, that is front-end ones that will be run in the browsers JS runtime but not in the nodejs or iojs runtime as a React Native app does not run in the nodejs or iojs runtime.
Well, it's quite opposite. React Native actually runs within io.js runtime so most pure javascript modules for node will work. On the other hand most front-end modules written for React.js will not work for React-Native.
React Native does not use HTML DOM nor CSS as we know it from the web. It replaces the CSS/HTML DOM with the native view representation. So any front-end packages that are supposed to use HTML and be displayed in browser will not work.
On the other hand, any modules that are pure javascript and run within node.js/io.js are perfectly OK to be run in react-native.
For example, I am quite sure that Facebook uses their 'relay' data access library in their react-native apps (it's a javascript library that efficiently communicates over Facebook's Open Graph API and allows to access Facebook user's data).
The way to do it is the same as in other node.js/io.js apps. Simply run
npm install module --save
and you are done (package.json will be automatically update with the dependency for the module). Then you can use the package as usual.

How to make an isomorphic JavaScript app with Mithril JS

I'd like to be able to render javascript templates using the Mithril JS framework on the server for SEO and first load purposes and have them run in the browser.
See this blog post:
https://gist.github.com/StephanHoyer/bddccd9e159828867d2a
And this example repo:
https://github.com/StephanHoyer/mithril-isomorphic-example
to run the demo, simply
Clone the repo
cd into it
run npm install
run node server
Give my new framework (https://github.com/ezramorse/mens) a whirl for an out of box solution
npm install mens
node node_modules/mens/example/server.js
Or just require('mens') from the root and start from scratch!