Chroma is an Angular 8 based template for GDGs to build their DevFest/Event Website.
- Overview
- Folder Structure
- Prerequisites
- Getting Started
- Hosting in Firebase
- Bugs / Feature Requests
- Contributing
- Creators
- Template Usage
- Copyright and License
This template was created to help developer communities save time in website construction time for DevFest or other Events and spend more time on hacking ways to engage with their communities.
The development of this template was done by the team of GDG Cloud Nashik, GDG Nashik and WTM Nashik.
Stack / Good-to-Have(s) | Description |
---|---|
Angular 8 | Latest Version of Angular Project |
NG Zorro 7 | Modern UI Components from NG Zorro Project |
Bootstrap 4 | Latest Structured and Stylish CSS |
JSON Structure | Easy to Edit Template Structure |
Progressive Web App | Optimized for Speed and Offline Access |
Understand the Folder Structure of the project. The project contains the following main files and folders which you needs your attention. You are advised to skip editing other files and folders as it can end up putting you in a confused situation if any errors pop up later.
- dist
- src
|- app
|- assets
| |- json
| | |- basics.json
| | |- partners.json
| | |- sponsors.json
| | |- speakers.json
| | |- team.json
| |- icons
| | |- logo.png
|- index.html
- angular.json
- package.json
- Verify that you are running node 10.16.0 by running
node -v
in a terminal/console window. Older versions produce errors, but newer versions should be fine - [Download Node.js].(https://nodejs.org/en/download/) - Download your GDG / GDG Cloud Chapter Logo from GDG Logo Generator. Rename the downloaded image as
logo.png
and paste it insideicons
folder by replacing the previous image present (Refer Project Structure). - You'll also need a
Google API Key
from GCP to load/embed Google Maps in your website. Similar to Meetup, you'll need to visit Google Cloud Platform to get an API Key. Make sure you have enabled Google Maps Embed API is enabled in your GCP project. - To edit the files, we prefer you use Visual Studio Code as it is easy to navigate and contains an in-built terminal to run commands. Download Visual Studio Code or you may use your preferred code editor.
- Fork this repository and clone it in your local system.
- In your terminal/console, navigate to the folder where
package.json
is present (Refer Folder Structure). - Run
npm install
oryarn install
to install all the node_modules required to run this project. - Open a code editor of your choice and open the
basics.json
file (Refer Folder Structure). - Edit the values of
name
,email
,mobile
,meetup-slug
,registrationURL
(Website where users can register - Meetup Page or Ticketing Sites),eventLocation
,eventDate
(Follow the structureMonth DD, YYYY
) and social media links. - Similarly, open the
sponsors.json
file (Refer Folder Structure) and add sponsors if you wish to. There is a field called aslevel
for each sponsor which carries the values such asGold
,Silver
andBronze
. These values will change the background color of the sponsor image to highlight the respective colors. If you don't want to apply these colors, feel free to give any other value. You can paste the images of the sponsors in the images folder and change thelogo
field insponsors.json
file with the path of the image (eg. assets/images/gdg.png). - Do it again for
partners.json
file (Refer Folder Structure). One difference is that it does not contain thelevel
field as the previous file. - Next, open the
speakers.json
file (Refer Folder Structure). It contains a detailed structure for speakers and their sessions. All the fields are mandatory exceptimage
andsocial media
links. We support 4 social media link types -twitter
,linkedin
,github
and any otherlink
such as for blog. For thesessionColor
, you may use these colors -magenta
,red
,volcano
,orange
,gold
,lime
,green
,cyan
,blue
,geekblue
,purple
to give a colorful look. You may also enter ahex-code
for sessionColor (eg.#000000
) but it not give an outlined look like the above mentioned colors. Paste the images of the speakers in the speakers folder under assets similarly as done for addition of sponsors and partners. 1:1 image is preferred else the image will be distorted. - Next, open the
team.json
file (Refer Folder Structure). It contains three levels of team structure -organizers
,core team
andvolunteers
. Thename
androle
fields are mandatory while other fields such asimage
andsocial media
links are optional. We support 4 social media link types -twitter
,linkedin
,github
and any otherlink
such as for blog. Paste the images of your team in the images/team folder under assets similarly as done for addition of sponsors and partners. 1:1 image is preferred else the image will be distorted. - We already change the
site title
,meta data
such as description of the site dynamically during load based on the chapter name and description from thebasics.json
file. But, it is advised to change it in theindex.html
file (Refer Folder Structure) to improve the SEO of your website. - The data changing phase of this setup is now complete.
- Time to test if the changes are done in a proper way locally. To run the project, run
ng serve
command from the folder whereangular.json
file (Refer Folder Structure) is present. It takes few moments to compile and you can check the website by visiting http://localhost:4200. - If you are seeing the changes reflected in the site, you are ready to publish it. If you face any issues, feel free to ping us via Twitter @GDGCloudCBE and we'll be happy to help.
- Hit
CTRL+C
to stop running the project. - Once you have completed all the steps, run
ng build --prod
to build the production ready files. The terminal will generate the output in a folder calleddist/Chroma
(Refer Folder Structure). If you open that folder, there will be a set of files along with index.html. Open the index.html to verify if the site runs properly. You can now host the files either in Firebase Hosting for free or through any other hosting as per your wish.
Commands | Description |
---|---|
npm install | Install the node-modules mentioned in the package.json file in the directory |
ng serve | Build the app for development in localhost |
ng build --prod | Build the app for production |
- Create a new Project in Firebase or you may use the exsisting project for your community if you have previously created.
- Once done, you need to setup environment to deploy the website to Firebase Hosting. Install Firebase CLI by running the command
npm i -g firebase-tools
. - Create a new Firebase Project and login into Firebase CLI in your terminal by running the command
firebase login
. - Navigate to the folder where
package.json
(Refer Folder Structure) is present. - To connect to the Firebase Project, run the command
firebase init
. - Select the project you created in the Firebase Console by using the arrow keys.
- Select the
Firebase Hosting
by using Spacebar and arrow key and hit enter. Don't select other services as it's not necessary. - Select
No
for Single Page Web App. - For the folder delete the previously filled value
public
and typedist/Chroma
. - There will be a file created
firebase.json
file. Open and paste the following data to setcache time-out
values.{ "hosting": { "public": "dist/Chroma", "rewrites": [ { "source": "**", "destination": "/index.html" } ], "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "headers": [ { "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)", "headers": [ { "key": "Access-Control-Allow-Origin", "value": "*" } ] }, { "source": "**/*.@(jpg|jpeg|gif|png|woff)", "headers": [ { "key": "Cache-Control", "value": "max-age=31536000" } ] }, { "source": "404.html", "headers": [ { "key": "Cache-Control", "value": "max-age=300" } ] } ] } }
- Run
firebase deploy
and viola! Your website is now live and take a moment to appreciate yourself! - In case you wanted to deploy to an actual domain rather than appsot subdomain, refer to this Firebase Hosting Guide to setup.
Have a bug or a feature request? If your problem or idea is not addressed yet, please open a new issue.
- Please fork and commit your changes and give us a PR.
- We'll make sure your efforts are given a proper recognition in turn.
This project is licenced under Mozilla Public License 2.0. Please read the clauses carefully before you use it for personal or commercial purposes.
Thanks to all supporters and contributors to make this available for everyone. If you have any suggesstions or feedbacks on the code, please ping GDG Nashik team for quick assistance.