├── packages └── landingpage │ ├── .eslintignore │ ├── .gitignore │ ├── .prettierrc │ ├── .env.example │ ├── next-env.d.ts │ ├── utils │ └── env.ts │ ├── pages │ └── index.tsx │ ├── next.config.js │ ├── interfaces │ └── index.ts │ ├── .eslintrc.js │ ├── Dockerfile │ ├── tsconfig.json │ ├── package.json │ └── README.md ├── docker-compose.yml ├── .vscode └── settings.json ├── LICENSE ├── .gitignore └── README.md /packages/landingpage/.eslintignore: -------------------------------------------------------------------------------- 1 | next.config.js -------------------------------------------------------------------------------- /packages/landingpage/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .next -------------------------------------------------------------------------------- /packages/landingpage/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false 3 | } 4 | -------------------------------------------------------------------------------- /packages/landingpage/.env.example: -------------------------------------------------------------------------------- 1 | # Rename me to .env 2 | GA_TRACKING_ID="Any Google Analytics code" 3 | -------------------------------------------------------------------------------- /packages/landingpage/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /packages/landingpage/utils/env.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from "path" 2 | import { config } from "dotenv" 3 | 4 | config({ path: resolve(__dirname, "../.env") }) 5 | -------------------------------------------------------------------------------- /packages/landingpage/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const IndexPage = () =>

Welcome to the Dockerized App!

