SlideShare a Scribd company logo
Hang on… we are starting soon!
While we wait, make sure you have the code from the second workshop!
If you don’t have it:
❏ run npx create-react-app chatroom
❏ go into chatroom/ and run npm install --save firebase
❏ replace the src/ folder with rb.gy/fo4dug
Afterwards (or if you do have it):
❏ run npm install -g firebase-tools
Add a Backend and
Deploy!
Zhenghui (Zheng) Wang
Boston University DSC
Boston University Developer Student Club
Firebase
Sounds cool… but what is it?
Application for developing applications
Can help us perform a variety of tasks:
❏ Host websites
❏ Maintain database
❏ Store static information
❏ Has easy to use implementations of common tasks such as authentication
JavaScript: async and listeners
Scary words...
async: asynchronous code
❏ involves promises
❏ load page w/o database fetch
listeners: implementing handlers for events
❏ change page upon new data
React: component life cycles
Components are alive!?!
If you don’t have the code from last workshop:
❏ run npx create-react-app chatroom
❏ go into chatroom/ and run npm install --save firebase
❏ replace the src/ folder with rb.gy/fo4dug
Afterwards (or if you do have it):
❏ run npm install -g firebase-tools
Let’s Finish Up!
Online Chat Room
Now I should share
my screen...
Zhenghui (Zheng) Wang
Boston University DSC
Boston University Developer Student Club
Other Hosting Options
I like the sound of free...
❏ Heroku (CRA tutorial link)
❏ Firebase (CRA tutorial link)
❏ GitHub Pages (CRA tutorial link) [static pages only]
❏ Netlify (CRA tutorial link)
❏ Or… look through github student developer pack!
That’s all!
Thanks for stopping by <3
Zhenghui (Zheng) Wang
Boston University DSC
Boston University Developer Student Club

More Related Content

What's hot

Improve the deployment process step by step
Improve the deployment process step by stepImprove the deployment process step by step
Improve the deployment process step by step
Daniel Fahlke
 
Node & Express as Workflow Tools
Node & Express as Workflow ToolsNode & Express as Workflow Tools
Node & Express as Workflow Tools
FITC
 
Develop 4 Developers
Develop 4 DevelopersDevelop 4 Developers
Develop 4 Developers
Christian Güdemann
 
Unit Testing your React / Redux app (@BucharestJS)
Unit Testing your React / Redux app (@BucharestJS)Unit Testing your React / Redux app (@BucharestJS)
Unit Testing your React / Redux app (@BucharestJS)
Alin Pandichi
 
The new way to extend VSTS Build and Release
The new way to extend VSTS Build and ReleaseThe new way to extend VSTS Build and Release
The new way to extend VSTS Build and Release
Jesse Houwing
 
Integrating Node.js with PHP
Integrating Node.js with PHPIntegrating Node.js with PHP
Integrating Node.js with PHP
Lee Boynton
 
Front-end development automation with Grunt
Front-end development automation with GruntFront-end development automation with Grunt
Front-end development automation with Grunt
benko
 
Designing and coding for cloud-native applications using Python, Harjinder Mi...
Designing and coding for cloud-native applications using Python, Harjinder Mi...Designing and coding for cloud-native applications using Python, Harjinder Mi...
Designing and coding for cloud-native applications using Python, Harjinder Mi...
Pôle Systematic Paris-Region
 
Creating a continuous delivery pipeline with docker
Creating a continuous delivery pipeline with dockerCreating a continuous delivery pipeline with docker
Creating a continuous delivery pipeline with docker
containershipio
 
Headless approach and Acquia - Case study - Chris Ozog
Headless approach and Acquia - Case study - Chris OzogHeadless approach and Acquia - Case study - Chris Ozog
Headless approach and Acquia - Case study - Chris Ozog
DrupalCamp Kyiv
 
OpenNTF Essentials
OpenNTF EssentialsOpenNTF Essentials
OpenNTF Essentials
Christian Güdemann
 
Hidden Dragons of CGO
Hidden Dragons of CGOHidden Dragons of CGO
Hidden Dragons of CGO
All Things Open
 
Gatling Performance Workshop
Gatling Performance WorkshopGatling Performance Workshop
Gatling Performance Workshop
Sai Krishna
 
Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...
Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...
Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...
OdessaJS Conf
 
Reusability is the goal
Reusability is the goalReusability is the goal
Reusability is the goal
Red Pill Now
 
How to NLProc from .NET
How to NLProc from .NETHow to NLProc from .NET
How to NLProc from .NET
Sergey Tihon
 
Designing a Docker Stack for Symfony apps: lessons learned
Designing a Docker Stack  for Symfony apps: lessons learnedDesigning a Docker Stack  for Symfony apps: lessons learned
Designing a Docker Stack for Symfony apps: lessons learned
Gaetano Giunta
 
