Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Example with Docker? #12

Open
willismonroe opened this issue Feb 28, 2021 · 1 comment
Open

Example with Docker? #12

willismonroe opened this issue Feb 28, 2021 · 1 comment

Comments

@willismonroe
Copy link

This seems like such a neat solution to incorporating Vue.js into a django app. I'm wondering if you could show an example of how you'd incorporate this into a Docker based setup. I've got it working just fine for my dev image, but I'm having trouble understanding how to make it build the files for production so that they're actually served from the static directory instead of from the webpack dev-server.

My super basic Dockerfile for django is below:

# pull official base image
FROM python:3.8.3-alpine

# set work directory
WORKDIR /usr/src/app

# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

RUN apk update \
    && apk add postgresql-dev gcc python3-dev musl-dev

# install dependencies
RUN pip install --upgrade pip
COPY ./requirements.txt .
RUN pip install -r requirements.txt

COPY ./entrypoint.sh .

# copy project
COPY . .

ENTRYPOINT ["/usr/src/app/entrypoint.sh"]

Do I just add?

ENV NODE_ENV = 'production'
RUN cd frontend
RUN yarn build
RUN cd ..

NB: My frontend directory lives inside of the app/ directory so it gets copied over in the "copy project" step.
@willismonroe
Copy link
Author

willismonroe commented Mar 1, 2021 •
edited
Loading

I've realized that the commands should be:

ENV NODE_ENV production
RUN cd frontend; yarn build

But the index file generated still has local links:

    <link href="http://127.0.0.1:8080/js/app.js" rel="preload" as="script"><link href="http://127.0.0.1:8080/js/chunk-vendors.js" rel="preload" as="script"></head>
    <body >
        
            
    <noscript>
        <strong>Please enable JavaScript to continue.</strong>
    </noscript>

    <div id="app"></div>


        
        <!-- html-webpack-inject will inject body assets below -->
    <script type="text/javascript" src="http://127.0.0.1:8080/js/chunk-vendors.js"></script><script type="text/javascript" src="http://127.0.0.1:8080/js/app.js"></script></body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@willismonroe