Development Environment - daniellok/decrypto GitHub Wiki
- Language: JS (Node.js) with Flow
- Framework: Express
- Client-server communication: Websockets (Socket.IO)
- Language: JSX with Flow
- Framework: React
The root folder simply houses all the config files we use for development, e.g. package.json
, webpack.config.js
, etc. We probably won't need to edit anything in here, unless we're installing packages or something.
Currently there isn't much in here but this will be where all our React components are stored. All the code in here will eventually be compiled and bundled into a single main.js
file (see Compiled Client Code below).
Similarly, this is where all our server code will go. Our Express app (/src/server/app.js
) is in this folder.
For stuff that we want to share between both the client and server. An example might be shared types/util functions.
This folder is for all the assets we want to be available on the client-side. The Express app serves everything inside the dist folder, so for example, if we had a file called file.jpg
in this folder, we would be able to access it by going to http://localhost:3000/file.jpg
. Currently there are two main files here: index.html
(our landing page), and main.js
(all our compiled React code that index.html
uses).
Webpack (docs, but not super helpful)
- In the past, writing JS on the web mean either writing JS, or importing
.js
files, between<script>
tags in HTML. This causes a lot of problems: for each third-party library we add, we need to add another<script>
tag, import sizes are not optimized which can cause slow loading times, modular development is a bit harder since you might run into problems with scope collision, etc. - Nowadays with
npm
, we're very used to writing client-side code in the modular manner that we write most other software projects. Webpack's job is to look at all the code we write insrc/client
, figure out the dependency graph, bundle our code all together into onemain.js
file, and optimize the bundle size. - Every time you want to see your changes to client code, you'll need to run
npm run build
in terminal. Under the hood, this runs webpack and outputs a file in/dist
. You can take a look at thescripts
section in/package.json
's for more details.
Babel (docs)
- The JS language is constantly evolving and adding new features, but browsers do not necessarily catch up as quickly. Babel is a compiler that converts new JS syntax (ES6+) into old JS syntax. It also handles non-JS syntax like React's JSX.
- We don't directly call Babel—we simply instruct Webpack to use it when bundling.
Prettier (docs)
- This is a code formatting tool. Instead of manually following style guides, we can just run
prettier
before we commit the code, and everything will be formatted nicely.
Flow (docs, see "Type Annotations" section for syntax)
- Flow is a static type-checker and a way to write type annotations in our code. JS (and the web in general) is notorious for everything being untyped and hard to figure out. With Flow, we can write stuff like:
type Props = {
name: string,
};
function MainPage(props: Props): React.Node {
const { name } = props;
return (
<div>
<h1>Hello {name}</h1>
</div>
);
}
- Notice that we can declare our own custom types! This is great for React, because we no longer have to guess/remember what kind of props we're passing in.
- If you're using VSCode, there's an extension available that will tell you real-time if anything is typed incorrectly. If not, you can just run
flow
in the command line and it will give you any warnings/errors. - Note: in order for the typechecker to work, we need to write
// @flow
at the top of all our files.
- When we're developing/iterating quickly, we don't want to be manually running all these commands every time we make a small change. Nodemon is a program that watches our project directories for changes and automatically runs the commands for us every time it detects a change.
- To use this in server development, run
npm run start
. Nodemon will automatically restart the webserver every time you make a change to it. - To use this in client development, run
npm run watch-client
. Nodemon will run webpack and rebuild themain.js
file whenever there's a change in our React code.