I am doing my development using a Chromebook and wondered if it is possible to develop SPAs using Flutter using an online IDE such as Cloud9 or Codio?
I have managed to install flutter and run it to install dart but am getting stuck as it can't find a Chrome installation.
Is it possible to develop using the cloud IDE and use by local install of Chrome for testing?
You can also check flutlab.io. It's working on Chromebook (Flutter IDE and even Figma integration). Proof: https://www.youtube.com/watch?v=dQ0ATecs7Fo
Currently, the only closer web approaches are:
DartPad
CodePen
Codespaces
Codespaces being a full VS Code which is currently on Beta Access which will allow the same coding possibilities as the desktop one.
Link: https://github.com/features/codespaces
Alternatively (to CodeSpaces, at least); GitPod has a pretty serviceable free tier to build a testing workspace. They actually have a Github template you can fork, then create a workspace from:
https://www.gitpod.io/docs/quickstart/flutter
Another nicety is the stack is open source as of last year.
Related
not sure if this has been asked before though I couldn't find it. I am using GCP services such as app engine, secret manager and storage but am using the Cloud Shell editor. Though I like it, I prefer coding on VScode due to familiarity. Any help on how could I achieve this on my VS code terminal?
#Sachin - We have support for all the features that are available in Cloud Shell in the local VSCode IDE through the cloud code plugin. Here is where you want to get started.
Quick start & Install
Plugin on VSCode Marketplace
It says here as Use Speedtest in your programs by wrapping it in the programming language of your choice in the official speedtest cli site. What does this mean? Can I use this results to generate in my flutter application?
Based on this forum, I don't think you could do that.
But, you could use the open-source internet speed test project from M-Lab and Google. You could see the GitHub Repo here.
I am trying to investigate issue #40848. In order to see what is going on I wanted to have vscode:extension links from https://marketplace.visualstudio.com open in OSS Dev version of vscode, rather than in the normal Visual Studio Code, while debugging.
How do I achieve this?
The url scheme is just code-oss:extensions.
Code-OSS cannot connect to the extension marketplace by default however, so the install itself will not work. Not sure if this blocks you from debugging. If you need to connect OSS to the marketplace, please try reaching out to someone on the vscode repo. We don't publish official information on how to do that
Is there an IDE like Xcode to develop cross platform apps using ionic? I played with creator.ionic.io but they charge 40$ per month for the complete app development. Can you suggest some open source IDEs? Basically I wanted something similar to ionic where I can drag and drop objects to build the UI
I had come across the same problem when i started at first and found some suggestions from ionic official website.
I copied contents here for convenience.
Visual Studio Code
VS Code is a new editor that comes with support for ES6 syntax, as well as TypeScript support. It will also prompt users to include TypeScript definition files and download them from Definitely Typed. Visual Studio Code is free and works on OS X, Windows, and Linux.
Atom
Atom is cross platform editor built on web technologies. Atom has many plugins to make ES6/TypeScript development very easy. If there isn't something provided by Atom or a plugin, you can even make a plugin yourself, using JavaScript. Atom works on OS X, Windows, and Linux.
WebStorm
WebStorm is a paid IDE that provides many features, such as advanced refactoring support, automatic compilation of code, and gulp/grunt/webpack support. Out of the box, WebStorm comes with support for ES6 and TypeScript, as well as Angular and Ionic syntax support.
ALM
ALM is a free open source IDE built for typescript development, it can be run on any computer running chrome and can be hosted on a server and used on any computer with internet access.
Angular IDE by Webclipse
Angular IDE is a freemium IDE built for Angular 2 and TypeScript development providing integrated terminal support helping with node and npm management. Out of the box, Angular IDE includes code completion and validation for ES6, TypeScript, and Angular 2 HTML templates.
Personally i am using "Brackets" its open source as well and really good.
I think community gets totally confused about the OP's question here.He is asking not about an IDE for developing Ionic apps.He is asking the IDE like an Ionic creator.Which is the IDE anyone can create ionic apps without writing a code.
What is an Ionic Creator? See here.
Creator is a simple drag-&-drop tool for going from idea to App
Store, with just the drag of a mouse.
There is no such free and open source tool but the price you have mentioned is not correct with the official Ionic creator. It is $24/mo.You can see details here.
PRO
$24/mo for individuals
Unlimited Projects
Private Projects
In-Tool Code Editing
Basic & Native Exporting
Creator Mobile App
Note:
By using above tool you can create Ionic 1 apps only.There is no support for Ionic 2 yet. You can see the Roadmap of Ionic 2 creator here.
I've found a few post on this topic but have not been able to find the best solution.
Attempted to integrate Ionic into IBM MobileFirst (Worklight).
At the moment - I have built a normal Ionic project and moved the WWW folder in the 'common' folder. Also added in the initOptions, main.js and messages.js.
MobileFirst has an awful build process - I hate having to deploy to a mobilefirst development server + preview app for any code changes. I am hoping to get some type of auto reload working within mobileFirst, or at least develop with ionic normally and hav ea job to bring my changes into my worklight project... something that is better than me current situation.
Does anyone have a sample project that actually auto-builds or picks up code changes automatically?
Any and all help is greatly appreciated.
Not sure what do you mean by "auto-reloading"; if you make any changes to the web resources to your project inside the Studio plug-in (in Eclipse) and reload the preview in the browser, it will show the changes.
You are not required to Run As > Run on MobileFirst Development Server for each change. As long as you work on the resources in your workspace, the "auto-reloading" as you call it, should work (make sure you are using the latest available MobileFirst Studio version from the Eclipse Marketplace).
There is also a rudimentary Starter Application that is based on Ionic.
You can download it from here.
There are also several results on the subject matter when searching in Google.
The need to rebuild in order to see changes in your Web components (CSS, JavaScript, HTML) did used to be an annoyance in early versions of what was then Worklight and is now MobileFirst. I forget when the need for a rebuild was removed but certainly in Worklight 6.2 and beyond you now simply need to refresh in your browser.
UPDATE: If using MobileFirst 6.3 you need to ensure that you are on a
suitable patch level. I find that simple refresh does not work in
6.3.0.00-20150106-1717, but if I update (Help->Check for Updates) to 6.3.0.00-20150214-1702 then edit/save/refresh works as
expected.
My personal practice is always to have Mobile Web environment in my project and then choose that from the Console. This loads the application in the browser-based Mobile Simulator that you can tailor to fit your target form-factor. This has a "Go/Refresh" button that immediately reflects your edits.
Alternatively, some folks these days do not use Studio, instead they use the Command Line Interfacer. Possibly this may be more to your taste. You can download it here.
there is a solution with using staff like ionic-cli serve command + symbolic links that will replace common folder.
check here an example https://www.dropbox.com/s/4pvaulo6yo47kb9/lab_7.2.mp4?dl=0
(you just can disable sound, cause i've recorded it in russian) 7-15 minutes of this video
Other option is to organize live-preview yourself using IDE features and/or nodejs
This will work as long as you are working on front-end (mostly non-worklight api) part.
You need to include this lines in the index.html
<!-- ionic bundle & css -->
<link href="www/ionic/css/ionic.css" rel="stylesheet">
<script src="www/ionic/js/ionic.bundle.js"></script>