Running an Ionic web app on S3

Bendeverell · July 31, 2017, 7:17pm

Hello

I have been trying out Ionic by using a test app that is working on IOS and Android. I wanted to load the app onto a S3 budget as a web app test.

I used the following to add the browser to the platform folder.

ionic cordova platform add browser

I have not loaded it a S3 bucket but I guess the www. from the platform>browser>www needs to be copied over. Can you please help?

I ran the following to build the app for a browser.

ionic cordova build browser

The output is listed below. Is there a command to run for AOT?

Thanks in advance - Ben

Mon Jul 31 19:57: $|-bash|~/Documents/Udemy/IonicAngular/RecipesMobFinished >> ionic cordova build browser

Running app-scripts build: --build --iscordovaserve --externalIpRequired --nobrowser

[20:05:52] build dev started …
[20:05:52] clean started …
[20:05:52] clean finished in 1 ms
[20:05:52] copy started …
[20:05:52] transpile started …
[20:05:54] transpile finished in 2.61 s
[20:05:54] preprocess started …
[20:05:54] deeplinks started …
[20:05:54] deeplinks finished in 43 ms
[20:05:54] preprocess finished in 43 ms
[20:05:54] webpack started …
[20:05:55] copy finished in 2.81 s
[20:06:02] webpack finished in 8.08 s
[20:06:02] sass started …
[20:06:04] sass finished in 1.25 s
[20:06:04] postprocess started …
[20:06:04] postprocess finished in 5 ms
[20:06:04] lint started …
[20:06:04] build dev finished in 12.04 s

cordova build browser
⠸ Running command [20:06:07] lint finished in 2.83 s
Running command - done!
Running command: /Users/bendeverell/Documents/Udemy/IonicAngular/RecipesMobFinished/platforms/browser/cordova/build
Cleaning Browser project

Sujan12 · August 1, 2017, 9:07am

We can’t really help you copy/upload a folder. You have to do that yourself.

--prod is what you are looking for.

Bendeverell · August 1, 2017, 10:05am

Hi

Thanks for your help. I have run the following command

ionic cordova build browser --prod

Is this what I should be running? I will copy the platform/browser/www. file over to the bucket when there are no errors.

I have the following output

Tue Aug 01 10:58: $|-bash|~/Documents/Udemy/IonicAngular/RecipesMobFinished >> ionic cordova build browser --prod
Running app-scripts build: --build --prod --iscordovaserve --externalIpRequired --nobrowser

[11:01:01] build prod started …
[11:01:01] clean started …
[11:01:01] clean finished in 29 ms
[11:01:01] copy started …
[11:01:01] ngc started …
[WARN] Error occurred during command execution from a CLI plugin
(@ionic/cli-plugin-cordova).
TypeError: Cannot read property ‘codeGen’ of undefined
Tue Aug 01 11:01: $|-bash|~/Documents/Udemy/IonicAngular/RecipesMobFinished >>

Sujan12 · August 1, 2017, 10:10am

I can’t comment if this is the “correct” command, but this will create a Cordova browser build based on an optimized Ionic build.

Run npm run ionic:build --prod --verbose please.

Also post your ionic info output please.

joshmorony · August 1, 2017, 10:12am

What you probably want is, as Sujan has pointed out, npm run ionic:build --prod and then upload the contents of the www folder to your server. You can also uncomment the service worker in index.html and set up caching and the manifest.json file if you want.

I’ve never really tried browser builds with Cordova, but I’ve been told by someone on the Ionic team that it can be buggy, and that for now npm run ionic:build --prod is the preferred option for PWA builds.

Bendeverell · August 1, 2017, 10:24am

Thanks - the output is listed below

Tue Aug 01 11:07: $|-bash|~/Documents/Udemy/IonicAngular/RecipesMobFinished >> npm run ionic:build --prod --verbose
npm info it worked if it ends with ok
npm verb cli [ ‘/usr/local/bin/node’,
npm verb cli ‘/usr/local/bin/npm’,
npm verb cli ‘run’,
npm verb cli ‘ionic:build’,
npm verb cli ‘–prod’,
npm verb cli ‘–verbose’ ]
npm info using npm@5.3.0
npm info using node@v8.2.1
npm verb run-script [ ‘preionic:build’, ‘ionic:build’, ‘postionic:build’ ]
npm info lifecycle ionic-hello-world@~preionic:build: ionic-hello-world@
npm info lifecycle ionic-hello-world@~ionic:build: ionic-hello-world@

ionic-hello-world@ ionic:build /Users/bendeverell/Documents/Udemy/IonicAngular/RecipesMobFinished
ionic-app-scripts build

