Skip to content

[NextJS] Local docker setup #1538

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

Merged
merged 2 commits into from
Sep 11, 2024
Merged

[NextJS] Local docker setup #1538

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b1d324e
enable running nextjs in docker
ChristopherChudzicki Sep 9, 2024
a20b230
run storybook too
ChristopherChudzicki Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions docker-compose.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,8 @@ services:
command:
- |
yarn install --immutable
yarn workspace mit-learn storybook --no-open &
yarn workspace mit-learn watch:docker
yarn workspace ol-components storybook --no-open &
yarn watch
env_file:
- path: env/shared.env
- path: env/shared.local.env
Expand All @@ -116,6 +116,10 @@ services:
- "6006:6006"
volumes:
- .:/src
environment:
- NEXT_SERVER_MITOL_API_BASE_URL=http://nginx:8063/
links:
- web

celery:
profiles:
Expand Down
12 changes: 10 additions & 2 deletions env/frontend.env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
NODE_ENV=development
PORT=8062
MITOL_AXIOS_WITH_CREDENTIALS=true
SENTRY_ENV=dev
SENTRY_ENV=dev # Re-enable sentry

# Environment variables with `NEXT_PUBLIC_` prefix are exposed to the client side
NEXT_PUBLIC_ORIGIN=${MITOL_APP_BASE_URL}
NEXT_PUBLIC_MITOL_API_BASE_URL=${MITOL_API_BASE_URL}
NEXT_PUBLIC_CSRF_COOKIE_NAME=${CSRF_COOKIE_NAME}
NEXT_PUBLIC_MITOL_SUPPORT_EMAIL=${MITOL_SUPPORT_EMAIL}

NEXT_PUBLIC_SITE_NAME="MIT Learn"
NEXT_PUBLIC_MITOL_AXIOS_WITH_CREDENTIALS=true
1 change: 1 addition & 0 deletions env/frontend.local.example.env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
NEXT_PUBLIC_EMBEDLY_KEY=""
2 changes: 1 addition & 1 deletion env/shared.env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
MITOL_API_BASE_URL=http://api.open.odl.local:8063
MITOL_APP_BASE_URL=http://open.odl.local:8062
MITOL_API_BASE_URL=http://api.open.odl.local:8063
MITOL_SUPPORT_EMAIL=support@localhost
CSRF_COOKIE_NAME=csrftoken-local

Expand Down
8 changes: 7 additions & 1 deletion frontends/api/src/clients.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,13 @@ import {

import axiosInstance from "./axios"

const MITOL_API_BASE_URL = process.env.NEXT_PUBLIC_MITOL_API_BASE_URL
const IS_SERVER = typeof window === "undefined"
const MITOL_API_BASE_URL = IS_SERVER
? // NEXT_SERVER_MITOL_API_BASE_URL is generally only needed for local-dev
Copy link
Contributor

@jonkafton jonkafton Sep 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll hopefully end up addressing the API from within a local network (so the server isn't making API requests over the internet), though for now this holds true

// in docker, where the client and server make API calls to different hosts
(process.env.NEXT_SERVER_MITOL_API_BASE_URL ??
process.env.NEXT_PUBLIC_MITOL_API_BASE_URL)
: process.env.NEXT_PUBLIC_MITOL_API_BASE_URL

const BASE_PATH = MITOL_API_BASE_URL?.replace(/\/+$/, "") ?? ""

Expand Down
9 changes: 0 additions & 9 deletions frontends/main/.env.example
View file
Open in desktop
Copy link
Contributor Author

@ChristopherChudzicki ChristopherChudzicki Sep 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jonkafton Opinion: We shouldn't use a frontends/main/.env.example file.

I know NextJS will use a .env file, but

  • the majority of the time, developers are using docker to run the app. Docker has the env vars in the environment, populated from env/shared.env, etc
  • If you're running outside of docker, let's use the same env files—env/shared.env, env/frontend.env, etc.
    • They can be loaded into shell automatically via some other tool, your choice. I use https://direnv.net/ for this (which @rhysyngsun suggested) and have been very happy with it.

Copy link
Contributor

@jonkafton jonkafton Sep 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, agree - all of these ended up being public, so can live in the committed env files.

This file was deleted.

5 changes: 1 addition & 4 deletions frontends/main/src/components/MITLogoLink/MITLogoLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@ import React from "react"
import Image from "next/image"
import defaultLogo from "../../../public/mit-logo-learn.svg"

const PUBLIC_URL = process.env.NEXT_PUBLIC_PUBLIC_URL
const HOME_URL = `${PUBLIC_URL}/`

interface Props {
href?: string
className?: string
Expand All @@ -13,7 +10,7 @@ interface Props {

const MITLogoLink: React.FC<Props> = ({ href, logo, className }) => (
<a
href={href ? href : HOME_URL}
href={href}
title="Link to Homepage"
className={className}
// eslint-disable-next-line react/no-unknown-property
Expand Down
5 changes: 1 addition & 4 deletions frontends/main/src/page-components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,6 @@ import * as urls from "@/common/urls"
import React, { FunctionComponent } from "react"
import footerLogo from "../../../public/images/mit-logo-transparent5.svg"

const PUBLIC_URL = process.env.NEXT_PUBLIC_PUBLIC_URL
const HOME_URL = `${PUBLIC_URL}/`

const FooterContainer = styled.div(({ theme }) => ({
display: "flex",
flexDirection: "column",
Expand Down Expand Up @@ -162,7 +159,7 @@ const Footer: FunctionComponent = () => {
</FooterLeftContainer>
<FooterRightContainer>
<FooterLinksContainer>
<FooterLinkComponent text="Home" href={HOME_URL} />
<FooterLinkComponent text="Home" href={urls.HOME} />
<FooterLinkComponent text="About Us" href={urls.ABOUT} />
<FooterLinkComponent
text="Accessibility"
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
],
"scripts": {
"build": "yarn workspace mit-learn run build",
"watch": "yarn workspace mit-learn run watch",
"watch": "yarn workspace main dev",
"style-lint": "yarn workspace frontends run style-lint",
"test": "MITOL_API_BASE_URL=https://api.test.learn.mit.edu yarn workspace frontends global:test",
"test-watch": "MITOL_API_BASE_URL=https://api.test.learn.mit.edu yarn workspace frontends test-watch",
Expand Down