-
Notifications
You must be signed in to change notification settings - Fork 0
3. File Structure
William Kwok edited this page Mar 17, 2020
·
3 revisions
For the most part, the important files are there. The tree command I use to generate this nicely formatted list makes the alphabetical ordering a bit strange, but one thing to note is that I generally put things that are more commonly referred to, static things, or data/repeated things in a folder starting with _ to keep it at the top of the list in the file explorer.
I will write comments about a few things.
.
├── Dockerfile // This Dockerfile is used for the nodejs container
├── README.md
├── _dev // Developer dependencies that have no place EXCEPT for supporting development
│ └── imageImports.d.ts // This is a type declaration file that stopped vscode from complaining at me for importing images and pdfs
├── _nginx // All the files regarding the nginx docker container and configuration
│ ├── Dockerfile // This Dockerfile is used for the nginx container
│ └── nginx.conf
├── app.ts // This is the SERVER injection point (calling `npm run dev` will actually call this file under the hood.
├── components // These are all the components that are used throughout the pages. The Page itself is a component that is reused between different pages.
│ ├── ContentBox
│ │ ├── ContentBox.css
│ │ └── ContentBox.tsx
│ ├── Fonts
│ │ └── Fonts.ts // Fonts is used for loading in the fonts quickly and seamlessly to the application.
│ ├── NavigationBar
│ │ ├── NavigationBar.css
│ │ └── NavigationBar.tsx
│ ├── Page
│ │ ├── HeaderBar
│ │ │ ├── HeaderBar.css
│ │ │ └── HeaderBar.tsx
│ │ ├── HelmetContent
│ │ │ └── HelmetContent.tsx // Things that should be within the `<head>` content, like metadata.
│ │ ├── Page.css
│ │ └── Page.tsx
│ ├── _assets // I considered assets to be components as well.
│ │ ├── electionsImages
│ │ │ └── 2019
│ │ │ ├── alejandro.jpg // Try to make images as small as possible (other wiki post on that)
│ │ │ ├── caseytran.jpg
│ │ │ ├── shrutir.jpg
│ │ │ ├── ...
│ │ │ └── williamkwok.jpg
│ │ ├── navbarImages
│ │ │ └── IUGA-header-image.jpg
│ │ └── site
│ │ ├── IUGA-Monogram.jpg
│ │ ├── bbq_banner.jpg
│ │ └── icon.png
│ └── _data // **ALL THE DATA IS IN HERE!** If you just want to change information that appears on the site, you should mostly only have to modify the files in this folder!
│ ├── constantsToChangeEachYear.ts // constants to change each year lol
│ ├── electionData.ts // all the election data
│ ├── headerBarContent.ts
│ ├── homePageData.ts
│ └── navigationBarLinks.ts
├── dist // Ignore this. This folder is generated by the build process and it didn't gitignore correctly
│ ├── app.js
│ └── app.js.map
├── docker-compose.yml
├── next.config.js // Configuration file for next js to use during the compilation process
├── nodemon.json // Configuration file for nodemon to know what to do when ran. This is used when running the DEVELOPMENT mode.
├── package.json // If you don't know what this is, you have a lot to learn
├── pageStyles // These are styles used throughout individual pages.
│ └── index.css
├── pages // The individual pages.
│ ├── _app.tsx // This app is NOT the same as the other app file. This is used as the injection point for NextJS pages by default, and MUST be named exactly `_app.tsx`.
│ ├── elections.tsx
│ └── index.tsx
├── tsconfig.json // Configuration for typescript compilation
└── tsconfig.server.json // Configuration for the typescript server's compilation process.
You will want to look into the structure of the custom server typescript example that NextJS provides.