Merge pull request #2 from alexlee-dev/v0.2.0

📦 v0.2.0

CHANGELOG.md

@@ -5,6 +5,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.0] - 2020-06-03
+
+### ✨ App Content
+
+### Added
+
+- README
+- CONTRIBUTING
+
+### Changed
+
+- Content on `<App />`
+
+### Removed
+
+### Fixed
+
 ## [0.1.0] - 2020-06-03
 
 ### 🚀 First Happy Path Solution

CONTRIBUTING.md

@@ -0,0 +1,36 @@
+# Contributing Guide
+
+- Contributing to **create-mern-application** is fairly easy. This document shows you how to get started.
+
+## Submitting changes
+
+- Fork the repo
+  - <https://github.com/alexlee-dev/create-mern-application/fork>
+- Check out a new branch based and name it to what you intend to do:
+  - Example:
+    ```
+    $ git checkout -b BRANCH_NAME
+    ```
+    If you get an error, you may need to fetch first by using
+    ```
+    $ git remote update && git fetch
+    ```
+  - Use one branch per fix / feature
+- Commit your changes
+  - Please provide a git message that explains what you've done
+  - Please make sure your commits follow the [conventions](https://gist.github.com/robertpainsi/b632364184e70900af4ab688decf6f53#file-commit-message-guidelines-md)
+  - Commit to the forked repository
+  - Example:
+    ```
+    $ git commit -am 'Add some fooBar'
+    ```
+- Push to the branch
+  - Example:
+    ```
+    $ git push origin BRANCH_NAME
+    ```
+- Make a pull request
+  - Make sure you send the PR to the <code>fooBar</code> branch
+  - Travis CI is watching you!
+
+If you follow these instructions, your PR will land pretty safely in the main repo!

README.md

@@ -1,2 +1,88 @@
-# create-mern-application
-A bootstrapper for creating a MERN application.
+<p align="center">
+  <a href="https://github.com/alexlee-dev/create-mern-application" rel="noopener">
+ <img width=256px height=256px src="https://res.cloudinary.com/alexlee-dev/image/upload/v1591215153/create-mern-application/create-mern-application.svg" alt="Logo"></a>
+</p>
+
+<h3 align="center">create-mern-application</h3>
+
+<div align="center">
+
+[![NPM](https://img.shields.io/npm/v/create-mern-application.svg)](https://www.npmjs.com/package/create-mern-application)
+[![GitHub Issues](https://img.shields.io/github/issues/alexlee-dev/create-mern-application)](https://github.com/alexlee-dev/create-mern-application/issues)
+[![Dependencies](https://img.shields.io/david/alexlee-dev/create-mern-application)](https://github.com/alexlee-dev/create-mern-application)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)
+
+</div>
+
+---
+
+<p align="center">A bootstrapper for creating a MERN application.
+    <br> 
+</p>
+
+## 📝 Table of Contents
+
+- [About](#about)
+- [Getting Started](#getting_started)
+- [Usage](#usage)
+- [Built Using](#built_using)
+- [Authors](#authors)
+- [Acknowledgments](#acknowledgement)
+
+## 🧐 About <a name = "about"></a>
+
+I've made a lot of MERN applications lately, and I want to make that process easier for myself and for others, by creating a bootstrapper that mirrors the simplicity of starting a new application with [create-react-app](https://github.com/facebook/create-react-app). Thus, **create-mern-application** was born.
+
+### What is MERN?
+
+- **M**ongoDB - [MongoDB](https://www.mongodb.com/) - Database
+- **E**xpressJS - [ExpressJS](https://expressjs.com/) - BackEnd
+- **R**eact - [React](https://reactjs.org/) - FrontEnd
+- **N**ode - [Node](https://nodejs.org/) - Runtime Environment
+
+## 🏁 Getting Started <a name = "getting_started"></a>
+
+### Prerequisites
+
+- Node (>= v10.0.0)
+- NPM
+
+### OS
+
+- [x] MacOS
+- [x] Linux
+- [x] Windows
+
+### Installing
+
+`npm install -g create-mern-application`
+
+## 🎈 Usage <a name="usage"></a>
+
+`create-mern-application cool-app-name`
+
+### Changing the Source Language
+
+By deafault, **create-mern-application** will create your application as a JavaScript project. You can pass the `--typescript` flag to create a TypeScript project instead.
+
+`create-mern-application cool-app-name --typescript`
+
+Want support for an additional language? Feel free to open a [new issue](https://github.com/alexlee-dev/create-mern-application/issues/new).
+
+### Interactive Mode
+
+You can choose to use the application in an interactive mode by passing the flag `--interactive`.
+
+This mode grants you several additinoal options.
+
+## ⛏️ Built Using <a name = "built_using"></a>
+
+## ✍️ Authors <a name = "authors"></a>
+
+- [Alex Lee](https://github.com/alexlee-dev) - Application Developer
+
+## 🚀 Additional Features to Be Added
+
+## 🎉 Acknowledgements <a name = "acknowledgement"></a>
+
+- Some inspiration from the developers behind [create-react-app](https://github.com/facebook/create-react-app).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mern-application",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A bootstrapper for creating a MERN application.",
   "bin": {
     "create-mern-application": "./index.js"

src/index.ts

@@ -11,7 +11,7 @@ const pkg = require("../package.json");
 Sentry.init({
   dsn:
     "https://[email protected]/5262339",
-  release: "0.1.0",
+  release: "0.2.0",
 });
 
 import {
@@ -42,7 +42,7 @@ const main = async (): Promise<void> => {
      * The program that parses the initial user input
      */
     const program = new commander.Command("create-mern-application")
-      .version("0.1.0")
+      .version("0.2.0")
       .arguments("<application-name>")
       .usage(`${chalk.blueBright("<application-name>")} [options]`)
       .action((name) => {

src/init.ts

@@ -222,6 +222,13 @@ export const copyTemplateFiles = async (
       },
     ];
 
+    if (language === "ts") {
+      requiredFilesToCopy.push({
+        src: path.join(__dirname, `template/ts/index.d.ts`),
+        dest: path.join(root, "/index.d.ts"),
+      });
+    }
+
     // * Copy Template Files
     await Promise.all(
       requiredFilesToCopy.map(

src/template/js/src/client/App.js

@@ -1,9 +1,21 @@
 import * as React from "react";
+import logo from "./logo.svg";
 
 const App = () => {
   return (
-    <div>
-      <h1>APP</h1>
+    <div id="app">
+      <img alt="Logo" id="logo" src={logo} />
+      <h1>create-mern-application</h1>
+      <p>
+        Edit <code>src/client/App.tsx</code> and save to reload.
+      </p>
+      <a
+        href="https://github.com/alexlee-dev/create-mern-application/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        View Documentation
+      </a>
     </div>
   );
 };

src/template/js/src/client/index.css

@@ -0,0 +1,17 @@
+body {
+  font-family: "Roboto", "Helvetica Neue", sans-serif;
+  margin: 0;
+}
+
+#app {
+  align-items: center;
+  color: #0e0e0e;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+#logo {
+  height: 300px;
+}

src/template/ts/index.d.ts

@@ -0,0 +1 @@
+declare module '*.svg';

src/template/ts/src/client/App.tsx

@@ -1,9 +1,21 @@
 import * as React from "react";
+import logo from "./logo.svg";
 
 const App: React.SFC<{}> = () => {
   return (
-    <div>
-      <h1>APP</h1>
+    <div id="app">
+      <img alt="Logo" id="logo" src={logo} />
+      <h1>create-mern-application</h1>
+      <p>
+        Edit <code>src/client/App.tsx</code> and save to reload.
+      </p>
+      <a
+        href="https://github.com/alexlee-dev/create-mern-application/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        View Documentation
+      </a>
     </div>
   );
 };

src/template/ts/src/client/index.css

@@ -0,0 +1,17 @@
+body {
+  font-family: "Roboto", "Helvetica Neue", sans-serif;
+  margin: 0;
+}
+
+#app {
+  align-items: center;
+  color: #0e0e0e;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+#logo {
+  height: 300px;
+}