Angular Vienna - Use React tools for better Angular apps
Angular Vienna - Use React tools for better Angular appsAngular Vienna - Use React tools for better Angular apps
Angular Vienna - Use React tools for better Angular apps
Martin Hochel
 
Python debuggers slides
Python debuggers slidesPython debuggers slides
Python debuggers slides
mattboehm
 
Symfony vs. Message Brokers
Symfony  vs.  Message BrokersSymfony  vs.  Message Brokers
Symfony vs. Message Brokers
Gaetano Giunta
 

What's hot (20)

Improve the deployment process step by step
Improve the deployment process step by stepImprove the deployment process step by step
Improve the deployment process step by step
 
Node & Express as Workflow Tools
Node & Express as Workflow ToolsNode & Express as Workflow Tools
Node & Express as Workflow Tools
 
Develop 4 Developers
Develop 4 DevelopersDevelop 4 Developers
Develop 4 Developers
 
Unit Testing your React / Redux app (@BucharestJS)
Unit Testing your React / Redux app (@BucharestJS)Unit Testing your React / Redux app (@BucharestJS)
Unit Testing your React / Redux app (@BucharestJS)
 
The new way to extend VSTS Build and Release
The new way to extend VSTS Build and ReleaseThe new way to extend VSTS Build and Release
The new way to extend VSTS Build and Release
 
Integrating Node.js with PHP
Integrating Node.js with PHPIntegrating Node.js with PHP
Integrating Node.js with PHP
 
Front-end development automation with Grunt
Front-end development automation with GruntFront-end development automation with Grunt
Front-end development automation with Grunt
 
Designing and coding for cloud-native applications using Python, Harjinder Mi...
Designing and coding for cloud-native applications using Python, Harjinder Mi...Designing and coding for cloud-native applications using Python, Harjinder Mi...
Designing and coding for cloud-native applications using Python, Harjinder Mi...
 
Creating a continuous delivery pipeline with docker
Creating a continuous delivery pipeline with dockerCreating a continuous delivery pipeline with docker
Creating a continuous delivery pipeline with docker
 
Headless approach and Acquia - Case study - Chris Ozog
Headless approach and Acquia - Case study - Chris OzogHeadless approach and Acquia - Case study - Chris Ozog
Headless approach and Acquia - Case study - Chris Ozog
 
OpenNTF Essentials
OpenNTF EssentialsOpenNTF Essentials
OpenNTF Essentials
 
Hidden Dragons of CGO
Hidden Dragons of CGOHidden Dragons of CGO
Hidden Dragons of CGO
 
Gatling Performance Workshop
Gatling Performance WorkshopGatling Performance Workshop
Gatling Performance Workshop
 
Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...
Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...
Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...
 
Reusability is the goal
Reusability is the goalReusability is the goal
Reusability is the goal
 
How to NLProc from .NET
How to NLProc from .NETHow to NLProc from .NET
How to NLProc from .NET
 
Designing a Docker Stack for Symfony apps: lessons learned
Designing a Docker Stack  for Symfony apps: lessons learnedDesigning a Docker Stack  for Symfony apps: lessons learned
Designing a Docker Stack for Symfony apps: lessons learned
 
Angular Vienna - Use React tools for better Angular apps
Angular Vienna - Use React tools for better Angular appsAngular Vienna - Use React tools for better Angular apps
Angular Vienna - Use React tools for better Angular apps
 
Python debuggers slides
Python debuggers slidesPython debuggers slides
Python debuggers slides
 
Symfony vs. Message Brokers
Symfony  vs.  Message BrokersSymfony  vs.  Message Brokers
Symfony vs. Message Brokers
 

Similar to Add a backend and deploy!

Demo 0.9.4
Demo 0.9.4Demo 0.9.4
Demo 0.9.4
eTimeline, LLC
 
Containerized IDEs.pdf
Containerized IDEs.pdfContainerized IDEs.pdf
Containerized IDEs.pdf
LibbySchulze
 
DEF CON 27 - workshop - RYAN CHAPMAN - understanding and analyzing weaponized...
DEF CON 27 - workshop - RYAN CHAPMAN - understanding and analyzing weaponized...DEF CON 27 - workshop - RYAN CHAPMAN - understanding and analyzing weaponized...
DEF CON 27 - workshop - RYAN CHAPMAN - understanding and analyzing weaponized...
Felipe Prado
 
TiConf NYC - Documenting Your Titanium Applications
TiConf NYC - Documenting Your Titanium ApplicationsTiConf NYC - Documenting Your Titanium Applications
TiConf NYC - Documenting Your Titanium Applications
Jamil Spain
 
