Template Customization

Learn how to customize templates to fit your specific needs

Customization Basics

Templates provided by create-awesome-node-app are designed to be customizable. This guide will show you how to modify templates to suit your specific requirements, from simple configuration changes to more advanced customizations.

Project Structure Customization

After creating a project with create-awesome-node-app, you can modify its structure to better suit your needs. Here are some common customizations:

Reorganizing Components

You can reorganize the components directory structure to better match your project's architecture.

Adding New Directories

Create additional directories for features, contexts, hooks, or other code organization patterns.

Modifying the App Structure

Adjust the app directory structure to implement your desired routing and page organization.

Customizing Public Assets

Add or modify files in the public directory to include your own static assets.

Configuration Customization

Templates come with default configurations that you can modify to match your requirements:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    
    /* Paths */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

You can customize the TypeScript configuration to adjust compiler options, add path aliases, or change included files.

Dependency Customization

You can add, remove, or update dependencies to tailor the project to your needs:

# Add a new dependency
npm install axios

# Add a development dependency
npm install --save-dev jest @testing-library/react

# Update a dependency
npm update react

# Remove a dependency
npm uninstall unused-package

After modifying dependencies, you may need to update your project's configuration files to properly integrate the new packages.

Adding Extensions After Project Creation

If you want to add extensions to an existing project created with create-awesome-node-app, you have a few options:

Manual Integration: You can manually add the files and dependencies from the extension to your project.
Create a New Project: Create a new project with the same template and the desired extensions, then migrate your code.
Use Git: If your project is a Git repository, you can create a new branch, add the extension, and then merge the changes.

Note

Currently, create-awesome-node-app doesn't support adding extensions to existing projects through the CLI. This feature may be added in future versions.

Template-Specific Customization

Different templates have specific customization options. Here are some examples:

React Vite Boilerplate Customization

The React Vite template provides several customization options:

Routing: The template uses React Router. You can modify the routes in src/App.tsx or create a dedicated router configuration.
State Management: Add your preferred state management library using extensions like Redux, Zustand, or Jotai.
Styling: The template supports CSS modules by default. You can add other styling solutions like Tailwind CSS or styled-components.
API Integration: Add Axios or other HTTP clients for API integration.

// Example of customizing React Router in App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import Contact from './pages/Contact'
import NotFound from './pages/NotFound'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  )
}

Advanced Customization

For more advanced customization needs, you can modify the core functionality of the template:

Custom Build Configurations

You can customize the build process by modifying the build configuration files:

React Vite: Modify vite.config.ts to customize the build process.
Next.js: Customize next.config.js to adjust Next.js behavior.
NestJS: Modify nest-cli.json and tsconfig.build.json for build customization.

// Example of customizing Next.js config
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['example.com', 'cdn.example.com'],
  },
  experimental: {
    serverActions: true,
  },
  async redirects() {
    return [
      {
        source: '/old-page',
        destination: '/new-page',
        permanent: true,
      },
    ]
  },
}

module.exports = nextConfig

Custom Webpack Configurations

For templates that use Webpack, you can customize the Webpack configuration:

// Example of customizing Next.js Webpack config
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Add a custom webpack plugin
    config.plugins.push(new webpack.IgnorePlugin({
      resourceRegExp: /^./locale$/,
      contextRegExp: /moment$/,
    }))
    
    // Add a custom loader
    config.module.rules.push({
      test: /.svg$/,
      use: ['@svgr/webpack'],
    })
    
    return config
  },
}

module.exports = nextConfig

Environment Variables

Customize your application's behavior using environment variables:

# .env file example
API_URL=https://api.example.com
DEBUG=true
NODE_ENV=development

# For client-side variables in Next.js
NEXT_PUBLIC_SITE_URL=https://example.com

Access environment variables in your code:

// In Node.js (server-side)
const apiUrl = process.env.API_URL

// In React (client-side)
// Note: In Vite, use import.meta.env instead of process.env
const siteUrl = import.meta.env.VITE_SITE_URL

// In Next.js (client-side)
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL

Back to Contributing Advanced Usage