Embli-Cli Not work after Building - ember.js

Iam working around Ember-Cli.I build a project and customize the "ember-cli-build.js" but finally it doesn't work.
this is my work steps:
1) ember new myapp
cd myapp
ember server
it works fine and i can see my project on "http://localhost:4200"
2) then run ember build --environment=production and get Built project successfully. Stored in "dist/". so it appear that my project built.
3) then i run this url on browser that direct to my dist directory project
localhost/~/myapp/dist/index.html
but nothing shows.
i check the console and it seems that the "ember" is running, but nothing shows on the screen

i found the anwser. first of all on the "enviroment" change these locationType: 'hash'
APP: {
rootElement: "#page-base"
}
and then go to "project/app/index.html" and place <div id="page-base"></div>
then build the project by ember build --environment=production
it works fine.

It is expected that you deploy everything inside /dist folder to your server and it will be the root of your http server. And there is a way to simulate this behavior on your local environment. All you need is to install http-server globally in your system:
npm install http-server -g
then navigate to the dist folder of your app:
cd myapp/dist
and start the http-server:
http-server -o
That's it. You have your built ember application running in your browser locally.

Related

Expo + React Navigation + Vercel: Deep Linking not working

I am using expo sdk41, react navigation 5, and vercel to deploy a web-build, built with expo build:web.
When I am developing locally, I can deep link, e.g. http://localhost:19006/sign-in. However when I deploy it to vercel and assign a domain name to it, the deep linking does not work anymore.
I am already doing the following, which allows deep linking to work in development:
export const linking = {
prefixes: [Linking.createUrl('/'),
screens: {
...
}
}
Why is deep linking working in development and not when deployed to vercel?
I am happy to add more info if needs be.
Running expo build:web bundles a SPA and you need to redirect calls to the deployed app to index.html. Vercel allows configuring redirects using a vercel.json configuration file, placed at the root of a project.
Add a web/ folder in your Expo root directory and create a vercel.json file in the web/ folder with the following content:
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
This file will be copied to the web-build folder when you run expo build:web.
I was able to fix this by setting the framework in the setting to create-react-app

How do i continue working with Amplify on a new machine?

I'm using react native for my project. On my old machine, when i ran amplify status, i had Auth, Api and Storage services listed.
I moved to my new machine, installed node, watchman, brew etc... and then navigated to my react native project and ran: react-native run-ios, and voila, my app is running. All the calls to my AWS Api, Auth and Storage are working perfectly.
Now i can make some amplify commands. Such as amplify status. I tried: amplify env add: here's what i got:
Users-MBP-2:projectname username$ amplify env add
Note: It is recommended to run this command from the root of your app directory
? Do you want to use an existing environment? Yes
? Choose the environment you would like to use: dev
Using default provider awscloudformation
✖ There was an error initializing your environment.
init failed
Error: ENOENT: no such file or directory, open '/Users/username/.aws/credentials'
at Object.openSync (fs.js:462:3)
at Proxy.readFileSync (fs.js:364:35)
at Object.readFileSync (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/util.js:95:26)
at IniLoader.parseFile (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/shared-ini/ini-loader.js:6:47)
at IniLoader.loadFrom (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/shared-ini/ini-loader.js:56:30)
at Config.region (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/node_loader.js:100:36)
at Config.set (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/config.js:507:39)
at Config.<anonymous> (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/config.js:342:12)
at Config.each (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/util.js:507:32)
at new Config (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/config.js:341:19) {
errno: -2,
syscall: 'open',
code: 'ENOENT',
path: '/Users/username/.aws/credentials'
}
Do you think credentials info needs to be brought/configured to my new machine?
When i run amplify configure project it's like doing an amplify init and building a project from scratch. I'm being asked:
? Enter a name for the project: ProjectName
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using (Use arrow keys)
angular
ember
ionic
react
❯ react-native
vue
none
etc....
I also already have a region, username and accessKey, secretAccess key etc..
I do not want to replace or ruin anything in my current backend or current project! Whats going on?
Ensure amplify-cli is installed and you're logged in with your AWS details.
npm install -g #aws-amplify/cli
amplify configure
Running amplify configure is mainly to give the cli knowledge of your AWS account so subsequent commands can have access to things.
If you get amplify: command not found errors try restarting your terminal. If still no luck, you will need to check amplify has been added to your PATH variable.
Run amplify env add , but choose an existing environment. This will let you choose the environment you created on your other machine so you can pull those settings down to your new machine.
amplify env add
? Do you want to use an existing environment? Yes
Production
Follow up with:
amplify pull
You don't need to run amplify add auth again or anything. All of that will pull down automatically after you've done the above.
You DO NOT need to do all config again, but some for sure
You have to install amplify cli npm install -g #aws-amplify/cli
use amplify pull
https://docs.amplify.aws/cli/start#amplify-pull
Follow the rest of steps -
-- provide the accessKeyId, secretAccessKey
-- region
-- select amplify project
and then rest of app related thing like IDE, directory......
I tried every solution then I found this. (in MacBook)
% sudo -i
Password:
~ root# npm install -g #aws-amplify/cli
-- Ctrl+D to exist from Root user
% amplify pull --appId xxxx --envName yyyy.
Note: To get --appId xxxx --envName yyyy
Log in to the AWS console. Choose AWS Amplify. Click your app. Go to Backend
environments. Find the backend environment you wish to pull. Click
Edit backend. See top right then click 'Local setup instructions
' ( amplify pull --appId
YOUR_APP_ID --envName YOUR_ENV_NAME )
Waiting until it request to verify your amplify.
✔ Successfully received Amplify Studio tokens.
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path: src
? Distribution Directory Path: build
? Build Command: npm run-script build
? Start Command: npm run-script start
✔ Synced UI components.
? Do you plan on modifying this backend? Yes
⠴ Building resource api/xxxx✅ GraphQL schema compiled successfully.
Edit your schema at ....
✔ Successfully pulled backend environment yyyy from the cloud.
✅
Successfully pulled backend environment staging from the cloud.
Run 'amplify pull' to sync future upstream changes.
% amplify pull
% npm install
% npm start
Hope this help every one!!
Happy Coding :)

