I created a flutter web project and work fine in localhost. So I planned to host the website in firebase. I followed the commands it deployed successfully but it shows only black screen in the console it shows error message.
Error :
Loading failed for the with source “https://myportfolioflutterweb.firebaseapp.com/web/main.dart.js”.
SyntaxError: expected expression, got '<'[Learn More]
My Project Structure :
firebase.json :
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"redirects": [
{
"source": "/",
"destination": "/web/index.html",
"type": 302
}
]
}
}
Commands:
Note: When I give public dir as the public folder it creates index.html. I deleted the file manually and navigate to the path as web/index.html
Finally, I solved the issue. I navigate the wrong path in public folder on firebase hosting. To deploy flutter web first I need to build the project using below command
Build
webdev build
After I build the project It creates a build folder inside the project
Before I public path as root but the correct path is build
Correct Path:
What do you want to use as your public directory? build
I attached full command of firebase hosting deployment below,
Related
I'm trying to package an NWJS app following various tutorials on YouTube and the web. But I'm getting "No files matching" error and it exits. Assuming it was because the dist/ and src/ directories hadn't been created, I created them myself, but I still get the error. All other paths listed in package.json exist.
After searching the web for a similar issue, the only thing I found was this:
https://github.com/nwutils/nw-builder/issues/190
However, this is regarding doing the build using command line args, rather than from package.json.
npm and nodejs were updated to latest version and nwjs was updated to 0.64.0-sdk.
I am attempting the build on MacOS 10.13.6, nodejs version 16.15.0, npm version 8.5.5 .
Any ideas anyone?
Thanks!
Kevin
CLI:
15:40:55 : ~/ReolinkNWJS
npm run prod
> ReolinkNWJS#0.0.1 prod
> nwbuild --platforms osx64 --buildDir dist/ src/
No files matching
15:41:00 : ~/ReolinkNWJS
ls
dist icons javascript package-lock.json package.json.TEMPLATE src
html images node_modules package.json resources styles
package.json:
{
"name": "ReolinkNWJS",
"description": "Reolink Client App In NWJS Framework",
"version": "0.0.1",
"icon": "icons/app.icns",
"main": "html/main.html",
"chromium-args": "--enable-logging=stderr --enable-spell-checking",
"window": {
"toolbar": false,
"width": 800,
"height": 500,
"position": "center"
},
"nodejs": true,
"node-remote": "*://*",
"scripts": {
"prod": "nwbuild --platforms osx64 --buildDir dist/ src/"
},
"devDependencies": {
"nw": "^0.64.0-sdk",
"nw-builder": "^3.7.0"
}
}
I think you either need to remove your src/ or move it to the front
"prod": "nwbuild --platforms osx64 --buildDir dist/"
"prod": "nwbuild src/ --platforms osx64 --buildDir dist/"
Also, either remove or change your node-remote. It is currently set up so that any webpage on the internet has complete control to run Node, meaning they can easily read the contents of all files on the computer, download virus.exe, delete all files, whatever, literally anything. Don't do that.
node-remote is almost exclusively used to point to http://localhost:8080, or some other port, for a local webserver your app runs on. Your main is pointing to a local file, not a webserver, so you likely do not need node-remote at all.
You probably want to move the "icon" at the root into the "window" sub object.
https://nwjs.readthedocs.io/en/latest/References/Manifest%20Format/#window-subfields
Each Ionic project has a project configuration file ionic.config.json where you can configure the human-readable name of the app:
{
// The human-readable name of the app.
"name": "My App",
// The project type of the app. The CLI uses this value to determine which
// commands and command options are available, what to output for help
// documentation, and what to use for web asset builds and the dev server.
"type": "angular",
// The App ID for Ionic Appflow.
"id": "abc123",
// Configuration object for integrations such as Cordova and Capacitor.
"integrations": {
"cordova": {
...
}
},
// Hook configuration--see the Hooks section below for details.
"hooks": {
...
}
}
Using capacitor gives us another opportunity to place an app name:
{
// The package name for Android and the bundle identifier for iOS.
"appId": "com.company.appname",
// Your app's name.
"appName": "Capacitor Kitchen Sink",
// Sets the directory of your built web assets. This is the directory that will be
// used to run your app in a native environment.
"webDir": "www",
// The JavaScript package manager to use, either npm or yarn.
"npmClient": "npm",
...
}
Where is the right place for the app name?
Thanks in advance
Capacitor works with any framework, not just with Ionic, so the app name should be in the capacitor.config.json.
But as you said, Capacitor embraces the idea of "Code once, configure everywhere", so that appName is used only when you add the ios or android platforms, once you have added them you have to change the name from Xcode for iOS apps or from Android Studio for Android apps.
Use Cordova's config.xml. There you have the tag <name>MyAppName</name> for this purpose. This is the name that will finally appear under the icon.
<widget id="com.mycompany.myapppackage" version="0.0.1" versionCode="1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>My App's name</name>
<description>A nice description of my app.</description>
<author email="mymail#myserver.com" href="https://www.myserver.com">Author's name</author>
...
</widget>
More info: https://cordova.apache.org/docs/en/latest/config_ref/
When I perform a flutter run I get an error
Target file "lib/main.dart" not found.
Why is this happening and how can I fix this ?
You can run any file from any DIR provided that you set the target file path, example:
flutter run -t lib/main_dev.dart
OR
flutter run lib/dev/main_dev.dart
UPDATE (2020 February 5th)
It is however not advisable to remove main.dart from your project.
I'm sure most of you found this link because you are setting up / configuring your app to accommodate for different environments e.g. dev, stg, beta and prod.
Example:
main_dev.dart:
void main() async {
dynamic configuredApp = AppConfig(
appName: 'Flutter',
flavorName: 'development',
appVersion: 1.0,
apiBaseUrl: 'https://dev-api.example.com/'
);
runApp(App(configuredApp));
}
main.dart
class App extends StatefulWidget {
final dynamic configuredApp;
App(this.configuredApp);
#override
_AppState createState() => _AppState();
}
As it turns out some build steps will fail in Android Studio mostly Gradle related if you don't have a main.dart file and method main() {} referenced inside this file.
Common build errors (AndroidX migrate, APK build etc.)
More info / solutions below related to flutter build error: finished with non-zero exit value 1
issuecomment
issuecomment
issuecomment
An alternative to flutter run -t lib/main_dev.dart
in VS Code with the debugger tool.
Click "Add Configuration" and add the following or add manually:
.vscode/launch.json
"configurations": [
{
"name": "Flutter",
"request": "launch",
"type": "dart",
// "args": ["--enable-software-rendering"]
// "flutterMode": "profile", //debug //release
"program": "${workspaceFolder}/lib/main_dev.dart"
}
]
Flutter is looking for main.dart in lib folder while you must have had file inside any other package.
Best solution is to place your main.dart file just inside lib folder. Flutter run command will work then for sure.
It worked for me.
main.dart url should be:
<app dir>/lib/main.dart
So basically when you execute this
flutter run
Flutter tries to find main.dart in /lib directory.
So if you have a file that is present in some other child directory of /lib directory or has a different name like result_page.dart, you'd encounter this error.
Now, a lot of answers had suggested to either rename your file to main.dart or move it directly under /lib directory.
But you can actually simply run any file by simply providing the target file's path from the current directory like this -
flutter run --target=lib/customization/result_screen.dart
So this would simply execute my result_screen.dart file present under some other child directory called customization.
You can also generate the APK file following the same logic and the command would look like this -
flutter build apk --target=lib/customization/result_screen.dart --target-platform=android-arm64
where --target-platform=android-arm64 is optional and is meant for 64-bit Android devices which helps in reducing APK size which otherwise would generate a fat APK including both 32-bit and 64-bit binaries. More info here
If you are using vscode...
When the error occurs, the vscode folder occurs in the side bar. It has the launch.json file inside.
You can change the "program": "..." property in the launch.json file to run the .dart file in the directory where you want.
This happened when I used Visual Studio Code. What I did to fix the problem was by editing the .vscode/launch.json file and change the value of "program" to the absolute path of my main.dart file (e.g. C://...).
If you are using VSCODE
Check folder .vscode>launch.json and add configuration:
if you have it already change a "program": "path of main.dart example: lib/main.dart"
{
"name": "Dart",
"type": "dart",
"request": "launch",
"program": "lib/main.dart"
},
Make Sure that your main.dart inside lib folder directly not in another package or directory
If you are using visual code and you encounter this problem while debugging,
just go to launch.json, go to the location of where your flutter app is located, to the lib folder and then to the main.dart ,copy the path then add it to the text program in the launch.json as indicated on the photo below
launch.json "program" path
in android studio this wokrs for me
left click in main.dart
right click in profile main.dart
this executes an snapshot aplicaction to configure the root profile a run your app
If you are having multiple iOS schemes then you could try like this:
flutter run --flavor UserDev -t lib/user/dev/main_dev.dart
For,
"configurations": [{
"name": "User-Dev",
"request": "launch",
"type": "dart",
"program": "lib/user/dev/main_dev.dart",
"args": [
"--flavor",
"UserDev"
]
}]
I had a similar error message, and it happened because I accidentally deleted the void main()
VSCode Users: Plese navigate to launch.json and replace the "Program" line with the following :
"Program":"${rootProject.buildDir}/${project.name}/lib/main.dart"
If you are using the Debug Mode in vs code, ensure that the vs code working folder is your Flutter project main folder.
If you want to change the vs code working folder, you can use the File > Open Folder menu or Ctrl+O shortcut.
When I change the folder, It worked for me.
Try final FlutterDevice flutterDevice = await FlutterDevice.create
The root cause is that the ResidentRunner we use to attach and do hot reloads will try to find a main.dart file when a target isn't announced. Attach doesn't provide a target, so it uses the default behavior always. As per DaceShuckerow.
This issue is still there on the official Repo.
What my case was
I forgot to write code for calling main....
void main()
{
runApp......
}
And doing this worked
In case someone is struggling with this what worked for me is to recreate ios folder. And -t works regardless of the location of the target or name of the target and without any need to have main.dart in your lib folder.
To recreate ios folder
rename ios folder to something like ios_old
run => flutter create fakeApp
open fakeApp, copy the ios folder to your project
migrate changes from ios_old (if you had any changes)
delete ios_old
I think you already change the path of main.dart.If so You can drag and drop the main.dart file to lib folder.(lib/main.dart)
If you are using VSCode then try this method :
Delete .vscode folder in your project directory and rerun the program.
I have created a MVC 6 project in Visual Studio 2015.
I am trying to create a Code First Entity framework class library
{
"version": "1.0.0-*",
"description": "DB Class Library",
"authors": [ "Michael" ],
"tags": [ "" ],
"projectUrl": "",
"licenseUrl": "",
"dependencies": {
"System.Collections": "4.0.10-beta-23019",
"System.Linq": "4.0.0-beta-23019",
"System.Threading": "4.0.10-beta-23019",
"System.Runtime": "4.0.10-beta-23019",
"Microsoft.CSharp": "4.0.0-beta-23019",
"System.ComponentModel.Annotations": "4.0.10",
"System.Data.Entity.Repository": "2.0.0.1",
"EntityFramework.SqlServer": "7.0.0-beta5",
"EntityFramework.Commands": "7.0.0-beta5",
"Microsoft.Data.Edm": "5.6.5-beta"
},
"frameworks": {
"dotnet": { }
}
}
This is my project.json file.
The tutorial now says I should add "Microsoft.Data.Entity" However I am missing this reference so I'm not able to add this library. I need this library so I can create my DBContext class.
Had the same problem, the project did not load all the libraries in the beginning. Added the hot fix and all is well now.
Problem :
Opening Package Manager Console produces the message:
"Windows PowerShell updated your execution policy successfully, but the setting is overridden by a policy defined at a more specific scope. Due to the override, your shell will retain its current effective execution policy of Unrestricted. Type "Get-ExecutionPolicy -List" to view your execution policy settings. For more information please see "Get-Help Set-ExecutionPolicy"."
But no PowerShell prompt ever appears. Similarly, attempting to install a package produces the same message on attempting to execute the script file from the package, followed by:
Install failed. Rolling back...
Attempting to upgrade an existing package instead produces:
Failed to initialize the PowerShell host. If your PowerShell execution policy setting is set to AllSigned, open the Package Manager Console to initialize the host first.
Solution
Explained and hot fix links available in https://github.com/NuGet/Home/issues/974#issuecomment-124774650
A hotfix is now available to install and we are confident it will unblock you. Please grab the install from one of these locations appropriately:
3.1.1 for VS 2015:
https://github.com/NuGet/Home/releases/download/3.1.1/NuGet.Tools.vsix
We will publish these to the Visual Studio gallery next week.
Change dotnet to dnx451
"frameworks": {
"dnx451": { }
}
I'm running firebase init and it's creating firebase.json. firebase.json is in the apps root directory, pointing towards my public directory app. See here:
firebase.json
{
"firebase": "harrison",
"public": "app",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
Here is where my firebase.json lives:
Here is my public directory, app:
When I run firebase deploy from the command line, everything seems to upload correctly. I then run firebase open or equivalently go to the deploy site, and I get a 404 saying my index.html was not found when it's CLEARLY in the specified directory.
In my case, I simply had to change the path from public to ./public. This might be a version-control bug. I've opened a pull request.
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
I met the same problem as yours, here is my soluation:
run firebase init
choose the host option
rewrite all to index:yes
overwrite to dist/index :no
and then firebase deploy
and then solve the problem
If you are using Yeoman, run grunt build in your project directory to create /dist directory.
Then, run firebase init (in your project directory again) and type the corresponding Firebase app and just press enter in Public Directory(current directory).
Next, change firebase.json to:
{
"firebase": "<FirebaseAppName>",
"public": "./dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
Finally, run firebase deploy and firebase open.
I faced the same issue. All you need is to write the below code in your firebase.json file
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
I had same problem and was getting 404 then I found that my index.html was present inside my project folder i.e
dist --> project-folder --> index.html
Hence, my firebase.json became
{
"firebase": "<FirebaseAppName>",
"public": "./dist/project-folder",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
I think I found the reason for this, since i was having the same issues myself.
If your index.html links to faulty external ressources or even internal ressources that takes too long to load, you will end up with an error. Sometimes you get a 503 error and sometimes you get a 404.
Try reducing your html file untill you figure out what is causing it to fault
Also, link to minified versions of all scripts and css files.
I had the same issue, the below solution work for me
Add the below lines in the firebase.json file (which you will find in
your root folder)
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
Redeploy your application with firebase deploy command
Your firebase.json file should look like this:
{
"hosting": {
"site": "biscayne",
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
Make sure you answer build to
What do you want to use as your public directory?
after running firebase init.
Check your node version
node --version
Node versions greater than 10 are not supported. Downgrade to anything lower than 10, if that doesn't work try the following.
firebase login
firebase use --add (Choose the right Project ID)
firebase init (select hosting, than correct Project ID)
if needed (npm run build)
firebase deploy
Solution was number 2 Choosing the right Project ID Because somehow firebase commands was referring automatically to a wrong Project ID
Good Luck
I had the same issue and I solve it by answering y on the
? Configure as a single-page app (rewrite all urls to /index.html)?
question.
After that I npm run build, then firebase deploy.
It worked like a charm.