This is a example of a forum web application with posts, comments and server side rendering.
It is deployed here.
Stack
- NextJS + Custom Express
- Emotion CSS-in-JS
- Postgres
- Sequelize: PostgresSQL ORM
- Passport for local authentication
- Heroku
- Redux
- Babel
This code is for you to take!
Why is this useful?
- The entire stack is written in JavaScript.
- Test concepts before bringing them over to real work.
- Server side rendering made simple.
- Speed at Hackathons.
Mobile apps with JavaScript
I also built a React Native application with Expo that sends network requests to a deployed version.
- Open it the project on Expo.
- Get Expo Client if you need it.
- View and take the source code on GitHub.
- On OSX, to run Postgres:
pg_ctl -D /usr/local/var/postgres start- Postgres config is stored in
./config.js. - Local database:
testdb. - Username and password as
test.
# Enter Postgres console
psql postgres
# Create a new user for yourself
CREATE ROLE yourname WITH LOGIN PASSWORD 'yourname';
# Allow yourself to create databases
ALTER ROLE yourname CREATEDB;
# Exit Postgres console
\q
# Log in as your new user.
psql postgres -U yourname
# Create a database named: testdb.
# If you change this, update config.js
CREATE DATABASE testdb;
# Give your self privileges
GRANT ALL PRIVILEGES ON DATABASE testdb TO yourname;
# List all of your databases
\list
# Connect to your newly created DB as a test
\connect testdb
# Exit Postgres console
\qYou wont return here unless you drop tables. You can also use a GUI if you like.
In the root directory run these commands:
npm install
npm install -g sequelize-cli
sequelize db:migrate
npm run devYou can now visit localhost:8000 in a browser.
Install Heroku.
npm install -g heroku-cli
heroku login
heroku createHeroku will give you a unique address, like ours: https://next-postgres.herokuapp.com/.
Already have a heroku app to deploy to?
heroku git:remote -a name-of-your-heroku-app
Go to https://data.heroku.com, add a datastore, pick Postgres.
You will receive database, host, password, port, and username values. Here is how you set them:
# Set variables
heroku config:set PRODUCTION_DATABASE=NAME_PROVIDED_FROM_HEROKU
heroku config:set PRODUCTION_HOST=HOST_PROVIDED_FROM_HEROKU
heroku config:set PRODUCTION_PASSWORD=PASSWORD_PROVIDED_FROM_HEROKU
heroku config:set PRODUCTION_PORT=PORT_PROVIDED_FROM_HEROKU
heroku config:set PRODUCTION_USERNAME=USERNAME_PROVIDED_FROM_HEROKU
# See all of your variables
heroku configSet a secret for cookie-session:
heroku config:set PRODUCTION_SECRET=PICK_A_SECRETgit push heroku masterappend --force if necessary.
Feel free to slang any feels to @meanjim.