What is this for?
This template is for
- making a React website
- making a React web application with a database
If you are a beginner and you just want to make a simple React project with no database, try next-sass.
Why would I use this?
You want to…
- use React.
- use SASS, like the good old days.
- use https://nextjs.org/ and
dotenvfor things like server side rendering and obfuscating secrets on a server.
- You should never expose client secrets in the browser.
- use Postgres 14 (latest as of June 19th, 2022) to manage local data or local authentication.
- have templated SEO metatags.
- get the minimum code involved to make a production website
- [OPTIONAL] start with a Google Authentication example to create.
- start with an example of "organizations", each organization is created with an e-mail's domain name.
- [OPTIONAL] authenticate your Ethereum addresses from Metamask to build a DAPP or DAO. This example keeps a table of Ethereum addresses where you can store local information in the
- You'll need your own strategy for joining your Ethereum address to your local account.
- [OPTIONAL] authenticate your Solana address (public key) from Phantom to build a DAPP or DAO. This example keeps a table of Solana addresses where you can store local information in the
- You'll need your own strategy for joining your Solana address to your local account.
All steps assume you have
Clone this repository!
.env file in your project root.
JWT_SECRET=74b8b454-29a6-4282-bdec-7e2895c835eb SERVICE_PASSWORD_SALT=\$2b\$10\$JBb8nz6IIrIXKeySeuY3aO PASSWORD_ROUNDS=10
- Generate your own
- You need to use
\to escape the
$values as shown above. Also make sure you're using the correct amount of rounds.
- Generate your own
[OPTIONAL] Step 3
To get google auth support to work, add the following to your
.env file in your project root directory.
GOOGLE_CLIENT_ID=GET_ME_FROM_GOOGLE GOOGLE_CLIENT_SECRET=GET_ME_FROM_GOOGLE GOOGLE_REDIRECT_URIS=http://localhost:3005/google-authentication
GOOGLE_CLIENT_SECRETfrom https://console.developers.google.com after you setup your application.
- Enable People API. Otherwise Google Auth will not work for this example.
@data/environment. Google needs this string for the Authorized redirect URIs setting. The default is:
Install Postgres 14 locally
brew uninstall postgresql brew install postgresql brew link postgresql --force
At the time of writing this (June 19th, 2022),
postgresql is version 14.
If you see
# already linked, don't worry, nothing to worry about Warning: Already linked: /usr/local/Cellar/postgresql/14.4 To relink, run: brew unlink postgresql && brew link postgresql # run brew postgresql-upgrade-database Postgres - FATAL: database files are incompatible with server
Everything is fine.
Next make sure NodeJS version 10+ is installed on your machine.
brew install node
npm install npm run dev
Run Postgres 14.
I prefer the option to start and stop postgres through the command line.
- If you have another way of doing things, just make sure your port is set to
In a seperate terminal tab run
postgres -D /usr/local/var/postgres -p 1334
Now your development environment is setup.
You need to create a user named
admin and database named
# Enter Postgres console psql postgres -p 1334 # Create a new user for yourself CREATE ROLE admin WITH LOGIN PASSWORD 'oblivion'; # Allow yourself to create databases ALTER ROLE admin CREATEDB; # You need to do this to install uuid-ossp in a later step ALTER USER admin WITH SUPERUSER; # Exit Postgres console \q # Log in as your new user. psql postgres -p 1334 -U admin # Create a database named: nptdb. # If you change this, update knexfile.js CREATE DATABASE wwwdb; # Give your self privileges GRANT ALL PRIVILEGES ON DATABASE wwwdb TO admin; # List all of your databases \list # Connect to your newly created DB as a test \connect wwwdb # Exit Postgres console \q
Setup and install the necessary Postgres plugins. Aftewards seed the database with the necessary tables.
npm run script database-setup npm run script database-seed
There is also
npm run script database-drop if you just want to drop your tables for testing.
[OPTIONAL] Step 7
If you need to run a node script without running the node server, an example is provided for your convenience
npm run script example
http://localhost:3005 in your browser. You should be able to use the full example end-to-end and modify the code however you like.
You will need to add production environment variables. If you set up your Postgres database on Render the values will look something like this
PRODUCTION_DATABASE_PORT=5432 PRODUCTION_DATABASE_HOST=oregon-postgres.render.com PRODUCTION_DATABASE_NAME=yourdatabasename PRODUCTION_DATABASE_USERNAME=yourdatabasename_user PRODUCTION_DATABASE_PASSWORD=XXXXXXXXXXXXXXXXXXXXX
Then you will need to run production scripts
npm run production-script database-setup npm run production-script database-seed
For deploying your new website, I recommend any of the following choices: