search

blackbaud / skyux2-docs

Documentation for SKY UX Components
4 stars 32 forks source link

Guide to local SkyUX SPA development in iOS Simulator #1038

Closed Blackbaud-JosephZelada closed 3 years ago

Blackbaud-JosephZelada commented 3 years ago

Steps to locally serve a SkyUX SPA to an iOS simulator and debug

  1. Download & Install XCode, this will take a long time so do it in advance
  2. Open XCode, click XCode in the toolbar, navigate to Open Developer Tool and click Simulator. This will open the iOS simulator
  3. This simulates a full iOS device, meaning you'll need to click the simulated power button to turn it on
  4. Now we need to set up this simulated device to allow local development a. On the iOS device, navigate to Settings -> Safari. Here find and turn off "Prevent Cross-Site Tracking" b. Back on your Mac, we'll need to extract the SkyUX cert from your machine for use in iOS I. Open "Keychain Access" II. Find the certificate named "SKYUX-Developer-CA" III. Click to select it, then hit File > Export Items IV. Save it somewhere V .Drag that .cer file to the simulator. No prompt will appear
  5. You should now be able to run skyux serve --browser safari to serve your app to Safari, then use the link provided on the command line to view your locally served app
  6. To allow console logging and general debugging, you'll need to do the following a. On your actual machine, open Safari and navigate in the toolbar to Safari -> Preferences -> Advanced and enable “Show Develop menu in menu bar” a. Open http://preview.mobify.com in the iOS simulator c. On this page, paste the URL for your locally served app into the Site URL box and click "Preview" d. On your actual machine, click Safari and navigate to the toolbar for Safari -> Develop e. In this dropdown you should see an entry that says Simulator. Mouse over that and click the URL that should match your locally served app

From here you should be able to debug locally served changes in real time

blackbaud-johnly commented 3 years ago

I asked @Blackbaud-JosephZelada to create this issue with the docs that he wrote up after he asked on Slack about getting this content into the SKY UX docs. I'm not sure if I'll be at standup when we triage the issue, so JFYI.

Also, I went ahead and created a draft PR (https://github.com/blackbaud/skyux2-docs/pull/1039) with a new topic for this content. I made some minor edits, but I need help from a dev on the team to help QA the content since I don't have a Mac. I set the instructions up in a child topic to our instructions on serving a SPA (https://developer.blackbaud.com/skyux/learn/get-started/basics/serve-project) in the Learn section of the SKY UX docs.

Blackbaud-AlexKingman commented 3 years ago

Hey @Blackbaud-JosephZelada , is the mobify step necessary? Just curious on what that does for you as opposed to navigating directly to the SPA URL.

Blackbaud-JosephZelada commented 3 years ago

The mobify step is only necessary if you want the developer console. If you're just looking to serve it, you can navigate directly to the served URL

Blackbaud-AlexKingman commented 3 years ago

Hmm... are you sure? I skipped mobify completely and was able to serve the SPA, copy+paste the link into my iOS simulator then turn on the developer console for the device. I could set breakpoints and watch them hit when I interacted with the simulated device. Maybe I'm missing something, but I don't see why mobify is necessary?

blackbaud-johnly commented 3 years ago

@Blackbaud-JosephZelada, just following up to see if you saw Alex's last question. No rush, but let us know what you think of tweaking the docs you provided to edit out the mobify step and incorporate Alex's alternate step. Thanks!

blackbaud-johnly commented 3 years ago

Follow up note: We removed the mobify step, and we'll close the issue after we merge https://github.com/blackbaud/skyux2-docs/pull/1039.

blackbaud-johnly commented 3 years ago

Addressed in https://github.com/blackbaud/skyux2-docs/pull/1039.