Xedge>> nextjs-with-redux-and-cloud-firestore>> 返回
项目作者： NickDelfino

项目描述 ：
Sample project using nextjs, redux, and cloud firestore.
高级语言： JavaScript
项目地址: git://github.com/NickDelfino/nextjs-with-redux-and-cloud-firestore.git


Table of Contents

App Description

This sample app demonstrates how to create a live list updated by user input in the provided status textbox using reactjs, next.js, redux, and cloud firestore (a firebase product).

Questions, Comments, Concerns

Please direct any questions, comments, or concerns to the issues section of the repo. Thanks for your feedback.

Dependencies and Inspirations

This project was seeded by create-next-app. For general questions about the setup of next.js and the structure visit the previously linked github.

This project is inspired by the examples made by the nextjs team.
It combines ideas from both their with-redux
and with-firebase-authentication examples
to show how to create harmonization between redux and, in my case, cloud firestore.

Folder Structure

The project structure is made with going further in mind. Actions and reducers are moved
into their own directories since there should be multiple of them in a full web app. A lib
directory has been added for constant variable and to access the db.

  1. my-app/
  2.   README.md
  3.   package.json
  4.   next.config.js
  5.   components/
  6.     Head.js
  7.     Nav.js
  8.     AddPost.js
  9.     Loading.js
  10.     PostItem.js
  11.     PostList.js
  12.   pages/
  13.     index.js
  14.   lib/
  15.     const.js
  16.     db.js
  17.   static/
  18.     favicon.ico
  19.   reducers/
  20.     postReducer.js
  21.   actions/
  22.     index.js
  23.     types.js
  24.     postActions.js
  25.   store.js

Setting Up Cloud Firestore

Cloud firestore setup is similar to firebase realtime database setup.

The main thing that is need are the initialization keys generated when making a database
on the site so the example app works.

Go to firebase.google.com. Login or create an account if
you don’t already have one.

Then, go to console. Select the “Add Project” square.

Name your project anything you like and then on the following page select the option
“Add Firebase to your web app”.

A model will appear with configuration information. Copy the entire config variable and
paste it over the placeholder one in ../lib/db.js.

Then you are good to go. Your app will start using your Cloud Firestore.

Setup and Running Example

To run the project simply clone this repository and navigate into it.

Run npm install to acquire dependencies.

Then simply perform the command npm run dev.

Scripts

npm run dev

Runs the app in the development mode at http://localhost:3000.

npm run build

Builds the app for production to the .next folder.

npm run start

Starts the application in production mode.

This script is made with heroku in mind. There is a port variable that needs to be
specified for it to run. Heroku needs this for deployment.