create-application-template 1.1.1 → 1.2.1

package/bin/create-application-template.js

@@ -29,10 +29,62 @@ const run = async () => {
   }
 
   const projectPaths = {
-    root: `./${argv.name}`,
-    get bin() { return `${this.root}/bin` },
-    get env() { return `${this.root}/.env` },
-    get packageJson() { return `${this.root}/package.json` },
+    root: path.resolve('.', argv.name),
+    get bin() { return path.resolve(this.root, 'bin') },
+    get src() { return path.resolve(this.root, 'src') },
+    get ccrate() { return path.resolve(this.root, 'ccrate') },
+    get env() { return path.resolve(this.root, '.env') },
+    get packageJson() { return path.resolve(this.root, 'package.json') },
+    get subDirFiles() {
+      const src = path.resolve(this.root, 'src')
+      const assets = path.resolve(src, 'assets')
+      const styles = path.resolve(src, 'styles')
+      const components = path.resolve(src, 'components')
+
+      const srcDirs = {
+        assets: {
+          faviconIco: path.resolve(assets, 'favicon.ico'),
+          logoSvg: path.resolve(assets, 'logo.svg'),
+        },
+        components: {
+          appSpecTsx: path.resolve(components, 'App.spec.tsx'),
+          appTsx: path.resolve(components, 'App.tsx'),
+        },
+        styles: {
+          logoStyledTs: path.resolve(styles, 'Logo.styled.ts'),
+          themeTs: path.resolve(styles, 'theme.ts'),
+        },
+      }
+
+      const webpackDirs = {
+        webpack: {
+          webpackCommonJs:
+            path.resolve(this.root, 'webpack', 'webpack.common.js'),
+        },
+      }
+
+      const getCcratePaths = (obj) => {
+        return Object.entries(obj).reduce((acc, [key, value]) => {
+          if (typeof value === 'object' && value !== null) {
+            acc[key] = getCcratePaths(value)
+          } else if (typeof value === 'string') {
+            acc[key] = value
+              .replace(/\/src/g, '/ccrate/src')
+              .replace(/\/webpack\//g, '/ccrate/webpack/')
+          }
+
+          return acc
+        }, {})
+      }
+
+      const paths = { ...srcDirs, ...webpackDirs }
+
+      return {
+        src: { ...paths },
+        ccrate: { ...getCcratePaths({ ...paths }),
+        },
+      }
+    },
   }
 
   const isNameDotCommand = (argv.name === '.')
@@ -54,8 +106,24 @@ const run = async () => {
   if (packageJson.hasOwnProperty('repository')) delete packageJson.repository
   if (packageJson.dependencies.hasOwnProperty('yargs')) delete packageJson.dependencies.yargs
 
+  if (argv.ccrate) {
+    console.info('Running CCrATE sequence...')
+
+    const { src, ccrate } = projectPaths.subDirFiles
+
+    execCommand(`cp ${ccrate.assets.faviconIco} ${src.assets.faviconIco}`)
+    execCommand(`cp ${ccrate.assets.logoSvg} ${src.assets.logoSvg}`)
+    execCommand(`cp ${ccrate.components.appSpecTsx} ${src.components.appSpecTsx}`)
+    execCommand(`cp ${ccrate.components.appTsx} ${src.components.appTsx}`)
+    execCommand(`cp ${ccrate.styles.logoStyledTs} ${src.styles.logoStyledTs}`)
+    execCommand(`cp ${ccrate.styles.themeTs} ${src.styles.themeTs}`)
+
+    execCommand(`cp ${ccrate.webpack.webpackCommonJs} ${src.webpack.webpackCommonJs}`)
+  }
+
   execCommand(`rm ${projectPaths.packageJson}`)
   execCommand(`rm -rf ${projectPaths.bin}`)
+  execCommand(`rm -rf ${projectPaths.ccrate}`)
 
   try {
     await writeFile(projectPaths.packageJson, JSON.stringify(packageJson, null, 2), {

package/ccrate/src/assets/logo.svg

@@ -0,0 +1,14 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#e2b432" height="200px" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
+  <g id="SVGRepo_bgCarrier" stroke-width="0"/>
+  <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+  <g id="SVGRepo_iconCarrier">
+    <path d="M478.13,203.97h-16.107v-3.259c0-15.747-12.811-28.558-28.558-28.558c-15.747,0-28.558,12.811-28.558,28.558v3.259 H107.092v-3.259c0-3.325-0.577-6.516-1.626-9.486l123.892-45.886c7.378,6.524,17.063,10.496,27.663,10.496 c12.869,0,24.395-5.847,32.072-15.021l60.754,26.415c1.325,0.575,2.704,0.849,4.061,0.849c3.937,0,7.688-2.294,9.359-6.135 c2.246-5.166-0.121-11.174-5.287-13.42l-59.994-26.084c0.558-2.72,0.852-5.536,0.852-8.418c0-19.541-13.473-35.995-31.617-40.559 V33.445c0-5.633-4.567-10.199-10.199-10.199c-5.633,0-10.199,4.566-10.199,10.199v48.956c0,5.633,4.566,10.199,10.199,10.199 c11.782,0,21.369,9.564,21.414,21.337l-14.288-6.212c-5.165-2.245-11.174,0.122-13.42,5.287 c-2.246,5.166,0.121,11.174,5.287,13.42l12.688,5.517c-3.363,2.199-7.371,3.489-11.68,3.489c-11.811,0-21.418-9.608-21.418-21.418 c0-5.633-4.566-10.199-10.199-10.199s-10.199,4.566-10.199,10.199c0,4.881,0.849,9.566,2.393,13.924L90.772,174.915 c-3.711-1.768-7.861-2.761-12.238-2.761c-15.747,0-28.558,12.811-28.558,28.558v3.259H33.87C15.194,203.97,0,219.342,0,238.236 v216.648c0,18.676,15.194,33.87,33.87,33.87H478.13c18.676,0,33.87-15.194,33.87-33.87V238.236 C512,219.342,496.806,203.97,478.13,203.97z M425.307,200.712c0-4.499,3.661-8.159,8.159-8.159c4.499,0,8.159,3.659,8.159,8.159 v3.259h-16.319V200.712z M70.375,200.712c0-4.499,3.66-8.159,8.159-8.159c4.499,0,8.159,3.659,8.159,8.159v3.259H70.375V200.712z M491.602,454.884c0,7.428-6.043,13.471-13.471,13.471H33.87c-7.428,0-13.471-6.043-13.471-13.471V238.236 c0-7.518,6.168-13.868,13.471-13.868H478.13c7.302,0,13.471,6.351,13.471,13.868V454.884z"/>
+    <path d="M93.323,253.238c-5.633,0-10.199,4.566-10.199,10.199v166.247c0,5.633,4.566,10.199,10.199,10.199 c5.633,0,10.199-4.566,10.199-10.199V263.437C103.522,257.804,98.956,253.238,93.323,253.238z"/>
+    <path d="M173.896,253.238c-5.633,0-10.199,4.566-10.199,10.199v166.247c0,5.633,4.566,10.199,10.199,10.199 s10.199-4.566,10.199-10.199V263.437C184.096,257.804,179.529,253.238,173.896,253.238z"/>
+    <path d="M255.49,253.238c-5.633,0-10.199,4.566-10.199,10.199v166.247c0,5.633,4.566,10.199,10.199,10.199 c5.632,0,10.199-4.566,10.199-10.199V263.437C265.689,257.804,261.122,253.238,255.49,253.238z"/>
+    <path d="M337.084,253.238c-5.632,0-10.199,4.566-10.199,10.199v166.247c0,5.633,4.567,10.199,10.199,10.199 s10.199-4.566,10.199-10.199V263.437C347.283,257.804,342.716,253.238,337.084,253.238z"/>
+    <path d="M418.677,253.238c-5.632,0-10.199,4.566-10.199,10.199v166.247c0,5.633,4.567,10.199,10.199,10.199 s10.199-4.566,10.199-10.199V263.437C428.877,257.804,424.309,253.238,418.677,253.238z"/>
+    <path d="M394.611,163.817l-7.068-3.061c-5.167-2.24-11.172,0.136-13.412,5.306c-2.239,5.169,0.137,11.174,5.306,13.412 l7.068,3.061c1.321,0.572,2.695,0.842,4.048,0.842c3.942,0,7.697-2.3,9.365-6.148C402.156,172.06,399.78,166.054,394.611,163.817z"/>
+  </g>
+</svg>

package/ccrate/src/components/App.spec.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+import 'jest-styled-components'
+import { App } from './App'
+
+test('renders title', () => {
+  render(<App />)
+
+  expect(screen).toMatchSnapshot()
+  expect(screen.getByText(/create containerized app template/i)).toBeInTheDocument()
+})

package/ccrate/src/components/App.tsx

@@ -0,0 +1,46 @@
+import { FC } from 'react'
+import { ThemeProvider } from 'styled-components'
+import GlobalStyles from '../styles/Global'
+import theme from '../styles/theme'
+import * as app from '../styles/App.styled'
+import { StyledLogo } from '../styles/Logo.styled'
+import '../styles/env.css'
+import logo from '../assets/logo.svg'
+import { Counter } from './Counter'
+
+export const App: FC = () => {
+  const TemplateLink: FC = () => {
+    return (
+      <app.StyledLink
+        href='https://www.npmjs.com/package/create-application-template'
+        rel='noreferrer'
+        target='_blank'
+      >
+        here
+      </app.StyledLink>
+    )
+  }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyles />
+      <app.StyledContainer>
+        <app.StyledHeader>
+          <h1>Create Containerized App Template</h1>
+          <h2>An app template containerized via Docker!</h2>
+          <h2>Access the CCrATe template <TemplateLink />...</h2>
+        </app.StyledHeader>
+        <app.StyledSection>
+          <code className='card--env'>[NODE_ENV={process.env.NODE_ENV}]</code>
+          <code className='card--env'>[EXAMPLE={process.env.EXAMPLE}]</code>
+        </app.StyledSection>
+        <app.StyledSection>
+          <StyledLogo src={logo} alt='logo'/>
+        </app.StyledSection>
+        <app.StyledSection>
+          <Counter />
+        </app.StyledSection>
+      </app.StyledContainer>
+    </ThemeProvider>
+  )
+}

package/ccrate/src/styles/Logo.styled.ts

@@ -0,0 +1,21 @@
+import { styled, keyframes } from 'styled-components'
+
+const logoAnimation = keyframes`
+  from {
+    transform: rotate(15deg);
+  }
+
+  to {
+    transform: rotate(-15deg);
+  }
+`
+
+export const StyledLogo = styled.img`
+  height: 240px;
+  pointer-events: none;
+  transform-origin: top;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${logoAnimation} 3.5s ease-in-out infinite alternate-reverse;
+  }
+`

package/ccrate/src/styles/theme.ts

@@ -0,0 +1,12 @@
+const theme = {
+  font: 'exo2',
+  colors: {
+    palette: {
+      background: '#182f37',
+      primary: '#e2b432',
+    },
+    get link() { return this.palette.primary },
+  },
+}
+
+export default theme

package/ccrate/webpack/webpack.common.js

@@ -0,0 +1,161 @@
+const fs = require('fs')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const Dotenv = require('dotenv-webpack')
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
+const CopyPlugin = require('copy-webpack-plugin')
+const env = require('./utilities/env')
+const getPaths = require('./utilities/getPaths')
+const createEnvironmentHash = require('./utilities/createEnvironmentHash')
+const generateAssetManifest = require('./utilities/generateAssetManifest')
+
+// styles regexps
+const reCss = /\.css$/
+const reCssModule = /\.module\.css$/
+
+module.exports = (webpackEnv) => {
+  const { BUNDLER_ENV } = webpackEnv
+  const { INLINE_SIZE_LIMIT } = process.env
+
+  const paths = getPaths({ BUNDLER_ENV })
+
+  // NOTE it's preferable to isolate settings in appropriate 
+  // files, but it's not always practical, hence "isProduction"
+  const isProduction = (BUNDLER_ENV === env.BUNDLER_ENV.prod)
+  const isDevelopment = (BUNDLER_ENV === env.BUNDLER_ENV.dev)
+
+  const styleLoaders = [
+    ...(isProduction
+      ? [{
+        loader: MiniCssExtractPlugin.loader,
+        options: {
+          // css is located in 'static/css', use publicPath
+          // to locate index.html directory relative to css
+          publicPath: '../../',
+        },
+      }]
+      : ['style-loader']
+    ),
+  ]
+
+  return {
+    entry: paths.src.indexTsx,
+    resolve: {
+      // can now leave off extentions when importing
+      extensions: ['.tsx', '.jsx', '.ts', '.js'],
+    },
+    watchOptions: {
+      ignored: ['**/node_modules'],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(ts|js)x?$/,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                plugins: [
+                  // for use with ReactRefreshWebpackPlugin
+                  isDevelopment
+                    && require.resolve('react-refresh/babel'),
+                ].filter(Boolean),
+                cacheDirectory: true,
+                cacheCompression: false,
+                compact: isProduction,
+              },
+            },
+          ],
+        },
+        {
+          test: reCss,
+          use: [...styleLoaders, 'css-loader'],
+          exclude: reCssModule,
+        },
+        {
+          test: reCssModule,
+          use: [
+            ...styleLoaders,
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+                modules: true,
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
+          type: 'asset/resource',
+        },
+        {
+          test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
+          type: 'asset',
+          parser: {
+            dataUrlCondition: {
+              maxSize: parseInt(INLINE_SIZE_LIMIT || 10000),
+            },
+          },
+        },
+      ],
+    },
+    output: {
+      path: paths.build,
+      pathinfo: isProduction ? false : true,
+      filename: paths.static.js.filenameJs,
+      chunkFilename: paths.static.js.chunkFilenameJs,
+      asyncChunks: true,
+      clean: true,
+      assetModuleFilename: paths.static.media.filenameExt,
+      publicPath: '',  // public url of build, use in build/index.html
+    },
+    cache: {  // used in development mode
+      type: 'filesystem',
+      version: createEnvironmentHash({ processEnv: process.env }),
+      cacheDirectory: paths.appWebpackCache,
+      store: 'pack',
+      buildDependencies: {
+        defaultWebpack: ['webpack/lib/'],
+        config: [__filename],
+        tsconfig: [paths.tsconfigJson, paths.jsconfigJson].filter(file =>
+          fs.existsSync(file)
+        ),
+      },
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: paths.src.indexHtml,
+        favicon: paths.src.assets.faviconIco,
+        title: 'Create Containerized App Template',
+        ...(isProduction && {
+          minify: {
+            removeComments: true,
+            collapseWhitespace: true,
+            removeRedundantAttributes: true,
+            useShortDoctype: true,
+            removeEmptyAttributes: true,
+            removeStyleLinkTypeAttributes: true,
+            keepClosingSlash: true,
+            minifyJS: true,
+            minifyCSS: true,
+            minifyURLs: true,
+          },
+        }),
+      }),
+      new WebpackManifestPlugin({
+        fileName: 'asset-manifest.json',
+        publicPath: '/',
+        generate: generateAssetManifest,
+      }),
+      new CopyPlugin({
+        patterns: [{
+          from: paths.src.public,
+          to: paths.build,
+        }],
+      }),
+      new Dotenv(),
+    ],
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-application-template",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "provides a configured application template for you to build upon",
   "main": "index.js",
   "bin": {

package/src/components/App.tsx

@@ -5,7 +5,7 @@ import theme from '../styles/theme'
 import * as app from '../styles/App.styled'
 import { StyledLogo } from '../styles/Logo.styled'
 import '../styles/env.css'
-import cat from '../assets/cat.svg'
+import logo from '../assets/logo.svg'
 import { Counter } from './Counter'
 
 export const App: FC = () => {
@@ -35,7 +35,7 @@ export const App: FC = () => {
           <code className='card--env'>[EXAMPLE={process.env.EXAMPLE}]</code>
         </app.StyledSection>
         <app.StyledSection>
-          <StyledLogo src={cat} alt='logo'/>
+          <StyledLogo src={logo} alt='logo'/>
         </app.StyledSection>
         <app.StyledSection>
           <Counter />