Reading environment variable from beanstalk for reactjs web app - amazon-web-services

I have a problem which seemed to be trivial at the beginning but now I am getting that it is very confusing.
So I am using reactjs for the front end of my application. I deploy my reactjs web app in a beanstalk in aws. In the beanstalk I define an environment variable called test and now I wanna read that and use it in my react application. But the problem is my react application is basically a client script in users browser so I cannot do something like this:
const config = {};
config.db = {
test: process.env.DB_DATABASE || 'my_db',
};
which is suggested in that link.
https://alexdisler.com/2016/03/26/nodejs-environment-variables-elastic-beanstalk-aws/
So I am doubting this is doable at all or it is something that is not possible.? any idea would be appreciated

Your react code will run in the browser, and will not be able to access the environment variables that have been set on the server.
The link you provided describes the process to set environment variables in a node.js environment that is hosted on an elastic beanstalk instance.
I suggest creating a config file in your react application that stores necessary parameters and initial settings you need to run your app.

Related

Unable to send bundle from aws app deployed using aws copilot via github actions

I have deployed my application using copilot deploy which works. It creates a load balancer and when I go to the designated url I can view my react app. However, I'm trying to create a CI workflow using github actions.
My github actions appear to work, they appear to deploy the app. But when I go to the new designated url, I get Uncaught SyntaxError: Unexpected token '<'
If I go to that same url and hit a specific route on it, that actually does work. So I can do url/test and it return "hello world" but it won't return the bundle for the application or it's returning a broken version of it for some reason.
I can't figure out why using copilot deploy normally works, but this doesn't
For context, my app is set up like this. In the root folder there is a Server folder that has the node server file with the routes. In the root folder is also a src folder with the react code. There is a public file. There is the docker file containing instructions. And then there is the build file. So far I've been generating the build ahead of time and then deploying everything. The node server then sends the build.
So presumably, something about the way the docker container is being built via github actions is significantly different than the way it is building using copilot deploy. But, my understanding is that in both cases it is following the same docker file. So I can't figure out what is different about the directory structure it is creating, or maybe its having trouble creating the bundle at all. If anyone has any insight it would be appreciated.
Thanks!

Deploy Vue JS Django app with Elastic Beanstalk

I've got an app I've built locally and I'm ready to deploy it but using Vue as a frontend and Django as the backend is something new to me. My current folder structure looks like:
-Backend
-Frontend
-Env
The backend folder is a traditional Django project with sqlite as a DB and frontend is your normal looking Vue project while env is the virtual environment
I don't even know how to go about this or what questions to ask but I've come to see that people deploy SPAs with AWS Elastic Beanstalk.
What is the most straightforward way to deploy an app like this?
The best way we often use
If you are accessing your Django project using ajax call
1.Create the build of your project
Once your build is created you need to host this build to some URL using s3 or any other preferred static hosting.
Now you need to deploy your Django project using EB, once you deploy your project you will get an autogenerated URL
In your frontend project, you need to set an environment variable in your configuration so that whenever you build a project all you ajax call will be redirected to the elastic beanstalk auto-generated URL and whenever you are working locally all your call will be redirected to the localhost URL
Below coded is not the exact just a rough idea of what exactly your baseurl should look like
env.APILINK=env.build? 'beanstalkurl':'localhost'
Make sure you add a base URL to you axios or any other ajax call,
once you set your baseurl based on the environment you are working, all the ajax call will be redirected accordingly
For the dev environment
http://localhost/api/getsomedata
For the prod environment which is actually a build
http://beanstalkurl/api/getsomedata

How to go from a deployed ember project to local development project?

I'm using a deployed github repo project as a starting point for my own development project. Using ember-cli and ember serve I get a server running on localhost:4200. But it says
Proxying to https://xxxxx.yyy
where xxxxx.yyy is the website of the official deployed project, and the localhost:4200 server interacts with the deployed project's databases.
How do I tell ember to start a completely new local server that creates local empty databases, instead of proxying to the deployed website?
I tried ember build --environment=development, and it rebuilt, but it acts the same.
It sounds like you have a proxy configured in the .ember-cli file, as described in the guides. If you remove that property, Ember CLI should no longer use a proxy.

Cakephp logs in AWS Elastic Beanstalk

What is the best way to handle logging with cakePHP in an Elastic Beanstalk environment?
Normally cakePHP writes the logs to the tmp folder of the application. However I see no way to access that folder in an Elastic Beanstalk app.
Am I missing something or is there a specific way to get the logs of your app.
EDIT: The cakePHP Version I'm using is 2.10.9
You did not mention the version of CakePHP that you are using so I will assume 3.x
On the official cookbook you can see how to create a log adapter and you can then use that to push the logs to the Elastic Beanstalk environment.
If you exted the BaseLog class as the example suggests you have very little code to write.
Next you need to properly configure your new logger in app.php
For CakePHP 2.x you need look at this documentation on how to create a new log stream.

Preview mails in staging server on rails 4

I have a staging server where I want the designers to be able to preview the email design.
I have used rails 4 feature and I am able to access the mailer preview in localhost on path
http://localhost:3000/rails/mailers
Can I do the same on the staging server ?
this is all about configuration
first thing that you should do is to environment for staging.
by default rails give you development, production, and test
then I would set up something like mailcatcher this way emails dont go out to real people that dont need to see them.
last step is to configure the server environment to be staging
You can also edit config vars on your app’s settings tab on Dashboard
Heroku manifests config vars as environment variables to the
application. These environment variables are persistent – they will
remain in place across deploys and app restarts – so unless you need
to change values, you only need to set them once. Whenever you set or
remove a config var, your app will be restarted.
but here is were you need to change production to staging
I hope that this helps