DEV Community

loading...

[2020 ver.] Steps to build a modern front-end environment

pkino
Software engineer for developing new products and services
Updated on ・2 min read

TL;DR

As I work in a department that develops new services and products, I frequently have to set up new environments in my work. For that reason, I would like to summarize the steps I always take.

This is one for those who use Gatsby

You can perform steps 1-3 of the following steps with a single command.
One of the React frameworks Gatsby (the official React page uses this framework as well) has a package called "starter" that allows you to build an environment with just one command. You can use the package to build an environment with a single command.

I have created a starter to build an environment in steps 1-3
gatsby-starter-typescript-sass

Procedure

We recommend using libraries such as React and Vue or Sass, but even if you don't, the following steps may be applicable.

  1. create a Git repository
  2. introduction of TypeScript
  3. introduction of ESLint Prettier
  4. perform various settings of VSCode and save the configuration file
  5. CI/CD Settings

The reasons for each step

2. Introduction to TypeScript

Types can prevent useless errors and make completion useful.

3. Introduction to ESLint and Prettier

It automates the rules and formatting of the code creation. We use it because we want to reduce the number of things that don't need to be done by humans. (You can set it for VSCode.) However, to ensure that the Linter runs, you can use husky to precommit the Linter to run it.

4. Configure VSCode settings and save the configuration file

As mentioned earlier, you can set up Linter and others to run on onSave and so on. As mentioned earlier, you can configure the settings to run onSave`, etc. If you save the settings to a workspace, you can share them with other developers.

5. CI/CD Settings

By implementing a build/deploy mechanism that allows you to build/deploy at the same time you commit to GitHub, you can save yourself the trouble of doing that every time you develop.

Notes

  • If you need to build without using libraries, etc., you need to take advantage of tools such as percel.

Discussion (0)