Migrate from React 16 to 17, from create-react-app to nextjs, and to

most recent version of Phaser

README.md

@@ -2,7 +2,7 @@
 
 Covey.Town provides a virtual meeting space where different groups of people can have simultaneous video calls, allowing participants to drift between different conversations, just like in real life.
 Covey.Town was built for Northeastern's [Spring 2021 software engineering course](https://neu-se.github.io/CS4530-CS5500-Spring-2021/), and is designed to be reused across semesters.
-You can view our reference deployment of the app at [app.covey.town](https://app.covey.town/), and our project showcase ([Spring 2022](https://neu-se.github.io/CS4530-Spring-2022/assignments/project-showcase), [Spring 2021](https://neu-se.github.io/CS4530-CS5500-Spring-2021/project-showcase)) highlight select student projects.
+You can view our reference deployment of the app at [app.covey.town](https://app.covey.town/), and our project showcase ([Fall 2022](https://neu-se.github.io/CS4530-Fall-2022/assignments/project-showcase), [Spring 2022](https://neu-se.github.io/CS4530-Spring-2022/assignments/project-showcase), [Spring 2021](https://neu-se.github.io/CS4530-CS5500-Spring-2021/project-showcase)) highlight select student projects.
 
 ![Covey.Town Architecture](docs/covey-town-architecture.png)
 
@@ -39,7 +39,7 @@ The backend will automatically restart if you change any of the files in the `to
 
 ### Configuring the frontend
 
-Create a `.env` file in the `frontend` directory, with the line: `REACT_APP_TOWNS_SERVICE_URL=http://localhost:8081` (if you deploy the towns service to another location, put that location here instead)
+Create a `.env` file in the `frontend` directory, with the line: `NEXT_PUBLIC_TOWNS_SERVICE_URL=http://localhost:8081` (if you deploy the towns service to another location, put that location here instead)
 
 ### Running the frontend
 

frontend/.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
     'prettier',
     'plugin:react-hooks/recommended',
     'plugin:react/recommended',
+    'plugin:@next/next/recommended'
   ],
   settings: {
     react: {

frontend/Dockerfile

@@ -1,5 +1,5 @@
-FROM node:16-buster-slim
-RUN apt-get update || : && apt-get install python build-essential -y && rm -rf /var/lib/apt/lists/*
+FROM node:18-buster-slim
+RUN apt-get update || : && apt-get install python3 build-essential libpango1.0-dev libcairo2-dev libjpeg-dev libgif-dev -y && rm -rf /var/lib/apt/lists/*
 RUN mkdir -p /usr/src/app
 WORKDIR /usr/src/app
 COPY ./ /usr/src/app
@@ -13,8 +13,7 @@ ENV NODE_OPTIONS --max_old_space_size=2048
 ENV NODE_ENV production
 ENV PORT 80
 EXPOSE 80
-ARG REACT_APP_TOWNS_SERVICE_URL
-ENV REACT_APP_TOWNS_SERVICE_URL=${REACT_APP_TOWNS_SERVICE_URL}
+ARG NEXT_PUBLIC_TOWNS_SERVICE_URL
+ENV NEXT_PUBLIC_TOWNS_SERVICE_URL=${NEXT_PUBLIC_TOWNS_SERVICE_URL}
 RUN npm run build
-RUN npm install -g serve
-CMD [ "serve", "-s", "build" ]
+CMD [ "npm", "start" ]

frontend/README.md

@@ -2,6 +2,6 @@
 
 Please see the `README.md` in the repository base for information about this project.
 
-This frontend is created using the [create react app](https://create-react-app.dev) toolchain. You
-can start a development server by running `npm start`. To create a production build, run
+This frontend is created using the [nextjs](https://nextjs.org) toolchain. You
+can start a development server by running `npm run dev`. To create a production build, run
 `npm run build`.

frontend/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.