4 | 5 | export default IndexPage 6 | -------------------------------------------------------------------------------- /packages/landingpage/next.config.js: -------------------------------------------------------------------------------- 1 | require('dotenv').config() 2 | 3 | module.exports = { 4 | env: { 5 | GA_TRACKING_ID: process.env.GA_TRACKING_ID, 6 | }, 7 | webpackDevMiddleware: config => { 8 | config.watchOptions = { 9 | poll: 1000, 10 | aggregateTimeout: 300, 11 | } 12 | 13 | return config 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "3.3" 2 | 3 | services: 4 | nextjs: 5 | ports: 6 | - 3000:3000 7 | build: 8 | context: packages/landingpage 9 | dockerfile: Dockerfile 10 | volumes: 11 | - ./packages/landingpage:/usr/src/app 12 | - /usr/src/app/node_modules 13 | - /usr/src/app/.next 14 | env_file: 15 | - .env 16 | -------------------------------------------------------------------------------- /packages/landingpage/interfaces/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * You can include shared interfaces/types in a separate file 3 | * and then use them in any component by importing them. For 4 | * example, to import the interface below do: 5 | * 6 | * @example import User from "path/to/interfaces" 7 | */ 8 | 9 | export type User = { 10 | id: number 11 | name: string 12 | } 13 | -------------------------------------------------------------------------------- /packages/landingpage/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "extends": "airbnb-typescript-prettier", 3 | "rules": { 4 | "jsx-a11y/anchor-is-valid": [ "error", { 5 | "components": [ "Link" ], 6 | "specialLink": [ "hrefLeft", "hrefRight" ], 7 | "aspects": [ "noHref", "invalidHref", "preferButton" ] 8 | }], 9 | "semi": [2, "never"] 10 | }, 11 | } -------------------------------------------------------------------------------- /packages/landingpage/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:12 2 | 3 | ENV PORT 3000 4 | 5 | # Create app directory 6 | RUN mkdir -p /usr/src/app 7 | WORKDIR /usr/src/app 8 | 9 | # Installing dependencies 10 | COPY package*.json /usr/src/app/ 11 | RUN npm install 12 | 13 | # Copying source files 14 | COPY . /usr/src/app 15 | 16 | # Building app 17 | RUN npm run build 18 | EXPOSE 3000 19 | 20 | # Running the app 21 | CMD "npm" "run" "dev" -------------------------------------------------------------------------------- /packages/landingpage/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "alwaysStrict": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "preserve", 9 | "lib": ["dom", "es2017"], 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "noEmit": true, 13 | "noFallthroughCasesInSwitch": true, 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "resolveJsonModule": true, 17 | "skipLibCheck": true, 18 | "strict": true, 19 | "target": "esnext" 20 | }, 21 | "exclude": ["node_modules"], 22 | "include": ["**/*.ts", "**/*.tsx"] 23 | } 24 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | // turn VSCode internal formatter off for JS and JSX, ESLint will do it. 4 | "[javascript]": { 5 | "editor.formatOnSave": false 6 | }, 7 | "[typescript]": { 8 | "editor.formatOnSave": false 9 | }, 10 | "[javascriptreact]": { 11 | "editor.formatOnSave": false 12 | }, 13 | "[typescriptreact]": { 14 | "editor.formatOnSave": false 15 | }, 16 | "editor.codeActionsOnSave": { 17 | "source.fixAll": true 18 | }, 19 | // Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already 20 | "prettier.disableLanguages": [ 21 | "javascript", 22 | "javascriptreact", 23 | "typescript", 24 | "typescriptreact" 25 | ], 26 | "eslint.workingDirectories": ["packages/landingpage"] 27 | } 28 | -------------------------------------------------------------------------------- /packages/landingpage/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "with-typescript", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "dev": "next", 6 | "build": "next build", 7 | "start": "next start", 8 | "type-check": "tsc", 9 | "lint": "eslint **/**", 10 | "lint:fix": "eslint **/** --fix", 11 | "test": "NODE_ENV=test jest --passWithNoTests --watch", 12 | "test:ci": "NODE_ENV=test jest --passWithNoTests" 13 | }, 14 | "dependencies": { 15 | "dotenv": "^8.2.0", 16 | "isomorphic-unfetch": "3.0.0", 17 | "jest": "^25.2.1", 18 | "next": "latest", 19 | "path": "^0.12.7", 20 | "react": "^16.12.0", 21 | "react-dom": "^16.12.0" 22 | }, 23 | "devDependencies": { 24 | "@types/node": "^12.12.21", 25 | "@types/react": "^16.9.16", 26 | "@types/react-dom": "^16.9.4", 27 | "eslint": "^6.8.0", 28 | "eslint-config-airbnb-typescript-prettier": "^2.1.0", 29 | "prettier": "^1.18.2", 30 | "typescript": "3.7.3" 31 | }, 32 | "license": "ISC" 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Kumar Abhirup 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | docs 2 | 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | .DS_STORE 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | *.pid.lock 16 | 17 | # Directory for instrumented libs generated by jscoverage/JSCover 18 | lib-cov 19 | 20 | # Coverage directory used by tools like istanbul 21 | coverage 22 | 23 | # nyc test coverage 24 | .nyc_output 25 | 26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 27 | .grunt 28 | 29 | # Bower dependency directory (https://bower.io/) 30 | bower_components 31 | 32 | # node-waf configuration 33 | .lock-wscript 34 | 35 | # Compiled binary addons (http://nodejs.org/api/addons.html) 36 | build/Release 37 | 38 | # Dependency directories 39 | node_modules/ 40 | jspm_packages/ 41 | 42 | # Distribution directories 43 | dist/ 44 | 45 | # Typescript v1 declaration files 46 | typings/ 47 | 48 | # Optional npm cache directory 49 | .npm 50 | 51 | # Optional eslint cache 52 | .eslintcache 53 | 54 | # Optional REPL history 55 | .node_repl_history 56 | 57 | # Output of 'npm pack' 58 | *.tgz 59 | 60 | # Yarn Integrity file 61 | .yarn-integrity 62 | 63 | # dotenv environment variables file 64 | .env 65 | 66 | # Nextjs 67 | .next 68 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🏄 dockerized 2 | 3 | [![emoji-log](https://cdn.jsdelivr.net/gh/ahmadawais/stuff@ca978741836412b5e33ce8561f5f95c933177067/emoji-log/flat.svg)](https://github.com/KumarAbhirup/Emoji-Log/) 4 | [![Twitter](https://img.shields.io/twitter/follow/kumar_abhirup.svg?style=social&label=@kumar_abhirup)](https://twitter.com/kumar_abhirup/) 5 | 6 | ## 📦 Setup 7 | 8 | ### 🖥️ Development environment 9 | 10 | - Run 11 | 12 | ```bash 13 | git clone https://github.com/KumarAbhirup/dockerized dockerized # to clone project 14 | cd dockerized # enter in the project 15 | docker-compose up 16 | ``` 17 | 18 | - Rename all the `.env.example` to `.env`. 19 | 20 | - Create a `.env` file in the root of the directory. 21 | 22 | - Visit `http://localhost:3000/` 23 | 24 | ### ⚒️ Linting 25 | 26 | #### In VSCode 27 | 28 | - Install ESLint and Prettier VSCode extensions. 29 | - **Done! Now you have live linting and autofixing setup!** 30 | 31 | #### In Any other IDE 32 | 33 | - Run `yarn lint` in indivisual `packages` to check for linting errors. 34 | - Run `yarn lint:fix` to fix the linting errors. 35 | 36 | ## 🦄 Info 37 | 38 | - We are following the micro-services architechture. That means, to install npm modules, you'll have to run `yarn add` in the respective packages. 39 | - To customize the linter, use `.eslintrc` and `.prettierrc` file. [Learn more](https://eslint.org) 40 | 41 | ## 📝 License 42 | 43 | **MIT © Kumar Abhirup** 44 | 45 | Created by [Kumar Abhirup](https://kumar.now.sh) 👉 [![Twitter](https://img.shields.io/twitter/follow/kumar_abhirup.svg?style=social&label=@kumar_abhirup)](https://twitter.com/kumar_abhirup/). 46 | 47 | Peace ✌️ 48 | -------------------------------------------------------------------------------- /packages/landingpage/README.md: -------------------------------------------------------------------------------- 1 | # TypeScript Next.js example 2 | 3 | This is a really simple project that shows the usage of Next.js with TypeScript. 4 | 5 | ## Deploy your own 6 | 7 | Deploy the example using [ZEIT Now](https://zeit.co/now): 8 | 9 | [![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-typescript) 10 | 11 | ## How to use it? 12 | 13 | ### Using `create-next-app` 14 | 15 | Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: 16 | 17 | ```bash 18 | npm init next-app --example with-typescript with-typescript-app 19 | # or 20 | yarn create next-app --example with-typescript with-typescript-app 21 | ``` 22 | 23 | ### Download manually 24 | 25 | Download the example: 26 | 27 | ```bash 28 | curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-typescript 29 | cd with-typescript 30 | ``` 31 | 32 | Install it and run: 33 | 34 | ```bash 35 | npm install 36 | npm run dev 37 | # or 38 | yarn 39 | yarn dev 40 | ``` 41 | 42 | Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). 43 | 44 | ## Notes 45 | 46 | This example shows how to integrate the TypeScript type system into Next.js. Since TypeScript is supported out of the box with Next.js, all we have to do is to install TypeScript. 47 | 48 | ``` 49 | npm install --save-dev typescript 50 | ``` 51 | 52 | To enable TypeScript's features, we install the type declaratons for React and Node. 53 | 54 | ``` 55 | npm install --save-dev @types/react @types/react-dom @types/node 56 | ``` 57 | 58 | When we run `next dev` the next time, Next.js will start looking for any `.ts` or `.tsx` files in our project and builds it. It even automatically creates a `tsconfig.json` file for our project with the recommended settings. 59 | 60 | Next.js has built-in TypeScript declarations, so we'll get autocompletion for Next.js' modules straight away. 61 | 62 | A `type-check` script is also added to `package.json`, which runs TypeScript's `tsc` CLI in `noEmit` mode to run type-checking separately. You can then include this, for example, in your `test` scripts. 63 | --------------------------------------------------------------------------------