IP S3 SNL microservices

Smitenoobleague

Smitenoobleague is a website where teams can sign up, compete and see there stats.

• The front-end is realized in ReactJS
• The back-end is based on the microservices architecture using ASP.NET Core for the services.

Tech

Smitenoobleague uses a number of open source projects and technologies to work properly:

• ReactJS - A JavaScript library for building user interfaces!
• NextJS - The react framework for production
• React-Bootstrap - The most popular front-end framework Rebuilt for React.
• Twitter Bootstrap - great UI boilerplate for modern web apps
• node.js - evented I/O for the backend
• Ocelot - A modern fast, scalable API gateway built on ASP.NET Core
• ASP.NET Core - Free. Cross-platform. Open source. A framework for building web apps and services with .NET and C#.

packages used in the web-app

The web-app uses the following npm / yarn packages

Package	README
NextJS	NextJS getting started
React-bootstrap	React-bootstrap README
Next-optimized-images	Next optimized images README
Next-compose-plugins	Next compose plugins README
react-icons	React icons plugins README
react-chartjs-2	React charts README
react-sortableJS	Sortablejs page
Jest	Jest docs
Axios	Axios docs
Yarn	Yarn page

Production

https://smitenoobleague.com

Development installation

Setup the required .env files

The smitenoobleague-microservices folder should have a .env containing the following:

DB_PASS={databasepass}
DevId={smiteapidevid}
AuthKey={smiteapiauthkey}
CertPass={sslcertpassword}
Domain={domainofthefrontend}
InternalServiceKey={generatedkeyusedforinternalcommuncationsecurity}
Auth0Domain={auth0domain}
Auth0Audience={auth0audience}
smtpMail={smtpmail}
smtpMailPass={smtpmailpass}
smtpHost={smtphost}
smtpHostPort={smtppass}

The smitenoobleague-web-app folder should have a .env containing the following:

AUTH0_LOGOUT_URL={frontenddomainlogouturl}
AUTH0_RETURN_URL={frontenddomainreturnurl}
AUTH0_AUDIENCE={auth0audience}
AUTH0_DOMAIN={auth0domain}
AUTH0_CLIENT_SECRET={auth0secret}
AUTH0_CLIENT_ID={auth0clientid}
COOKIE_SECRET={generatedcookiesecret}
NEXT_PUBLIC_BASE_API_URL={back-endapidomainurl}

Setting up the web-app

Open the project locally.

cd the web-app directory in the terminal:

$ cd smitenoobleague-web-app

then run the following commands to install all the required packages:

$ npm install --global yarn
$ yarn install

Finally run the app:

$ yarn run dev

finally go to http//:localhost:3000 to see the web-app in the browser

Setting up the microservices back-end

Open the solution file(.sln)

Visual studio will recognize the docker-compose. press the run button to run the docker compose.

• Docker desktop needs to be installed to run the back-end.

Questions?

Feel free to reach out to me if you want something cleared up or prehaps need help setting it all up.