Documenting apps ti confnyc
Documenting apps   ti confnycDocumenting apps   ti confnyc
Documenting apps ti confnyc
Jamil Spain
 
CoffeeScript: A beginner's presentation for beginners copy
CoffeeScript: A beginner's presentation for beginners copyCoffeeScript: A beginner's presentation for beginners copy
CoffeeScript: A beginner's presentation for beginners copy
Patrick Devins
 
LVPHP.org
LVPHP.orgLVPHP.org
LVPHP.org
Joshua Copeland
 
Steps to Install NPM and Node.js on Windows and MAC
Steps to Install NPM and Node.js on Windows and MACSteps to Install NPM and Node.js on Windows and MAC
Steps to Install NPM and Node.js on Windows and MAC
Inexture Solutions
 
How to successfully migrate to DevOps .pdf
How to successfully migrate to DevOps .pdfHow to successfully migrate to DevOps .pdf
How to successfully migrate to DevOps .pdf
Marian Marinov
 
Introduction to node.js By Ahmed Assaf
Introduction to node.js  By Ahmed AssafIntroduction to node.js  By Ahmed Assaf
Introduction to node.js By Ahmed Assaf
Ahmed Assaf
 
DevOps Workshop Part 1
DevOps Workshop Part 1DevOps Workshop Part 1
DevOps Workshop Part 1
GDSC UofT Mississauga
 
Midwest php 2013 deploying php on paas- why & how
Midwest php 2013   deploying php on paas- why & howMidwest php 2013   deploying php on paas- why & how
Midwest php 2013 deploying php on paas- why & how
dotCloud
 
[Mas 500] Software Development Strategies
[Mas 500] Software Development Strategies[Mas 500] Software Development Strategies
[Mas 500] Software Development Strategies
rahulbot
 
[Mas 500] Intro to Programming
[Mas 500] Intro to Programming[Mas 500] Intro to Programming
[Mas 500] Intro to Programming
rahulbot
 
Node.js an Exectutive View
Node.js an Exectutive ViewNode.js an Exectutive View
Node.js an Exectutive View
Manuel Eusebio de Paz Carmona
 
PHP Vs NodeJS for Backend Web Development.pdf
PHP Vs NodeJS for Backend Web Development.pdfPHP Vs NodeJS for Backend Web Development.pdf
PHP Vs NodeJS for Backend Web Development.pdf
SofiaCarter4
 
Capistrano deploy Magento project in an efficient way
Capistrano deploy Magento project in an efficient wayCapistrano deploy Magento project in an efficient way
Capistrano deploy Magento project in an efficient way
Sylvain Rayé
 
CloudOpen North America 2013: Vagrant & CFEngine
CloudOpen North America 2013: Vagrant & CFEngineCloudOpen North America 2013: Vagrant & CFEngine
CloudOpen North America 2013: Vagrant & CFEngine
Nick Anderson
 