[11:22:13] ionic-app-scripts 2.1.3
[11:22:13] build prod started …
[11:22:13] clean started …
[11:22:13] clean finished in 41 ms
[11:22:13] copy started …
[11:22:13] ngc started …
[11:22:21] ionic-app-script task: “build”
[11:22:21] TypeError: Cannot read property ‘codeGen’ of undefined
TypeError: Cannot read property ‘codeGen’ of undefined
at Object.doCodegen (/Users/bendeverell/Documents/Udemy/IonicAngular/RecipesMobFinished/node_modules/@ionic/app-scripts/dist/aot/codegen.js:6:50)
at /Users/bendeverell/Documents/Udemy/IonicAngular/RecipesMobFinished/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:42:30
at
npm verb lifecycle ionic-hello-world@~ionic:build: unsafe-perm in lifecycle true
npm verb lifecycle ionic-hello-world@~ionic:build: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/bendeverell/Documents/Udemy/IonicAngular/RecipesMobFinished/node_modules/.bin:/Library/Frameworks/Python.framework/Versions/3.6/bin:~/.local/bin:/Library/Frameworks/Python.framework/Versions/3.6/bin:/opt/local/bin:/opt/local/sbin:~/.local/bin:/Users/bendeverell/mongodb/bin:/usr/local/bin:/local/sbin:/usr/local/mysql/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin
npm verb lifecycle ionic-hello-world@~ionic:build: CWD: /Users/bendeverell/Documents/Udemy/IonicAngular/RecipesMobFinished
npm info lifecycle ionic-hello-world@~ionic:build: Failed to exec ionic:build script
npm verb stack Error: ionic-hello-world@ ionic:build: ionic-app-scripts build
npm verb stack Exit status 1
npm verb stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:289:16)
npm verb stack at emitTwo (events.js:125:13)
npm verb stack at EventEmitter.emit (events.js:213:7)
npm verb stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
npm verb stack at emitTwo (events.js:125:13)
npm verb stack at ChildProcess.emit (events.js:213:7)
npm verb stack at maybeClose (internal/child_process.js:921:16)
npm verb stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
npm verb pkgid ionic-hello-world@
npm verb cwd /Users/bendeverell/Documents/Udemy/IonicAngular/RecipesMobFinished
npm verb Darwin 16.7.0
npm verb argv “/usr/local/bin/node” “/usr/local/bin/npm” “run” “ionic:build” “–prod” “–verbose”
npm verb node v8.2.1
npm verb npm v5.3.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ionic-hello-world@ ionic:build: ionic-app-scripts build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-hello-world@ ionic:build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm verb exit [ 1, true ]

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/bendeverell/.npm/_logs/2017-08-01T10_22_21_179Z-debug.log
Tue Aug 01 11:22: $|-bash|~/Documents/Udemy/IonicAngular/RecipesMobFinished >> ionic info

cli packages:

@ionic/cli-plugin-cordova       : 1.5.0 (/Users/bendeverell/Documents/Udemy/IonicAngular/RecipesMobFinished/node_modules/@ionic/cli-plugin-cordova)
@ionic/cli-plugin-ionic-angular : 1.4.0 (/Users/bendeverell/Documents/Udemy/IonicAngular/RecipesMobFinished/node_modules/@ionic/cli-plugin-ionic-angular)
@ionic/cli-utils                : 1.6.0 (/Users/bendeverell/Documents/Udemy/IonicAngular/RecipesMobFinished/node_modules/@ionic/cli-utils)
ionic (Ionic CLI)               : 3.6.0 (/Users/bendeverell/Documents/Udemy/IonicAngular/RecipesMobFinished/node_modules/ionic)

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : android 6.2.3 browser 4.1.0 ios 4.4.0
Ionic Framework    : ionic-angular 2.0.0-rc.5

System:

Node       : v8.2.1
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.1 
npm        : 5.3.0

Bendeverell · August 1, 2017, 10:25am

Thanks for your suggestion Josh

Sujan12 · August 1, 2017, 10:27am

This is ancient. Seems current app-scripts doesn’t work together with it very well. You should probably try to upgrade.

Bendeverell · August 1, 2017, 10:33am

Hi Sujan - Could you please let me know what the command is to update? Sorry for my Newbie q’s

Sujan12 · August 1, 2017, 10:42am

There is no command and this is quite some work.

You have to incrementally update from version to version and make sure you do al lthe things mentioned in the changelog: https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md (and probably also before, as your version is really old).

It is probably faster to create a new project with ionic start blank blank and then re-implement the functionality step by step.

Bendeverell · August 1, 2017, 10:53am

Thanks - I will create a new project and re-implement

Sujan12 · August 1, 2017, 8:46pm

3 posts were split to a new topic: Invalid provider - only instances of Provider and Type are allowed, got: [object Object]

Topic		Replies	Views
Ionic app in a browser ionic-v3	1	439	April 28, 2017
Ionic build for Browser core dumps ionic-v3	1	570	June 6, 2019
AOT Compilation is not obvious for new users ionic-v3	12	2734	April 25, 2017
Unable to build webapp now ionic-v3	6	1028	August 14, 2017
Documentation for ionic build browser ionic-v3	9	3433	October 15, 2017

Running an Ionic web app on S3

Related topics