What is Deployment?

Explore the deployment process for React e-commerce applications, focusing on how to move your project from local development to public cloud platforms like Netlify using GitHub. Understand the benefits of cloud deployment, continuous deployment workflows, and how environment variables protect sensitive information during release.

We'll cover the following...

Advantages
Preparing our application for deployment
- Environment variables

When we build web applications, we want everyone to be able to access these web applications and websites using a URL in their web browsers without having to run any commands on their terminal. This is what deployment is all about.

Deployment is the process of moving our source code from our local computer to a public host (server or cloud platforms). It is simply the act of releasing your project for the rest of the world to see and use.

Before cloud platforms, such as Netlify, Vercel, Heroku, Firebase, and Azure, we handled hosting via hosting providers. These hosting providers, such as GoDaddy, Bluehost, Hostinger, and so on, required us to upload our static assets (such as a project build folder, which primarily consists of HTML, CSS, and JavaScript) every time we made changes. This upload is accomplished through FTP software or a system such as cPanel, which can be stressful and technical.

Developers now have access to cloud platforms that make deployments simple, thanks to the rise of Git providers such as GitHub, GitLab, and Bitbucket.

Advantages

It saves time: Deploying our applications to platforms saves time because we can deploy from our terminal or import our project from GitHub.
Continuous deployment: It enables us to implement continuous deployment, which means that whenever we make changes to our application and push its source code to our Git provider, these cloud platforms are automatically triggered, and our application redeploys to reflect all new updates.
It is cheaper: Instead of worrying about security and hosting for our basic projects, we can use these Git providers and cloud platforms, which are secure and offer free hosting.

Preparing our application for deployment

We want to ensure that sensitive information, such as our API keys and payment details in our source code, is safe from hackers before releasing our code online. For this application, we don't have to worry about this because our information isn't confidential, but it's still important to understand these best practices.

 ãF )   95@@ °nPNG


IHDR(-SäPLTE""""""""""""""""""2PX=r)7;*:>H¤-BGE8do5Xb6[eK®K¯1MU9gs3S\I§:gt'03@{V¹ÔT´ÏA}V»Ö@y6\fH¦-CII¨E+;@7_i7_jFJ«K°H£-BHaÚû,@FCL³&.0W½ÙN£ºI¨$)+BJªR¯È?v>s>uS±Ê=qP©ÁP¨ÀP§¿,?D4U^%+-M ¶K®%+,2OX+<AL²#&&D%,.I©vôTötRNSIæçJäeÀe¦©IDATxMµZEAÿÙ³	îî%R¡ïßáTThÇG»,Á®Å=²ÒîmífímnfA$â>!¦gºôHg½EßÜµ}	Ý»ýº¼kdú§¯JoÎ3æL"J¹ ÌÕüQ$âçÄ¼ffµ,é5i9Ì¯H¨/mBwÍÜw;D
Ø+&W«ª¹¨Dôo@Ê´RI©ÐB¡om.Û³ÀIEND®B`PNG


IHDR×©ÍÊePLTE""""""""""""""""""""""""2RZN¢¹J«3R[J¬)59YÁÞ0KS4W`Q«ÄL²%+-0JR)6::gtC"##?vU·Ñ?w<n{&-/YÂß=q:iuBA}A{B/IPP§¿=qK®_ÔóL³$();lzR¯ÉaÚûI¨ZÆã3U^1MU3T]ZÅâI§X¿ÜF-BGP¨À6[e,@E5ZdO§¿-BHX¿Û+=AW¾Ú,@FW¼ØQªÃ?vW¼×+<A@y"#$\Ìê4Wa\ÌëS²Ì$(*.EL^ÑñVºÕ6]h#$%G¡#&';jwV¹Ô-CIL±ZÄá^Ðï>uS°Ê/HNM ·_Õõ\ËéM ¶8doDD>t+=B[Èæ,>C>t<o}@y0LS.EKT´Î$'(%,.A~W½ÙC%+,\ÊèC!ätRNSíîG¾ÖOIDATxlÃB¶Qu´ß_È³<Ë¦Ýveê²óa6AÎ¾ûv¢{@ÎE'ÞdIÕ!çí ðCÔTþg1ÂE(ÏñSQsâi
ÄZÿ·V¹Ð)ég!ªhÎùtéº-i}µµ<Õ?¶lBZaÄ´4{DÓâ»_e8¥yÇÀ3)¥?°f;8.ã¤tÌ=å;	:ã52fKZìlù¨ØÍ9.#ÒAÁqÌúÛ®£Vÿ`=$¬Â?_¶¾®ÔqMç.ïJ$
?^q÷ñíÛï.},ìsæÝ_TttÔ¾1#/(ì-[è`è`ÌÚïÅðZd5?ÎebZ¿Þi.ÛæìqÎ+1°}Â5ùïçd¨GÏøIEND®B`PNG


