A demo repo with the deployment setup/basic architecture of a robust full-stack application. Good template for starting a MERN project!
- Repo contributed by Isaac Lee
- Infrastructure based on Together, created by #100Devs
- Credit to Rascal_Two for help with Cyclic deployment
- Remove: (Morgan, Discord Auth, Passport, Jest/Testing, ESlint, prettier, multer, maybe express-flash?, and also maybe nanoid?, go through packages one by one and see what we really need...)
- Implement Update functionality for the "Example" Object.
- Change imports in backend/server to match syntax in front end (import statements)
- Delete artifacts from original Together project (e.g. events.js, etc)
- Have certain features only appear if authorized.
- Ask Rachel about "repo" vs "template" on GitHub.
- Change discord server id to Cyclic's server in the backend
- Change feature 2 button for distinction + make it colorblind friendly.
- Clean up all TODOs
- Once done, let Rachel know
- React
- Tailwind CSS
- Express
- Mongoose
- MongoDB
- Passport
- Discord Authentication
This section is in progress
-
React/Node:
- npm/package.json
- Routing (react-router-dom)
- useState & useEffect
- useContext
- axios (apiService.js)
-
Express:
- Routes
- Models
- Controllers
- Passport
- Mongoose
-
MongoDB:
-
OAuth:
- GitHub account
- Git installed and setup. Guide for Mac & Windows
- Visual Studio Code
- Discord & Joined 100 Devs
- Compass (Recommended) or similar MongoDB GUI if using
mongodb://127.0.0.1:27017/
as your DB_STRING - MongoDB Account: (Optional) Only required if not using Compass. You will need to change your DB_STRING
mongodb://127.0.0.1:27017/
as your DB_STRING (see below) - NodeJS
- Clone the repo
- Run
npm ci
in the root folder to install the server dependencies. - Run
cd client
then runnpm ci
to install the client dependencies.
- In the
server/config
folder, create a file titled ".env"- This file, which will contain sensitive info, will automatically be ignored by .gitignore
- You can use the template in
server/config/env.example
to insert your environment variables
Please copy and paste this template into a new .env file instead of removing .example from the server/config
folder
Keeping DB_STRING
as mongodb://127.0.0.1:27017/
will generate an instanced MongoDB in your local. To view your database, you can use compass. You can also create a MongoDB database on MongoDB.com, but would need to update the DB_String
to connect to MongoDB.
# Please copy and paste this template into a new .env file instead of removing .example from the file name
# Do not change PORT or OAUTH_REDIRECT_URL
# DB_STRING will create a MongoDB instance on your computer but can be changed to a mongodb.com cluster
PORT = 2121
DB_STRING = mongodb://127.0.0.1:27017/
DISCORD_CLIENT_ID = 1039303417199345684
DISCORD_CLIENT_SECRET = DISCORD_CLIENT_SECRET
OAUTH_REDIRECT_URL = http://localhost:3000/
MOCK_USER=true
NODE_ENV=development
DISCORD_CLIENT_SECRET
is not required unless you need to test the discord login. MOCK_USER=true
and NODE_ENV=development
allow the application to generate a fake user testuser#1234
for development purposes. If you need DISCORD_CLIENT_SECRET
, contact Chanel, Eric, Matt, or Caleb.
It is not recommended for beginners, but you can create your own DISCORD_CLIENT_ID
and DISCORD_CLIENT_SECRET
by going to Discord Developer Portal; you must set the redirect to http://localhost:2121/auth/discord/callback
for the application to function.
- Run
npm run dev
to run the app in development mode. The client and server will then run concurrently.- Note: The
npm start
script is ONLY meant for production, i.e. our Cyclic deployment.
- Note: The
- Clone the repository
- Set up on cyclic - deployment will succeed
- Open the application at the given URL - it will have errors
- This is the expected behavior, as we still need to connect our application to MongoDB and OAuth/Discord
- If you have not already, create a MongoDB account
- Create a MongoDB "Shared" database (which is free!), and name it whatever you like
- Create a new cluster
- In the cluster's settings, whitelist 0.0.0.0 in the Network Access section to whitelist all IP addresses
- Get the connection string from the MongoDB "Connect" menu
- Paste the connection in the Variables tab in Cyclic
- This will allow your application to connect to your MongoDB cluster
- Navigate to https://discord.com/developers/applications and create a new application
- In the application settings, navigate to the OAuth -> General menu
- Set the "Redirect" to http://[app-name-here].cyclic.app/auth/discord/callback
- IMPORTANT: The URI here MUST start with http
- Copy your Discord client id and client secret into the Variables tab in Cyclic
- Set OAuth redirect URL variable in this tab to your app's current URL (e.g. https://[app-name-here].cyclic.app/ (this one can be https))
No need to re-deploy afterwards. The serverless nature of Cyclic will cause your app to load your variables in on the next refresh.
Enjoy your brand new full-stack MERN application!