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.
Related
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.
Visual Studio has a template for a Word web add-in. Clicking 'Start' opens Word with the add-in loaded, and allows for immediate debugging of the front-end javascript in the IDE.
Word was running the add-in in ie11.
With this project, the only options I've found are debugging with 'f12' debugger located in C:\Windows\SysWOW64\F12\IEChooser.exe (or System32).
I installed the latest version of windows to get access to the new Windows Terminal. This update also switched the Word add-in to load in edge instead of ie11, which requires the new Microsoft Edge Developer Tools.
I would like to get access to the functionality Visual Studio provides for debugging front-end code via an IDE instead of f12/edge developer tools. I cannot find out how Visual Studio allows this debugging as all of the properties are hidden away as settings in .sln and web.config etc.
Is there any way to debug this add-in with Visual Studio/vscode (preferrably vscode)?
There are many ways you can use VSCode for debugging but all debugging methods depends on external browsers like chrome, IE, edge debugger. I believe you do not want to perform this in VSCode.
This method will help you in some way. But I am sure you can manage this.
Step 1. Create a word web addin using Yeoman generator. Official link below
https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/word-quickstart?tabs=yeomangenerator
They use nodejs and you can choose Angular / React / JS to build your addin.
The advantage is it will give you the flexibility to debug in any IDE .
Caveat: As I said above you can easily build the Addin with the help of web technology.
Step 2: Debugging: either you can use VSCODE Debugging functionality or use the browser
Step 3: If you choose browser: Go to sources > Choose Webpack > Select the .ts or /js file and set the breakpoint. Screenshot below for your kind reference.
note: I have selected Angular from office generator to build the addin. Then you can see the webpack under the sources. I believe this is the same for any technology.
Hope this will help you.
I have a gwt developed website that already runs 100% client-side (by which I mean no server-side javascript is used)
As one of the options for windows universal app development is javascript, is it possible to somehow turn a online gwt app into a offline uwp one?
I am aware there are solutions to package websites together with browser+installer, but if windows can run js 'natively' now (I assume via Edge) it seems a better route.
You can use UWP Javascript project from Visual Studio. This project allows you to add any HTML/CS/JS requires files. You can also use the Hosted model, where your files are downloaded from a URL (but then the app will require connectivity).
I've not tried the scenario, but I don't see any impediments, it should work.
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>
I'm interested in developing with typescript on linux. So I found the above mentioned plugin. I installed eclipse and also the eclipse-typescript plugin as described here. Now I can edit typescript files and see the highlighting. But it is not possible to debug a script. When I try to debug it, there is no debug configuration available.
Is the plugin able to debug a typescript?
I also read in this wiki, but this single page doesn't help me. I googled around and did not found any howto or help...
Thanks
Is the plugin able to debug a typescript?
It isn't supported. Based on my empirical (but certain) observation of : https://github.com/palantir/eclipse-typescript/tree/master/Bridge/src
You could debug the generated JavaScript though (and I highly recommend you do that anyways). And in fact learn to use google chrome debug tools (you'll thank me someday) since they have a live edit and continue, repl, profiler etc.
Alternatively you can try WebStorm which fully supports debugging TypeScript on linux.
At the same time, TypEcs (another TypeScript plugin for Eclipse) features debugging - http://typecsdev.com/. The plugin supports two modes of TypeScript debug:
Standalone: this mode is suitable for debugging server-side NodeJS applications written on TypeScript,
Web Remote: this mode is connected to Google Chrome web browser and allows you to debug TypeScript web application.
So you can try this one.