IHDR  D¤ÆAPLTE"""""""""""""""""""""""""""2RZVºÖ_ÔôU·Ñ=r$()'25]ÎíC0LS<o}XÀÜX¿Û0JQ=p~D<n{VºÕE8do_ÔóEFH¥9dp_ÕõH¤I¨F6[e`Ö÷`×øL³/GM_ÓòU¸Ó'02P©Á/IPPªÂX¿Ü&/1;ly3R[`ØøG¡T³Í\ÌêaÚû1OW"##Q«ÄaÙúR®Ç=q`Öö.EL+=ATµÐ-CIK®#&'C^ÐïI¨&.04U^^Ñð@yZÇä$(*[Éç^Ññ,?DR¯É"#$1NV1MTD>u;kxG R¯È/HN&-/@y>s>t@z]ÍìP¨À$'(D]Ïî<n|0JRU·Ò×\¼	tRNS%ñ'ïó(ò~ÑÝèIDATxC1F_Ý¿MmÛ¶4¶m{ÿ¤nçáÓ	®A$à$b HeøTãWÄÂhh´:PtZ
Q«0@.`Þ`4-V`³Zì&A#ÁébkÝÄãñúØ>.''ø`C$FØÏ	(±x"6XácTÚéL§@Iù;dd-¹|¾P,È9¡RÕÍf3¢¿F½VmMíX§ÚíÍç@Y7ÎõºÕN¬=åÈÊªu
}Ö¬«+eaiq ¤Ö76íÝ=h
ûZìíîlë}á¨Ê±¥[F«I9A¹k9¥Öëä3¢Ã9Î¡óqB~Øáb¸ÃåU_¸^Ü[·ôwý{zvzÙ(£(£(þfòqÉGÉïkñÏçY¾ÿªfäòÇ~à:*4ÓQ\O> ¼<×úW£éÍZ|ÞÅ7ñïjTÔäãn½»¢®`$Hð+ò¿GOñûð*èxø¥X*|^ÿdIEND®B`PNG


IHDR@@·ì:PLTE"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%+-@yW¼×`×ø^ÑñS²ÌC,>C*8<XÁÝaÚûaÙùMµ+<AaÙúXÀÜ#%%TµÐL´=q>uK°`ÖöA}L±8do=r%+,@y^ÐïS²Ë)59=qP©ÁU·Ò"#$PªÂ\Êè0JQQªÃ"##U·Ñ#&&_Ôô>t>s`Øø_Ôó5Yc1OW5Zd1NV+=B1MU+;@/GM\Ìê*;?3S\)8<2RZ_Õõ+=A]Ïî,@F,@E&-/0KS7alO¦¾9dp8amB~EP¨ÀN¢¹'023T]]Îí?x3U^C6\gU¸Ó&.0D7_iRÆH¥I¨M ¶$(*?vZÆãX¿Ü-AG#$%[Éç8co[ÈæW½ÙC'25?v8bn%*+L²N£º2PX)7;=p~(58^ÒòP§¿4WaQ«ÄT´Ï0JRQ¬ÅT´ÎI¨6]hR¯ÉT³Í0LSF9eqEE9gsFC#&'\Ëé`Ö÷&/16\fBA{R®Ç]Íì(47%,.*:>*9=9fr:gt7^iU¶Ð?wZÇäX¿Û^ÑðQÅH£)6:V¹Ô'034U^E.EL.FMK®@zS×tRNS*×øÖý	»½+üùóÔ,ØúôÀ=VIDATx¤ËµC!ÐïC|ÿãÚ^yR]ÕMÛáO]ßÔÕÝ0NÈ2ÍËí¿"ªª¢(0Vã(ÀY%PDT-~(m¬ó!âKÞY£~´üIÒf{³ÛÞáa¼§§ô3ÕOp&Ð¤¡x÷#jôÚ¶mméòc)]m¤É)Æ§gfçhk²ñÎÒ ægg¦ÇìÐ+XÅêuiyV×ª·k«°²\[ü:,Ø6ØÜjÄ²
;»"»;°×XùþÛfÁáÇÍûýSÎÎÏÏ8=Þo¾;æèÐ(öÓ¥BkÔeûÍ\7p+mîîáþNÚ<ÀQðOÒæùô³´yg»ttÐëoý½£ìVð»Òäsýü¬ø&_ðaüïV~à·Ö?*8àQ ;8¥Á,¸¤f¥1Üx¤×§ñ*øÑA¯Ôð°a#±³¶¦#nPi+¼¶CÈ,ÆèäÍ_áNbÑáÃ¸çHB*ÚÒ¦ L(^<ñÃL6pJ¾PÉ¥©¢%"R,ä9Èe3eRËa1(
¢ßqÇ8Ù´mKË±mÆ¶mÛü·yi!èÎªYÏuë ÀÏ_Àï?i÷ý+òÄA|ù{´?¿_En).JËD¤<
©¬¢Z\Ts©R*(	¯©JuX/
4J9¡5·DEµ4kÇ4&i¥V4Ú¡®Ð¯vsf:àg,¢èBC»î$¶ºÍùîá@ôI_?<!^ÈàÓ½ÇöäõB%Làw±FD1Á¨(F±øH%0Æ±¿ÅØ(¢0ÅÄ'ÅæN.0u@íYPWìIüaNâKÄ?ðÓµ=ev/c±Ó0c0÷2Êë:06R-uÒÄ\QÌ¶ää´¼µ6R#
ÆF³6Òñ·rÕìuæmâðÂIñi~ Åü ÃsPþ"±ó¼
eiyå£ËPàãÊò§¡ÝÒ,S]U¦ºVªÖ©®Z¦êoëë·xzãâÆSnm¬{ÚºwaÙÏÅ»´Ýõ(mg/®þå½À¿¼û[§b³µq¶Å&Õ¯¹$ñzÈH>aÌKT1/æø1O0¾.hÍYþAÓö£
-ê>Ûº«¢XÕ¢î}ß¨ëÛÑ;ÃöN´ØvÅýÎ¸ÿ1ë×ÄO@&v/Äþ_ö\ôÇ\í.½+0;!fÊ¦´Ó%Â JY·OÂ'/Å]_;ßÀ'"&Nªn	aQ^cx¦AáÒIEND®B`

Complete application showing all information with hidden API

In our application, we did not include our API keys within our codes because our SPA widget handled it for us, but when writing our codes on our local computer, we need to handle all of this locally. This is where environmental factors come into play.

Environment variables

Environment variables are fixed values that are available throughout our project. These variables are declared in our .env file and are accessible via the process.env object. It allows us to avoid sharing secrets in our code, which increases deployment flexibility.

When we download our project to our PC, we make a .env file, add our API keys, and use them within our application.

Note: When we add our API keys to the .env file, we have to ensure that this file is not pushed when we push our code to our Git provider. This is accomplished by including it in our project's default .gitignore file.

1.Introduction

2.Building E-commerce Application Frontend with React

3.Handling Content Management with Hygraph

4.Fetch Content from Hygraph with GraphQL

5.Implementing a Carting System with Snipcart

6.Deploying an E-commerce Application

7.Conclusion

8.Appendix

What is Deployment?

Advantages

Preparing our application for deployment

Environment variables