Ember CLI + Watchman Not Detecting Addon Changes

I have an Ember.js addon which Watchman does not seem to operate correctly with. Any changes made to the addon-name/app files do not trigger a rebuild. However, changes to files within addon-name/tests do trigger a rebuild.
I have a .watchmanconfig file set up as follows...
{
"ignore_dirs": [ "tmp", "dist", ".idea", "docs", ".git", "node_modules" ]
}
After running the dummy app with ember s, I checked watchman watch-list and do not see the addon listed in the "roots" category. I've added it manually, but that does not help either, as I'm guessing ember s has to tell watchman what to do when the files are changed.
Any ideas on what might be happening?
OS: Mac OSX High Sierra (10.13.4)
Ember: v3.1.0
Node: v8.11.1
NPM: 6.0.0
Yarn: 1.5.1
If you are using symlink then some times watchman does not track the changes, to track your changes in your addon's index.js add following code
module.exports = {
name: projectName,
isDevelopingAddon: true
};
Hope it helps

Expo builds locally, won’t publish

I have my un-ejected expo app up and running and I've managed to build and run it successfully locally on both android and iOS without errors. However, when I try to publish the app I get the unable to resolve module error.
Here's the full error:
[exp] Failed building JavaScript bundle.
[exp] Unable to resolve module `BikeShare/theme/components` from `/Users/gdaunton/Projects/BikeShare/App.js`: Module does not exist in the module map
[exp]
[exp] This might be related to https://github.com/facebook/react-native/issues/4968
[exp] To resolve try the following:
[exp] 1. Clear watchman watches: `watchman watch-del-all`.
[exp] 2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
[exp] 3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.
[exp] Packager URL http://localhost:19001/node_modules/expo/AppEntry.bundle?dev=false&minify=true&hot=false&assetPlugin=/Users/gdaunton/Projects/BikeShare/node_modules/expo/tools/hashAssetFiles&platform=ios returned unexpected code 500. Please open your project in the Expo app and see if there are any errors. Also scroll up and make sure there were no errors or warnings when opening your project.
Basically I have a a setup like this:
BikeShare
- static
- js
- theme
- components
- index.js
- App.js
and a .babelrc with:
["module-alias", [
{ "src": "./static/js", "expose": "BikeShare" }
]]
I found out that it was because I had aliases that branched off of my main alias (i.e. BikeShare/img). I had to switch all of those to be namespaced separately (just img/). I also switched to using module-resolver instead of module-alias since that was recommended in a few places.

Ember.js - CircleCI - BrowserStack

I try to connect together our cicleCI with browserstack and run our integration_test and unit tests not only with PhantomJS but on real Firefox and Internet Explorer as well, using Browserstack service.
I try to configure browserstack-cli. I can run the test from circleci via tunnel on Browserstack, but never report back to circleci server.
Could you please share your experience if you already played with this stack? Thank you very much!
The solution is to use BrowserStackLocal and browserstack-cli tools together. The 64bit linux version of BrowserStackLocal builds up the tunnel from circleCI server to Browserstack server. After that we can use browserstack-cli to launch browsers and running tests from testem.
Download BrowserStackLocal
and insert in .browserstack folder in your project.
64bit linux version of BrowserStackLocal: http://www.browserstack.com/local-testing (Binnaries)
Create a script,
which will run and create settings for browserstack-cli. You have to setup global variables in circleCI, and you can keep your access details there secretly. Let's call this file runthis.sh and save in .browserstack folder. This script will run your BrowserStackLocal binary as well, so the tunnel will be exist.
#!/bin/bash
echo "{\"username\":\"`echo $BS_USER`\", \"password\":\"`echo $BS_PASSWORD`\", \"privateKey\": \"`echo $BS_KEY`\", \"apiKey\":\"`echo $BS_KEY`\"}" >> ~/.browserstack/browserstack.json
./.browserstack/BrowserStackLocal $BS_KEY &
CircleCI config
(circle.yml) file mainly depend of your project. We have to copy .browserstack folder in home folder, install bower, browserstack-cli and testem.
An example:
machine:
timezone:
Pacific/Auckland
node:
version: v0.10.28
dependencies:
pre:
- mv ./.browserstack ~/
- sh ~/.browserstack/runthis.sh
post:
- bower install
- npm install browserstack-cli -g
- npm install testem -g
test:
override:
- PATH=$PATH:bin grunt integration_tests_cli; testem ci
- PATH=$PATH:bin grunt tests_cli; testem ci
Testem config:
testem.yml - Most of the part is depend of your project. Important in our case is launchers section.
framework: "qunit"
test_page: "tmp/index.html"
src_files:
- "tmp/assets/application.js"
- "tmp/tests.js"
- "tmp/integration_tests.js"
launchers:
bs_chrome:
command: browserstack launch chrome --attach
protocol: browser
timeout: 300
launch_in_ci:
- "PhantomJS"
- "bs_chrome"
launch_in_dev:
- "Chrome"
- "Firefox"
- "PhantomJS"
parallel: 2
So, if you update your project on github, circleci will launch your test and connect to browserstack and gonna use browsers there...