App Setup and Configuration

This app requires a MongoDB for data storage and retrieval and a pexel API key for blog images

Database Setup

The below instructions are for setting up a free mongodb cloud atlas account which is suitable for testing and development.

1. Go to https://www.mongodb.com/cloud/atlas/signup and create a free mongoDB atlas account
2. On the "Lets get your account setup" page set a name for your organization and project. Select javascript for the preferred language
3. Select the free shared cluster option on the "Choose a path" page
4. Select a cloud provider and a region on the "Create a Starter Cluster page", Make sure you have "M0 Sandbox" with a base price of "Free Forever" selected for your "Cluster Tier", Click "Create Cluster"
5. Once the Cluster has finished creating click the "Connect" button. The page will tell you that you need to setup your firewall access. Click the option "Allow Access from Anywhere"
6. Leave the IP address as 0.0.0.0/0 and click "Add IP Address" **Not a secure production configuration**
7. In the "Create a Database User" section set your username and password as you desire. Click the "Create a Database User" button
8. Click "Choose a connection method". On the next screen select "Connect your application"
9. Copy the connection string into a notepad (or something to keep note of it for later steps) replacing the < password > portion (including the < >) with the password you setup on step 10 and replacing < dbname > portion with mydb (or whatever you want to call the database your site data will be inserted into)
10. It should look something like: mongodb+srv://mydbUser:[email protected]/mydb?retryWrites=true&w=majority

Pexels

The blog section of this site uses pexel images (free stock photography) for the blog post images. This makes it easy to insert a nice photograph into each blog post because all you need is the pexel ID of the image and the image will be retrived from the pexel API on page render intead of having to be stored in your own server somewhere. Go to https://www.pexels.com/api/ and create an account and setup an API key. You will need the API key later during environmental variable setup.

Environmental Variables

This app uses 3 environmental variables

1. In the root folder of the project create a file called .env (be sure to include the leading period)
2. Open the .env file you created and add the following 3 lines replacing the portions after the = sign with your own information:
   • MONGODB_URL=your mongodb URI
   • JWT_SECRET=your JWT secret key
   • PEXELKEY=your pexel API key

Admin Account

To add blog posts and manage contact requests there is an admin section. The default admin username is admin and the default password is password. You will be prompted to change the password on first login to the admin section. If you want to change the user info for the admin account you can go to the server.js file in the root folder of the app and change the userData object that looks like:

const userData = {

email: '[email protected]',

firstname: 'admin',

lastname: 'admin',

username: 'admin',

password: hashedPassword,

role: 'admin',

changepassword: true

};

Only change the values for email, firstname, lastname, and username

Running on local host

1. Open a terminal pointed to the root of the project and in the command prompt type npm install
2. AFter the install process has finished type the command npm start
3. Open a second terminal pointed to the client folder located in the root of the project and type the command npm install
4. After the install process has finished type the command npm start
5. You should have two terminals open, one for the frontend and one for the backend with node started.