Code Monkey home page Code Monkey logo

node-ts-react-example-hello-world's Introduction

React Sapling Hello World Example

Setup

Node

  1. Install nvm (Node Version Manager)
  2. cd to the project directory and execute the following: 
    nvm install
nvm use
npm install

IDE Setup

This project uses EditorConfig for IDE configuration.

See .editorconfig for settings.

Many popular IDEs and editors support this out of the box or with a plugin.

AWS

  1. Install AWS CLI for your computer
  2. Setup AWS CLI with your credentials
  3. Add a configuration for serverless in your AWS config files

Serverless

This project uses [Serverless] to deploy. Install serverless as a global:

npm install -g serverless

Change the bucket to be used for logs in the custom.logs.bucket property in serverless.yml.

Domain Name

  1. Register a domain name in AWS Route53
  2. Change the base custom.baseDomainName property in serverless.yml to the zone name, eg whatever.com

Development

Running the Local Server

npm run server:development

The server runs at http://localhost:5001/.

The port can be changed by setting the environment variable WEBPACK_SERVER_PORT to an open port.

Prettier

This project uses Prettier, so please run it before checking in:

npm run pretty

See .prettierrc for settings.

Some IDEs and editors have plugins for running Prettier.

Linting

This project uses ESLint. Check linting before checking in:

npm run lint

See tslint.json for settings.

Many IDEs and editors support TSLint.

Testing

This project uses Jest for testing. Run tests before checking in.

npm test

Building

Development

npm run build:development

Production

npm run build

Deploy

NOTE: AWS Certificate validation requires a manual step during the first deployment.

When the following is displayed, go to the AWS Certificate Manager console for the new domain name and create the record in Route 53:

CloudFormation - CREATE_IN_PROGRESS - AWS::CertificateManager::Certificate - WebAppCertificate

Test

npm run deploy:test

Production

npm run deploy

Troubleshooting

If there are errors when deploying, check the Cloudformation logs for the stack.

node-ts-react-example-hello-world's People

Contributors

dependabot[bot] avatar mdnorman avatar renovate-bot avatar renovate[bot] avatar

Watchers

avatar avatar

node-ts-react-example-hello-world's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource Name Replacement PR?
npm node-sass Unavailable
npm standard-version Available

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

  • Replace dependency standard-version with commit-and-tag-version 9.5.0
  • Update dependency @types/jest to v29.5.13
  • Update dependency @types/node to v18.19.50
  • Update dependency eslint to v8.57.1
  • Update dependency eslint-plugin-import to v2.30.0
  • Update dependency react-router-dom to v6.26.2
  • Update dependency serverless to v3.39.0
  • Update dependency ts-loader to v9.5.1
  • Update dependency typescript to v5.6.2
  • Update dependency webpack-bundle-analyzer to v4.10.2
  • Update react monorepo (@types/react, @types/react-dom, react, react-dom)
  • Update typescript-eslint monorepo to v5.62.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
  • Update actions/checkout action to v4
  • Update actions/setup-node action to v4
  • Update dependency css-loader to v7
  • Update dependency eslint to v9
  • Update dependency eslint-plugin-prettier to v5
  • Update dependency husky to v9
  • Update dependency node to v20 (node, @types/node)
  • Update dependency pretty-quick to v4
  • Update dependency sass-loader to v16
  • Update dependency serverless to v4
  • Update dependency source-map-loader to v5
  • Update dependency style-loader to v4
  • Update dependency webpack-dev-server to v5
  • Update typescript-eslint monorepo to v8 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/ci.yml
  • actions/checkout v3
  • actions/setup-node v3
  • node 20.3.1
npm
package.json
  • react 18.2.0
  • react-dom 18.2.0
  • react-router-dom 6.14.1
  • @types/jest 29.5.12
  • @types/node 18.19.47
  • @types/react 18.2.73
  • @types/react-dom 18.2.23
  • @types/react-router-dom 5.3.3
  • @typescript-eslint/eslint-plugin 5.61.0
  • @typescript-eslint/parser 5.61.0
  • css-loader 6.11.0
  • cz-conventional-changelog 3.3.0
  • eslint 8.57.0
  • eslint-plugin-import 2.29.1
  • eslint-plugin-prettier 4.2.1
  • html-webpack-plugin 5.6.0
  • husky 8.0.3
  • jest 29.7.0
  • node-sass 9.0.0
  • prettier 3.3.3
  • pretty-quick 3.1.3
  • resolve-url-loader 5.0.0
  • sass-loader 13.3.3
  • serverless 3.33.0
  • serverless-finch 4.0.4
  • source-map-loader 4.0.2
  • standard-version 9.5.0
  • style-loader 3.3.4
  • ts-jest 29.2.5
  • ts-loader 9.4.4
  • ts-node 10.9.2
  • tsutils 3.21.0
  • typescript 5.1.6
  • url-loader 4.1.1
  • webpack 5.94.0
  • webpack-bundle-analyzer 4.9.1
  • webpack-cli 5.1.4
  • webpack-dev-server 4.15.2
  • npm >=7.20
  • node >=16.5
nvm
.nvmrc
  • node 18.20.4
  • Check this box to trigger a request for Renovate to run again on this repository

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.