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
Related
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!
I have an existing vue js project and for backend I want to use django, what came to my mind was to use rest api to communicate with the backend without any integration. is that what everyone is doing or my approach is old school and I have to put the vue project in django directory and go through the whole collectstatic thing?
sorry if my question is too basic.
i don't know hows people doing, usually me and my team did like the python just access the index.html from the Vue build folder when production mode.
but in development mode, we just separate two of them. the python running as the endpoint API (need to enable cors mode in dev), and the Vue run in development mode.
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.
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.
I am creating one ember app. The app is working fine while running on development server (using ember serve), but when i build my app using ember build -prod and deploy it on my server which is apache, just index route works and nothing else.
This is understandable as only index path is physical but i am not finding any way to get this done.
Is there any documentation on build process which can enable all routes?
This is not something EmberJS can fix through the build process. You need to change your server's configuration.
Apache's mod_dir has a "Fallback resource" directive you need to activate for your website since the JavaScript router URLs are not pointing to actual files or folders.
Add this directive in the VirtualHost entry:
FallbackResource /index.html
See this related answer