Experiment with your own web app tech stack

Andy Nanopoulos • March 1, 2023 • 4 min read

learn-web-tech-with-create-yourstack-app

When you try to scaffold a web app with generators such as create-react-app, the results are more or less a black box. Experimenting becomes a challenge. If you try to start your own web app from scratch and start npm installing different packages, it's hard to iterate by uninstalling, reinstalling, and configuring those packages.

I wrote create-yourstack-app as an alternative to create-react-app and similar generators. It is designed for experimentation. This web app generator is based on a recipe which allows you to easily try new packages or new package versions to build out a Hello World version of your web app.

The first step in generating your web app is to select and test your technology stack. create-yourstack-app follows this pattern:

  • Copy all of the files under the 'src/preNpmCopyFiles' directory to the output directory
  • 'Exec' all of the commands in the 'src/npm.json' file
  • Copy all of the files under the 'src/postNpmCopyFiles' directory to the output directory

Select the use cases for your app and group the packages together in the npm.json file. Here is an example snippet:

  {
    "message": "Installing support for blog posts",
    "execs":[
      "npm install gray-matter@4.0.x",
      "npm install react-markdown@8.0.x",
      "npm install remark-gfm@3.0.x",
      "npm install rehype-raw@6.1.x",
      "npm install @tailwindcss/typography@0.5.x -D",
      "npm install reading-time@1.5.x"
    ]
  },
  {
    "message": "Installing support for generating a sitemap",
    "execs":[
      "npm install mustache@4.2.x"
    ]
  }

This technique reminds you what each package will be used for and at what major and minor version you are testing.

Once you have completed your customizations, you are ready to iterate and test a 'Hello-world' version of your web app:

cd create-yourstack-app
node bin/index.cjs -n Hello-world -o ~/temp
npm run build
npm run start

As you experiment, delete the output, modify the recipe, and regenerate the basic web app. When you are satisfied, branch this version of the generator and finish building out your real web app.

create-yourstack-app comes pre-configured with a tech stack that you can use as a starting point. It produces a blogging app based on Next JS that you can deploy on Vercel or AWS Amplify and is SEO friendly. My web app was produced using this tool: andynanopoulos.com

Sample Tech Stack

TechPurpose
NextFramework for building React-based web apps
ReactFramework for creating component-based UIs
tailwindcssCSS framework
react-markdownUsed to render blog posts
gray-matterExtracts meta-data from markdown files
reading-timeEstimates the amount of time to read a markdown file
storybookFramework from manually testing and documenting React components
cypressEnables BDD testing
@badeball/cypress-cucumber-preprocessorEnables BDD testing
jestProvides framework for unit testing
eslintEnforces a coding standard
prettierEnforces a coding standard
huskyProvides git hooks
mermaidProvides diagrams for blog posts

Sample Tech Stack Features

  • Web App
    • Next JS 13
      • /app Directory
      • SSR
    • Sample blogging app - no CMS required!
    • Sticky header, floating footer
  • UI Components
    • React 18
    • Atomic UI directory structure
  • CSS
    • Tailwind CSS
    • Tailwind Typography used for rendering Markdown (example modifications in tailwind.config.js)
  • SEO
    • tags including "og" and "twitter"
    • Article Structured Data for blog posts
    • Static routes via Next SSR
    • Sitemap generator
  • Testing
    • Cypress for end-to-end BDD testing using Cucumber pre-processor
    • Jest and React Testing Library for component and utility testing
    • Code Coverage results in /build directory
    • Storybook for manual component testing and documentation
    • Pre Commit and Pre Push git hooks
  • Coding Standards
    • /app and /src files checked with ESLint and Prettier
NextPrev