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.
Related
I have a Nuxt 2 app. I'm following the docs to add Capacitor and Android Support.
Everything is fine up to the point of running npx cap add android. The android folder is generated however there are errors in the terminal
√ Adding native android project in android in 342.51ms
√ Syncing Gradle in 944.40μp
√ add in 345.44ms
× copy android - failed!
[error] The web assets directory (.\.nuxt) must contain an index.html file.
It will be the entry point for the web portion of the Capacitor app.
√ Updating Android plugins in 33.68ms
× update android - failed!
[error] Error: ENOENT: no such file or directory, open
'<sourceroot>\android\app\src\main\assets\capacitor.plugins.json'
I’m not running Nuxt in static mode (due to routes and content pulled in dynamically from a CMS). So I run nuxt build which generates the output into a folder named .nuxt by default.
However nuxt build doesn’t create an index.html as an entry point, the nuxt build actually states Entrypoint app = server.js server.js.map. Hence the error above where it can’t find index.html in the .nuxt directory.
Does anyone know a way to resolve this? Or have implemented Capacitor with a Nuxt SPA?
I’ve found resources when using nuxt generate for a static app but not nuxt build for a spa like in my case.
I have a Nuxt2 web app with servers (app server and separate API server), also deployed as an Android app on the Play Store (in alpha testing). Both app flavours look and behave identical and use the same API server, as I desire.
IMHO, in the lifetime of your (universal) app, BOTH build and generate will get leveraged:
build, likely by whatever web app host you use (ie AWS, Heroku, etc), during deployment of the web app.
generate by yourself, when you're ready to submit to the app stores (Apple, Google, etc), making use of Capacitor.
Let's say you have a new feature to add to the app. On that day, you make git commits and increment your version number and when you're ready to deploy the update...
For the web app...
Make commit(s) and version number change
Deploy to your app host, which for most people, will also run the build step for you
The only time I ever run build locally is when I need to make final tests, troubleshoot bugs or make optimizations (e.g. lower final package size).
For the Android or iOS apps...
Make commit(s) and version number change
nuxt generate
Run Capacitor sync (however which way you do it (for me I use: npx cap sync)
Prepare the app store build & submit (however which way you do it)
What nuxt generate does for you, and what Capacitor needs, is a fully rendered snapshot of all your app views together, all at once. It's the equivalent of a web app user opening all your app's views all at once (e.g. 50 browser tabs), pulling all components/styles/etc into their local browser. This fully rendered app state ultimately gets bundled and is what will get submitted to the app store(s).
In Nuxt docs and terminal output, they seem to strongly suggest that if you're using nuxt generate, that you want to be using target: static, however I will say you should completely ignore this advice. Static is what you'd consider if you had a "brochureware" website or some recipe book app that you update once-in-awhile. It goes as far as in the terminal output of nuxt generate, even if I have target: server defined, you'll still see a line saying something along the lines of "Outputting for target static...". Just ignore it.
There is hardly anything static about a typical universal web app.
I personally use target: server with nuxt generate and I haven't seen any problems in the app (web or Android version).
I'm trying to integrate the react library called react-canvas-draw with expo.
the error in question is:
Component Exception - View config getter callback for component 'canvas' must be a function (received 'undefined'). Make sure to start component names with a capital letter.
I think its a babel config fix. converting es2015 to es7 or something then to react native code. I have no idea.
So I stopped using react-expo because it's a pain in the ass to configure all the settings with (Babel, es6, jest, eslint, etc & metro configs). I Generally know what all those packages do in layman's terms but I do not know anything with setting them up together and what goes where.
Instead I'm using npx create-react-native-app It comes pre-configured for what I'm doing and it has some neat feature like hot-reloading so it's just as fast in development. It's not as helpful as expo with ease of use with ios and android setup and exports but I can manage the configurations on my own.
I am learning React Native.
I can't find a proper documentation for metro bundler. So, I have few questions on it.
As the name suggest it creates a bundle.
But where is the bundle file located ?
Is this same as webpack ?
What is the use of that bundle file ?
A React Native app is a compiled app that is running some Javascript. Whenever you build and run your React Native project, a packager starts up called Metro. You’ve probably seen this output in your terminal before, letting your know the packager is running.
The packager does a few things:
Combines all your Javascript code into a single file, and translates any Javascript code that your device won’t understand (like JSX or some of the newer JS syntax).
Converts assets (e.g. PNG files) into objects that can be displayed by an Image component.
reference:
https://hackernoon.com/understanding-expo-for-react-native-7bf23054bbcd
Metro is a JavaScript bundler which takes in options, an entry file, and gives you a JavaScript file including all JavaScript files back. Every time you run a react native project, a compilation of many javascript files are done into a single file. This compilation is done by a bundler which is called Metro.
Answers to your questions:
1> Bundled file is located on the device itself on which you are building your app and is stored in different formats like in case of Android Plain bundling in which .bundle is created. Another format is of Indexed RAM bundle in which file is stored as binary file.
2> Webpack is also a similar type of module bundler which does bundling to ReactJS web platform and its modules are accessible through browser. Bundling process is while similar to metro.
3> These bundled files are indexed and stored in a particular numerical format and thus its easy at the run time to arrange JS files in order.
There are multiple functions of Metro bundler and you can read about the role of Metro in React Native here : https://medium.com/#rishabh0297/role-of-metro-bundler-in-react-native-24d178c7117e
Hope it helps.
Metro team keeps improving its documentation, now you can find some really good explanations at https://facebook.github.io/metro/docs/concepts (link updated):
Metro is a JavaScript bundler. It takes in an entry file and various
options, and gives you back a single JavaScript file that includes all
your code and its dependencies.
So yes, it is a sort of Webpack, but for React Native apps :)
But where is the bundle file located?
Once the bundler is started, you can check its contents at http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false
(like webpack, it is served from memory, so it is not being written on your project's folder).
What is the use of that bundle file ?
This file is installed in the device for its code to be executed there. Remember that when you are writing code for a React Native application, your code is not "translated" to Java / Swift / whatever. The Native Modules will send events to a Javascript thread, and the JS thread will execute your bundled React Native code.
It is maybe a trivial question but I am quite lost in topic I don't know.
I am writing my first app n Aurelia using ES2016. I wanted to export my app to server for some testing.
As I learn in Plularsight course https://app.pluralsight.com/library/courses/aurelia-fundamentals/ that the easiest way to bundle and export is to use Aurelia Skeleton Navigation - by changing all theirs src files to ours and adding all the missing dependencies in package.json, and also adding them to bundle.js and export.js.
When I use
git bundle
git serve
Bundling works fine, and app is running fine.
But when i run
gulp export
The files in export dir not working properly. I have an "Uncaught SyntaxError: Unexpected token <" error in almost js file I wrote or added to my App (not in aurelia files :/ I deployed it temporally here so you can check https://amazingcms-0-3.firebaseapp.com/drag/posts
It looks like I messed it up at all :/ I don't know what files I should show you to help, so please tell me, or give mi a good source where I can learn how to export my app. It is possible to do it without the Aurelia Skeleton Navigation? I think I even don't necessarily need bundling only transpiling (I'm using Babel runtime). I want to check if my app works on server it can work slow at this step.
App store prohibits downloading remote code with the sole exception of WebKit + JS:
3.3.2 An Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts,
code and interpreters are packaged in the Application and not
downloaded. The only exception to the foregoing is scripts and code
downloaded and run by Apple's built-in WebKit framework, provided that
such scripts and code do not change the primary purpose of the
Application by providing features or functionality that are
inconsistent with the intended and advertised purpose of the
Application as submitted to the App Store.
Does this adhere to React Native? Can I host my React Native script bundle on a CDN server and fix bugs by replacing my JS implementation?
See: https://facebook.github.io/react-native/docs/embedded-app.html#add-rctrootview-to-container-view
Yes, you are allowed to hot load JS into your iOS app. This is one of the big advantages of React Native.