Modern Web-dev Setup #1

Our team made our web application's frontend with html/css/js and I've been developing it for a while.

As We're gonna take the service to the next phase, we decided to evolve the way how we develop the web software too.

This is the wrap-up how I swiftly built the environment with the four tagged technologies above.

My Developing environment follows.

macOS 10.15.2
Visual Studio Code 1.49.3

Okay, let's begin then.

First of all, open your terminal and make a folder for your new application.

~$ mkdir new-app && cd new-app
~/new-app$ mkdir back front && touch docker-compose.yml
~/new-app$ cd front
~/new-app/front$ touch Dockerfile

For your information, we do not set up backend in this article. I would show the know-how later on.

Then we should run the command following, so as to get an app created with Next.js and Typescript!

(I personally prefer using 'yarn')

~new-app/front$ yarn create next-app --example with-typescript main

if 'tsconfig.json' is not automatically added_

touch tsconfig.json

Nice.
It's turn to write codes to docker-related files and compose docker.

docker-compose.yml

version: "3"
services:
  front:
    container_name: [your-app-name]-front
    build:
      context: ./front
      dockerfile: Dockerfile
    command: sh -c "cd /front/main && yarn dev"
    ports:
      - "3000:3000"
    volumes:
      - ./front:/front
    tty: true

Dockerfile

FROM node:14.15.0
RUN mkdir /front
WORKDIR /front
EXPOSE 3000

(The node version above is the latest version recommended by Node.js® for most users when I write this article. Feel free to go check https://nodejs.org/en/ and rewrite it with the latest version when you make your application.)

At last it's time to compose docker container!
Do NOT forget to go back to root directory.

~/new-app$ docker-compose up --build -d

(for your information, '--build -d' means 'build(--build) in the back(-d)')

Wait a little bit until the container is ready.

At last it's time to type 'localhost:3000' in your favorite browser to see the first website you made with modern setup.

If this page appeared, you made it! Congrats!!

optional

If you want to use styled-components, please run the two commands followed.

yarn add styled-components
yarn add --dev @types/styled-components

optional extensions recommendation

• ESLint
• Prettier
• vscode-styled-components
• Docker
• GitLens (if you are not a lone wolf)

optional recommended setting if you use 'prettier'

We have to make a setting file for prettier first.

~new-app/front/name-your-app$ touch .prettierrc

Then we need to add these lines following to '.prettierrc and save it.

{
  "arrowParens": "always",
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

===

I referred to this Japanese article.

For more details, please visit Next.js Official Docs.

If you found any skeptical point, or any thing can be improved, please kindly leave a comment informing us.

I'm also still learning.

===

In #2, I plan to write some about how to set up global css using Mayer Reset, and also make some adjustment to directory structure.

Looking forward to seeing you soon.

Thank you for reading, and happy coding:)