Front-end Devbox Essentials

Over the years, front-end code development has evolved a lot. Nowadays, frameworks like React, Angular, Vue, Svelte, etc provide a more structured way of building an immersive frontend experience for users. This has led to a substantial amount of code being written on the front end of the application. Having a lot of code on the front end can make it hard to manage. This problem becomes even more aggravated while working in big teams.
Setting up a common dev box configuration for the team can help in collaborating effectively and crafting production-ready code.

This configuration can be categorized into 2 categories :

1. Planning
2. Development

Planning

This phase includes all the setups a team needs to do to ensure the development experience is smooth. It generally includes the following -

• Setting up an IDE
  • Should be tailored for HTML, CSS, Javascript
  • Should support quick navigation and intellisense
• Finalising collaboration tools to be used for working. Especially explore various tools for screen sharing as pairing on the work needs to be effective. Few of the options are Zoom, Slack huddle etc.
• Setting up the repo
  • Employ git for version control
• Decide which code formatter (e.g. Prettier) are you going to use and make sure all the IDEs being used by your team has that formatter's plugin installed in their IDE. This will maintain unifromity irrespective of the different IDEs.
• Decide which code linter (e.g. ESlint, SonarQube etc.) are you going to use and make sure all the IDEs being used by your team has that formatter's plugin installed in their IDE. This will maintain coding standards uniform irrespective of the different IDEs.
• Have IDE specific config to ensure uniformity. You can refer this for VScode or you refer this for Intellij.
• Web browsers (Chrome, Brave)
  • Decide web browsers which provide better debugging tools and extensions for react apps such as React Dev Tools and Redux DevTools.

Development

This phase includes following -

• Decide appropriate build tools (e.g. Webpack, Rollup, and Vite)
  • Simplified setups are available in frameworks like CRA and NextJS, Gatsby following React conventions.
  • Must have tasks/scripts setup in your package.json. Some of the important scripts include build, test, local server etc.
  • Adding pre-commit hooks to have quicker feedback loop on code analysis, running unit tests before committing etc. You can use husky or pre-commit for this.
  • Good to have on local dev box setup, but must have on CI setup.
• Decide common package manager for a team (e.g. npm, yarn)
  • Having multiple package managers may result in package conflicts
• Decide Test Framework
  • Choose a testing framework like Jest and React Testing Library(RTL) for comprehensive testing. Use RTL so that it helps your team in writing behaviour driven tests.
  • Ensure the framework has good mocking and stubbing support along with an extensive set of “matchers” for writing assertions
  • Also decide on api mocking framework. You can use msw/nock etc. for this purpose.
• Decide API mocking framework
  • It helps to mock API so that front-end does not rely on back-end API completion. You can use msw/miragejs etc. for this purpose.
• Type Checker
  • Consider adding Typescript to your project for having type checking capabilities
  • Ensure your IDE has plugins installed to get real time feedback
• Containerize your application
  • Helps in making your app independent of local setup
  • Also helps in setting up app locally for new team members
• Accessibility Tools
  • Prioritize accessibility by incorporating tools like the ESLint accessibility plugin, axe-core
  • Also use browser tools such as WAVE or LERA etc.

This comprehensive Dev box setup ensures a smooth and efficient front-end development workflow, fostering collaboration, code quality, and adherence to best practices.