Opensourceman ( url for slides with animations https://goo.gl/R638tW )
Opensourceman ( url for slides with animations https://goo.gl/R638tW )Opensourceman ( url for slides with animations https://goo.gl/R638tW )
Opensourceman ( url for slides with animations https://goo.gl/R638tW )
Андрей Вандакуров
 
Build & deploy PHP application (intro level)
Build & deploy PHP application (intro level)Build & deploy PHP application (intro level)
Build & deploy PHP application (intro level)
Anton Babenko
 

Similar to Add a backend and deploy! (20)

Demo 0.9.4
Demo 0.9.4Demo 0.9.4
Demo 0.9.4
 
Containerized IDEs.pdf
Containerized IDEs.pdfContainerized IDEs.pdf
Containerized IDEs.pdf
 
DEF CON 27 - workshop - RYAN CHAPMAN - understanding and analyzing weaponized...
DEF CON 27 - workshop - RYAN CHAPMAN - understanding and analyzing weaponized...DEF CON 27 - workshop - RYAN CHAPMAN - understanding and analyzing weaponized...
DEF CON 27 - workshop - RYAN CHAPMAN - understanding and analyzing weaponized...
 
TiConf NYC - Documenting Your Titanium Applications
TiConf NYC - Documenting Your Titanium ApplicationsTiConf NYC - Documenting Your Titanium Applications
TiConf NYC - Documenting Your Titanium Applications
 
Documenting apps ti confnyc
Documenting apps   ti confnycDocumenting apps   ti confnyc
Documenting apps ti confnyc
 
CoffeeScript: A beginner's presentation for beginners copy
CoffeeScript: A beginner's presentation for beginners copyCoffeeScript: A beginner's presentation for beginners copy
CoffeeScript: A beginner's presentation for beginners copy
 
LVPHP.org
LVPHP.orgLVPHP.org
LVPHP.org
 
Steps to Install NPM and Node.js on Windows and MAC
Steps to Install NPM and Node.js on Windows and MACSteps to Install NPM and Node.js on Windows and MAC
Steps to Install NPM and Node.js on Windows and MAC
 
How to successfully migrate to DevOps .pdf
How to successfully migrate to DevOps .pdfHow to successfully migrate to DevOps .pdf
How to successfully migrate to DevOps .pdf
 
Introduction to node.js By Ahmed Assaf
Introduction to node.js  By Ahmed AssafIntroduction to node.js  By Ahmed Assaf
Introduction to node.js By Ahmed Assaf
 
DevOps Workshop Part 1
DevOps Workshop Part 1DevOps Workshop Part 1
DevOps Workshop Part 1
 
Midwest php 2013 deploying php on paas- why & how
Midwest php 2013   deploying php on paas- why & howMidwest php 2013   deploying php on paas- why & how
Midwest php 2013 deploying php on paas- why & how
 
[Mas 500] Software Development Strategies
[Mas 500] Software Development Strategies[Mas 500] Software Development Strategies
[Mas 500] Software Development Strategies
 
[Mas 500] Intro to Programming
[Mas 500] Intro to Programming[Mas 500] Intro to Programming
[Mas 500] Intro to Programming
 
Node.js an Exectutive View
Node.js an Exectutive ViewNode.js an Exectutive View
Node.js an Exectutive View
 
PHP Vs NodeJS for Backend Web Development.pdf
PHP Vs NodeJS for Backend Web Development.pdfPHP Vs NodeJS for Backend Web Development.pdf
PHP Vs NodeJS for Backend Web Development.pdf
 
Capistrano deploy Magento project in an efficient way
Capistrano deploy Magento project in an efficient wayCapistrano deploy Magento project in an efficient way
Capistrano deploy Magento project in an efficient way
 
CloudOpen North America 2013: Vagrant & CFEngine
CloudOpen North America 2013: Vagrant & CFEngineCloudOpen North America 2013: Vagrant & CFEngine
CloudOpen North America 2013: Vagrant & CFEngine
 
Opensourceman ( url for slides with animations https://goo.gl/R638tW )
Opensourceman ( url for slides with animations https://goo.gl/R638tW )Opensourceman ( url for slides with animations https://goo.gl/R638tW )
Opensourceman ( url for slides with animations https://goo.gl/R638tW )
 
Build & deploy PHP application (intro level)
Build & deploy PHP application (intro level)Build & deploy PHP application (intro level)
Build & deploy PHP application (intro level)
 

Recently uploaded

Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
FilipTomaszewski5
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
christinelarrosa
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
LizaNolte
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
Enterprise Knowledge
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 

Recently uploaded (20)

Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 

Add a backend and deploy!

  • 1. Hang on… we are starting soon! While we wait, make sure you have the code from the second workshop! If you don’t have it: ❏ run npx create-react-app chatroom ❏ go into chatroom/ and run npm install --save firebase ❏ replace the src/ folder with rb.gy/fo4dug Afterwards (or if you do have it): ❏ run npm install -g firebase-tools
  • 2. Add a Backend and Deploy! Zhenghui (Zheng) Wang Boston University DSC Boston University Developer Student Club
  • 3. Firebase Sounds cool… but what is it? Application for developing applications Can help us perform a variety of tasks: ❏ Host websites ❏ Maintain database ❏ Store static information ❏ Has easy to use implementations of common tasks such as authentication
  • 4. JavaScript: async and listeners Scary words... async: asynchronous code ❏ involves promises ❏ load page w/o database fetch listeners: implementing handlers for events ❏ change page upon new data
  • 5. React: component life cycles Components are alive!?!
  • 6. If you don’t have the code from last workshop: ❏ run npx create-react-app chatroom ❏ go into chatroom/ and run npm install --save firebase ❏ replace the src/ folder with rb.gy/fo4dug Afterwards (or if you do have it): ❏ run npm install -g firebase-tools Let’s Finish Up! Online Chat Room
  • 7. Now I should share my screen... Zhenghui (Zheng) Wang Boston University DSC Boston University Developer Student Club
  • 8. Other Hosting Options I like the sound of free... ❏ Heroku (CRA tutorial link) ❏ Firebase (CRA tutorial link) ❏ GitHub Pages (CRA tutorial link) [static pages only] ❏ Netlify (CRA tutorial link) ❏ Or… look through github student developer pack!
  • 9. That’s all! Thanks for stopping by <3 Zhenghui (Zheng) Wang Boston University DSC Boston University Developer Student Club