I am trying to understanding ionic v3 directory structure since I'ved been working a lot on ionic v1.
Here is a project in ionic v3.
I am particularly curious what is .sourcemaps and www
so if I were to do any code modification, which sources should I touch ? previously in v1 I modify the code in www and then do ionic serve it will have all updates. in ionic v3, i think www directory is a build directory.
Please someone explain abit on the new directory structure and give guidance for simple code practice and debugging.
In Ionic v3 you will spend most of the time coding in the src folder. Most of everything you need to touch to create a wonderful app is generated in this folder.
Platforms folder is where you will see all the platform related folders get generated once you prepare your project for android or iOSready.
www folder is were you place your medias your images and logo or any other necessary assets you wanted and use in your app.
For example if you want your app logo specific, you can place that logo inside the www/assets folder.
Related
I am currently building an application using Ionic + Angular, with Capacitor for iOS & Android applications.
As mentioned in the doc, I ran the following command to generate android and iOS platforms to the app:
npx cap add android
and
npx cap add ios
I have observed the project structure of Ionic + Capacitor applications in Github and other resources and they all have this structure:
But the app I have has something else instead.
This does not look like a good practice. Moreover, if I wanted some resources like "Splash Screen" in my application, it will require a resources directory. Is there a way to manage this, so I have all iOS & android related files within the resources directory without breaking the existing application?
Every project have two android as well as IOS folders, one in the root directory which contains the platform data and one in the resources directory which contains the resources for the respective platform. The android and ios folders in the resources folder will be auto generated once you run the generate resources command. The folders you moving manually are the platform folders not the resources folders and they should be kept in the root directory of the project.
Follow the steps to generate resources
I'm working on a Flutter web app and would like to add some web-specific PWA resources such as icons, manifest file, service worker,...
I've tried to put these files in the /web folder but they're not copied into build/web/ when performing a release build with flutter build web.
What is the right approach to deploy these resources?
This seems to be fixed in the latest versions of Flutter (1.20.0). Previously I had setup a script that did this copy manually, but it's not required anylonger.
I’m unfortunately having difficulty deploying my ionic project for web. No matter what I do, commands such as 'ionic build, ‘ionic build --prod’, ‘ng build --prod’, or whatsoever always create a www folder that is incorrect. The index.html in this www folder is always blank when viewed from a browser.
I’ve tested this issue on other ionic projects as well (just generated some from templates) and the same issue occurs here, with the index.html in the www folder always being displaying a blank site. If possible, I’d appreciate any help if that’s OK!
ionic cordova platform add browser
ionic cordova run browser
ionic cordova build browser --prod
For testing purpose use ionic serve . It will rebuild automatically every time when you update your code.
have you changed the base href in index.html from
base href="/"
to
base href="."
It's been a while since I developed in ionic ( 1 yr ). I think things have changed.
I used to be able to create a new blank template ionic project at a local folder on the mac and then replace its placeholder www folder with another project's www folder. This used to work.
Now, replacing the www folder in that ionic blank project makes no difference when I run any of these commands
ionic serve
cordova build ios
cordova emulate ios
I keep seeing the "The world is your oyster" message.
In fact, when I even renamed the local folder that was holding the entire ionic project, the cordova build ios still has worked without any complaints.
Clearly, the code is running somewhere else.
I also notice this at the terminal prompt:
➜ vb git:(master)
Here the git:(master) thing is new to me. Could this be the culprit?
If so, how can I disassociate the github aspect so I can work on the local and quickly test the changes I will be making in the local www as easy as going cordova build ios?
The problem was that when I created the blank project, I used the defaults which now outputs an ionic 2 baby.
I did the following 2 changes to solve my problem.
create my app for version 1 by appending --type=ionic1 as follows:
ionic cordova start myapp -blank --type=ionic1
I also prefixed allmy cordova commands with ionic name space.
Now I can replace the www all day long and my ionic cordova build ios & ionic cordova emulate ios will comply.
hope it will help someone.
I am new to Ionic and just getting used to it. However I have noticed that when I create an app files are download from github such as:
Downloading:
https://github.com/driftyco/ionic-app-base/archive/master.zip
Often working without internet access is there a way that files I might need can be downloaded once and stored locally?
Yes, you can avoid downloading it with each new app. When you wrote something like to
$ ionic start YourAppName tabs
tabs - is an alias to Ionic starter repository. You can replace with relative or absolute path to a local directory.
Check out more about start parameters there - Starting an Ionic App.
EDIT: I don't see a reason why the code below couldn't work. And Yes, you have to unpack your default app files to some folder.
$ ionic start YourAppName c:\Temp\ionic-app-base-master
The command ionic start myApp will always create your project with the latest version of Ionic. It will always download the github. Currently there is no how to create a new project without using the downlod of the github.
You can create a blank project and uses it as "boilerplate project" (ionic start myApp blank). Then, when necessary, to update the Ionic (newest version) go to the root of your project and run ionic lib update.
Just download all the templates once and use it whenever you need when you are offline. Ionic will always download latest bundle when you do:
ionic start MyApp