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
Related
First off all excuse the bad english..
Im develop/build using vue3 + vite2.
Deploy the 'dist' folder on AWS EC2 and run the server with nginx.
And when I connect to that page, I get an error that I can't see.
Has anyone ever seen an error like this?
(When build/run locally, it works normally without errors.)
after a day of suffering, i found that it was due vueI18n plugin in the vite.config.ts file.
import vueI18n from '#intlify/vite-plugin-vue-i18n';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
plugins: [
vue(),
vueI18n({
include: path.resolve(__dirname, './path/to/src/locales/**'),
}),
],
....
I don't know for what reason,
When I delete that plugin, it worked fine.
the reason for adding vueI18n plugin is because a warning related to bundle install occurred.
i guess is that the plugin conflicts with vite's build environment.
I'm finding it very difficult to deploy my project on AWS. Can someone help me?
I confess that I didn't get along with the antd pro documentation. I can't change port. My generated dist does not access my backend. I'm crazy about this.
I would like a tutorial, or help on the topic. I can't find anything.
Please check the doc which I follow for my own WebApp deployments.
Build & Deploy
Run yarn build for production build. It will generate /dist folder which is production build.
Open /dist/index.html file and Update all assets path from
Create an Express JS server to serve your production build touch server.js.
In server.js, copy/paste the following code:
const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(path.join(__dirname, '/dist')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, '/dist', 'index.html'));
});
app.listen(port);
Before production test the Build dist on Local by using
node server.js and check with localhost with PORT
In your package.json file, change the start script to the following:
to start: "node server.js".
Remove "start": "cross-env ESLINT=none roadhog dev" & "precommit": "npm run lint-staged" (only for production push add it back for development).
Open .gitignore file add following code:
#.gitignore
src/*
public/*
and remove /dist(only for production add it back for development) from .gitignore file.
This will only push production build to server rather than all files.
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 :)
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.
I am looking for alternative methods of deploying a Play application to Elastic Beanstalk. It is a single page app that relies on Ember.js. It would be nice to be able to edit the the contents of the /public folder so I don't need to rebuild the docker image every time something is fixed on the Ember side that doesn't affect the Play app itself.
I am currently using sbt's docker:stage command and zipping the generated docker folder along with this Dockerfile and Dockerrun.
Dockerfile
FROM java:latest
WORKDIR /opt/docker
ADD stage /
RUN ["chown", "-R", "daemon:daemon", "."]
EXPOSE 9000
USER daemon
ENTRYPOINT ["bin/myapp", "-Dconfig.resource=application-prod.conf"]
CMD []
Dockerrun
{
"AWSEBDockerrunVersion": "1",
"Ports": [{ "ContainerPort": "9000" }],
"Volumes": []
}
Once I zip the file I upload it using Beanstalk console. But this involves rebuilding the app every time a typo is fixed on the front end. It is annoying because it means all the updated front end code has to wait until I get a chance to push it up so the boss can view it and give feedback. It would be nice if there was a way to have the /public folder (Play just serves /public/index.html) accessible so the front end dev could access it directly for his edits.
Ideally I would like some method that can be used for both development and production. I don't know the requirements imposed by Beanstalk so it can properly spin up extra instances of the app when needed. Maybe something where when the instance starts it does git pull on the backend repo and git pull on the front end repo, then runs my custom build script for ember to generate the /dist folder and move into Play's /public folder and create gzips of each file. Then start the play app. Then let the front end Dev ssh into the development instance and do git pull and ember build as needed for his edits.
It would also be nice for the development server for the Play server to be run using run or ~run so I can just do git pull and have it rebuild the backend.
Or maybe I am approaching this in the completely wrong way. I have never done any of this before so I am sort of guessing my way through all of it.
Thanks for any suggestions and pointers in the correct direction.
Adam
Edit
Since we are really only using Play as a RESTful API would it be better to just run a nginx/Apache server on something like EC2 then use Beanstalk to handle the Play App without it serving any content besides API calls. I would assume the EC2 nginx could be pretty tiny since only the first access would pull files from the http server. After that it is all API calls. Then we run the Play app from Beanstalk so it can handle load balancing for the API. This at least saves me from rebuilding the image for front end edits. Would this be a more correct setup?