Is folder canvaskit part of the output of the flutter web? - flutter-web

When outputting the flutter_web, the canvaskit enter image description herefolder is sometimes created and sometimes not, is this folder also a product? What does this folder do? And why is it so large?

Flutter uses skia or canvaskit as a default rendering option for rendering web app you can use the HTML rendered instead of the canvaskit but that would affect your webapp quality.
You can remove it from the file but in that case your webapp use the canvaskit from internet either way the canvaskit must somehow used inorder to display your web app and the if you want to save up some space and make your app get the canvaskit from external source you can remove it

Related

Flutter web svg image will not be displayed after Firebase hosting

Svg images do not appear after hosting. Consolos scan shows that svg files are downloaded. But it doesn't appear. Can anyone help me with this?
I have already built the web app in both html and canvaskit, but it doesn't work in either. I can only see the svg images on localhost.
I use the https://pub.dev/packages/flutter_svg package.
I use a Firebase hosting service.
enter image description here => localhost
enter image description here => hosting
In my case I needed to put the full path name (i.e. include 'assets/'):
SvgPicture.asset('assets/path/to/file.svg')
I found a solution to diplay the current svg/png correctly after Firebase Deploy.
There's something wrong with flutter after we run flutter build web. The respective assets, should be moved into /web directory (on build folder you can check items before do the deploy). But, they are not moved in.
So, in my case, I've removed all assets (png's or svg's) from the root project /assets and set them into the /web/assets folder (mannually)!
This is the automatic process that flutter do after you run flutter build web.
Just pay attention with the declaration of the assets in the pubspec.yaml file. The files must be matching the path for the web folder.
Example:
pubspec.yaml
assets:
- assets/
using the svg icon (without the /assets):
myIcon.svg
Try it. It should work.

I'm using tailwindCSS for a simple html site but deployment on netlify does not work, why?

I've been learning how to use tailwind css by following the offical video tutorial and I just wanted to try to deploy the site example to Netlify to see if it works using the drag and drop feature.
This means taking the entire project folder and dumping it into netlify. This usually works with vanilla html css js sites but for some reason I get the error
Page Not Found Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
This is how the project structured looked like:
What am I doing wrong? Inside the build folder there is another file called tailwind.css
On your Netlify dashboard, change the publish directory to the directory where your index.html file resides: public/. That should do it.
You can also, as you said, take everything out of the public folder and put it at the same level as the other folder and files, which makes the index.html available at the root of the project. However, then you lose your project's file organization.
I've fixed the problem.
The trick was to take everything out of the public folder and put it at the same level as the other folder and files.
This would make the index.html file available at the root of the project and would allow the site to work properly once deployed.

PhpStorm browser button custom url

Is it possible to change the url that the browser buttons in PhpStorm to go to a different url?
Currently these all take me to localhost:63342/[project name]/
I would like to direct these to a different address, [projectname].serveraddress:1111/ for example.
Currently my workaround is to use a PHP Web Page configuration but this required me to pick a browser at configuration level rather than being able to pick and choose.
I have a server config setup to automatically upload the files on change already.
Sure, just set up the Deployment entry and mark it as Default for this project.
When you are using "Open in Browser" or similar functionality, IDE looks for your default deployment entry and builds the URL based on those rules (web server URL + mappings).
If no default deployment entry is found then IDE builds URL for the built-in simple web server that uses localhost:63342/[project name]/path/file.ext URLs.
P.S. If it's a local server (files served directly from the original location) and no actual deployment is needed then use "In-place" type of config.

Application problem after build - ElectronJS

I've build my electronJS application with electron-packager and after the build finished, when I launched it, every data was gone. And I got an error that I've never got before on the dev app. (C.F screenshot)
paths are right because it's working on my dev app with the same configuration.
How can I fix this quickly please.
I've tried to change the directory to full path, change inside of the config.js file.
C.F : https://imgur.com/gallery/VN17hNf
Get all my data and my application work correctly. (get all data, add data, display data)
I've finally found the problem. When you build your app, you need to use relative paths. Like path.join(xxx). The app doesn't understand the ./your_path.
And next problem that I've solved, if you use json file and write data inside of it, you need to have a unpacked app w/ .asar file.

Why Would React Change Image File Extension On Build

I am using create react app and have an image tag that was inadvertently capitalized (tony.JPG). I did a build and successfully pushed the app to production on Heroku. However, I realized the capitalization issue and change the extension to its proper lower case (tony.jpg). However, the build file still showed with the capitalized extension. I deleted the build file and did a new build but got the same issue again. I resolved the issue by changing the img tag src but I have a lingering question. Why would react keep capitalizing the image extension even though the image file was changed to lower case and there was a new build?
I am using Node, Express, & Create React App. I've tried changed the file path in explorer directly and in my client > public > images > tony.JPG. It may be related but the build > images folder not only has the capitalized extension but has two other files (one that is tony.JPG~e5463541ef50286886de13e03dea670ef69c85c6 and another file called tony.JPG~HEAD).
Images name in public folder (tony.jpg):
Image in build folder (tony.JPG):
As #Matt-holland mentioned the type of OS matters, OSX is type insensitive if you're using it
If you run git mv tony.JPG tony.jpg it will rename it in git
So the issue was resolved when I did a hard reset on my PC. I am using Windows 10. I believe the issue is a bug as the issue resolved itself (i.e. the file name changed) after I ended up doing a hard reset on the PC. It could be an issue with my machine and/or VS. Hopefully this will help someone else that comes across the same issue.

Resources