Step by step beginner tutorial for express project.
-
git init # or # git clone <git repository url>
-
gitignore.io is a great tool to generate custom
.gitignorefiles that follows the community best practices.Just select your OS, IDE and language (or combination of those) and save the output as your
.gitignorefile.npx gitignore-dot-io node macos visualstudiocode # or use http://gitignore.io/ to create the file -
npm init # or 'npm init -y' for skipping interactive init (replay yes to all)
-
npm i express
See: src/server/server.js
-
npm i react react-dom parcel-bundler
See: src/client folder.
-
We have multiple ways to approach this problem, we went with Parcel - a simple zero config bundler, the more common (and complex) solution is webpack.
See
package.jsonfor added scripts.
ESLint is highly recommend on every JavaScript project we will add it to our project as a development dependency.
npm install eslint --save-dev-
cd src/server/ npx eslint --init ##### Those are the answers given in this tutorial # ? How would you like to use ESLint? To check syntax, find problems, and enforce code style # ? What type of modules does your project use? CommonJS (require/exports) # ? Which framework does your project use? None of these # ? Does your project use TypeScript? No # ? Where does your code run? Node # ? How would you like to define a style for your project? Use a popular style guide # ? Which style guide do you want to follow? Standard: https://github.com/standard/standard # ? What format do you want your config file to be in? JavaScript
-
cd src/client/ npx eslint --init ##### Those are the answers given in this tutorial # ? How would you like to use ESLint? To check syntax, find problems, and enforce code style # ? What type of modules does your project use? JavaScript modules (import/export) # ? Which framework does your project use? React # ? Does your project use TypeScript? No # ? Where does your code run? Browser # ? How would you like to define a style for your project? Use a popular style guide # ? Which style guide do you want to follow? Standard: https://github.com/standard/standard # ? What format do you want your config file to be in? JavaScript
-
npm install faucet tape node-fetch --save-dev
-
Exporting server for closing the http listener on test end.
nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.
-
npm install nodemon --save-dev
-
We will use Passport.js for using
githubas authentication provider.npm install passport passport-github express-session
-
# For running with authentication GITHUB_CLIENT_ID=<your-client-id> GITHUB_CLIENT_SECRET=<your-client-secret> npm run watch:server
To create you client id/secret pair follow this guide to create
githuboauth app, you will find the id/secret on the app page.NOTE: it is highly advise never to never commit secrets to your repository.