Just want to throw this out there in case some one is confused how to hit the djagno api endpoint from Vue front end. It's all in the Nginx conf file! I should have paid attention to the reverse proxy set up as localhost:81/api. You will NOT be able to call localhost:8000/ from vue without getting CORs errors. The django and vue apps are in their separate containers and different domains and this is why the Nginx is required on the frontend. It's like the entryway for clients going to the frontend docker container first ( hitting nginx first, then serving the built/bundled vue index.html file), then allowing the frontend to call the backend while avoiding calling a different domain through a reverse proxy that Nginx serves the api on the same port. This is probably pretty common sense for most devs, but I'm new to docker and web dev in general. I know someone is having an issue with CORS!
I wasn't sure whether to include the installations for ( docker, node and vue ) in this video. Let me know if you're struggling with anything. Leave a 👍 if this video is useful.
Did you get an error message when creating the repo? It could be that there are hidden .git and .gitignore files in the frontend folder. Assuming that's what you mean? I'm not sure. Good luck 🤞
the frontend folder on github appears to be empty. here's the DockerFile content copied from the video for anyone who's looking for it: #build step 1 (installing node modules and preparing compiled build) FROM node:lts-alpine as build WORKDIR /app ENV PATH /app/node_modules/.bin:$PATH COPY package.json ./ RUN npm i --silent COPY . ./ RUN npm run build #build step 2 (deploying build on nginx) FROM nginx:1.21 RUN apt-get update \ && apt-get install -y wget \ && rm -rf /var/lib/apt/lists/* RUN rm -rf /usr/share/nginx/html/* COPY --from=build /app/nginx/nginx.conf /etc/nginx/conf.d/default.conf:ro COPY --from=build /app/dist /usr/share/nginx/html
![Build & Deploy Django on Digital Ocean in 15 Minutes [2022]](http://i.ytimg.com/vi/btQYDmGOmN8/mqdefault.jpg)
Just want to throw this out there in case some one is confused how to hit the djagno api endpoint from Vue front end. It's all in the Nginx conf file! I should have paid attention to the reverse proxy set up as localhost:81/api. You will NOT be able to call localhost:8000/ from vue without getting CORs errors. The django and vue apps are in their separate containers and different domains and this is why the Nginx is required on the frontend.
It's like the entryway for clients going to the frontend docker container first ( hitting nginx first, then serving the built/bundled vue index.html file), then allowing the frontend to call the backend while avoiding calling a different domain through a reverse proxy that Nginx serves the api on the same port. This is probably pretty common sense for most devs, but I'm new to docker and web dev in general. I know someone is having an issue with CORS!
This is great! Well organized and exactly what I needed to get started with docker, django, and vue locally. Not 3 hours either!!!
Thank you for this video. I was going nuts trying to get everything working locally. Great content!
I wasn't sure whether to include the installations for ( docker, node and vue ) in this video. Let me know if you're struggling with anything. Leave a 👍 if this video is useful.
video is amazing... but when i see the frontend code in the git repo there is nothing...
Thanks a lot, really useful video, but why there is nothing in the frontend folder in the repo???
Did you get an error message when creating the repo? It could be that there are hidden .git and .gitignore files in the frontend folder. Assuming that's what you mean? I'm not sure. Good luck 🤞
Where did you find/upload the Dockerfile contents from/to?
the frontend folder on github appears to be empty. here's the DockerFile content copied from the video for anyone who's looking for it:
#build step 1 (installing node modules and preparing compiled build)
FROM node:lts-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
RUN npm i --silent
COPY . ./
RUN npm run build
#build step 2 (deploying build on nginx)
FROM nginx:1.21
RUN apt-get update \
&& apt-get install -y wget \
&& rm -rf /var/lib/apt/lists/*
RUN rm -rf /usr/share/nginx/html/*
COPY --from=build /app/nginx/nginx.conf /etc/nginx/conf.d/default.conf:ro
COPY --from=build /app/dist /usr/share/nginx/html
Splendid 👍👍👍
Thank you.
bad sound, hard to hear(((