How do we casually create an Elixir community website with Phoenix?

How do we casually creat e an Elixir community websit
e with Phoenix? Ryotaro Imahashi (kokura.ex ) 10/15, 2021

Welcome to

4VNNBSZ 5IJTUBMLTIPXTIPXXFDSFBUFB b$BTVBM`BOENJOJNBMJTUJDXFCTJUFPG LPLVSBFY BMPDBM&MJYJSDPNNVOJUZJO +BQBO XJUI1IPFOJY BOEQVCMJTIJU *`MMTIPXXIBULPLVSBFY`TBDUJWJUJFT
MBUFS

*XJMMJOGPSNB63-PG UIFTFTMJEFTGPSNZUBML MBUFSCZUXFFU !JN@NJPMBC

5IJTUBMLGPDVTPOUIFOFYUQSPDFTT 'PSb$BTVBM`BOERVJDLMZSFMFBTFBNJOJNBMJTUJD1IPFOJYXFCTJUF 1SFQBSFUIF1IPFOJYQSPKFDUCZOPFDUPXJUI%PDLFS "EBQU$44MBZPVUCZ5BJMXJOE$44 1VUJUPO)FSPLV1BB4UPSFMFBTFUIFXFCTJUFUPUIFQVCMJD 1SFQBSFUPCVJME$*BOE$%UPNBLFPQFSBUJPOTFBTJFSCZVTJOH $JSDMF$*WJB(JU)VC

5IJTUBMLEPFT/05GPDVTPOUIFOFYUQSPDFTT 5IFGPMMPXJOHJTBDUVBMMZJNQMFNFOUFEBOEFYFDVUFE CVUNVDI PGUIFFYQMBOBUJPOJTPNJUUFE 0QFSBUF(JUNBOBHFNFOU *NQMFNFOUNBSLVQ)5.- *NQMFNFOUUFTUT

5IFEJBHSBNPGUIJTTZTUFN HJUQVTI UP(JU)VC %FUFDUJPOPG DIBOHFTCZ$JSDMF$* #VJMEBOE %FQMPZUP)FSPLV IUUQTLPLVSBFYIFSPLVBQQDPN %PDLFSJNBHF FMJYJSTMJN
*NQMFNFOUBUJPOXJUI 1IPFOJY OPFDUP 5BJMXJOE$44 .BDIJOF&YFDVUPS -JOVY7. )FSPLV $POUBJOFS3FHJTUPSZ

':* 5IF(JU)VCSFNPUFSFQPTJUPSZ63-GPSUIJTQSPKFDUXFIBWF JNQMFNFOUFE IUUQTHJUIVCDPNNJPMBCLPLVSBFY 1MFBTFUBLFBMPPLGPSZPVSSFGFSFODF 5IFDPEFPO(JU)VCJTBEEFEGSPNUIBUBUUIFQSFTFOUBUJPO

BCPVUNF

!JN@NJPMBC !JNBJNBccJN 3ZPUBSP*NBIBTIJ JO+BQBO *MJWFJO,JUBLZVTIV +BQBO *`N "XFCEFWFMPQFSPGQJYJW*OD BOE "OPSHBOJ[FSPGLPLVSBFY
BMPDBM &MJYJSDPNNVOJUZ

IUUQTXXXQJYJWOFU QJYJW*OD QJYJW*ODQSPWJEFTBWBSJFUZ PGTFSWJDFTUPTVQQPSU DSFBUPST DFOUFSFEPOUIF JMMVTUSBUJPODPNNVOJDBUJPO TFSWJDFlQJYJWz *GZPV`EMJLFUPUSZPVUPVS TFSWJDFT
QMFBTFEPTP IUUQTWSPJEDPNFO

.ZGBWPSJUFDPOUFOUT .ZNBJOGBWPSJUFDPOUFOUTBSFGPMMPXJOHT "OJNF /FPO(FOFTJT&WBOHFMJPO "UUBDLUIF5JUBO %FNPO4MBZFS,JNFUTVOP:BJCB 'VMMNFUBM"MDIFNJTU BMDIFNJTU
/BUTVNFT#PPLPG'SJFOET 7JPMFU&WFSHBSEFO .VTJD "WJDJJ ;FEE 4UFWF3FJDI "OENPSF

.ZBOPUIFSBDUJWJUZ %BJUPSZV"JLJ+VKVUTV 0OFPGUIF+BQBOFTFUSBEJUJPOBMNBSUJBMBSUT 8FQSBDUJDFb,BUB`PG+VKVUTV ,FOKVUTV *BJKVUTV #PKVUTV BOENPSF
1IPUP`TEFTDSJQUJPO ,BUBPG+VKVUTV b,BSBNF;VNF` 5FBDIJOHB#PKVUTVUSJBMMFTTPO 4IFJTBOJOUFSOBUJPOBMTUVEFOUGSPN#FMHJVN *BJKVUTVEFEJDBUJPOQFSGPSNBODFBUUIF /BHPTIJ'FTUJWBM "MMJNBHFTXFSFUBLFOJO'VLVPLB#VEPLBOCFGPSF UIF$07*%FQJEFNJD

BCPVULPLVSBFY

lLPLVSBFYzJTBDPNNVOJUZ UIBUQSPNPUFTUIF&MJYJS QSPHSBNNJOHMBOHVBHFBOEJUT XFCBQQMJDBUJPOGSBNFXPSL 1IPFOJY JO,JUBLZVTIV XIFSF CPUIIJHITQFFEQSPDFTTJOH QFSGPSNBODFBOEIJHI
EFWFMPQNFOUFGGJDJFODZDBO CFBDIJFWFE LPLVSBFY

LPLVSBFYBDUJWJUZ .PLVNPLVUFDINFFUVQ 8IJDIJTBIBDLBUIPOXIFSFFBDIBUUFOEFFBDUT BMPOFUPXBSEFBDIHPBM JOSFMBY LPLVSBFY3BEJP &WFSZ8FEOFTEBZGSPNBNUPBN
+BQBO UJNF POBJSBU5XJUUFS4QBDFT JO+BQBOFTF 5IJTJTBOBVEJPEJTUSJCVUJPOQSPHSBNGSPN LPLVSBFY 5IFQSPHSBNGPDVTFTPOOFX*5UPQJDT JODMVEJOH UIPTFSFMBUFEUPUIF&MJYJSEFWFMPQNFOUMBOHVBHF 5IFSFXJMMCFBRVFTUJPOBOEBOTXFSDPSOFSGPS MJTUFOFSTBOEUFYUCBTFEJOGPSNBUJPOTIBSJOHPOUIF LPLVSBFYDIBOOFMJOUIFAFMJYJSKQATMBDL 5IPVHIXFUBMLDVSSFOUMZPOUIFSBEJPJO+BQBOFTF XF`SFXFMDPNF&OHMJTITQFBLFSTBOEXJMMUSZUP JOUFSQSFUCPUIJO&OHMJTIBOE+BQBOFTF LPLVSBFY3BEJP JOGPSNBUJPO IUUQTGVLVPLBFYDPOOQBTTDPNFWFOU

LPLVSBFYBDUJWJUZ 044DPOUSJCVUJPO LPLVSBFYBOE1FMFNBZ.FFUVQ B +BQBOFTF&MJYJSDPNNVOJUZ USZUP DPOUSJCVUF044 FTQFDJBMMZ
/Y &9-" BOE#FBN"TN XIJDISFBMJ[FIJHI TQFFEQSPDFTTJOHQFSGPSNBODF 1FMFNBZ.FFUVQ IUUQTQFMFNBZDPOOQBTTDPNFWFOU

$IBQUFS $IFDLJOHUIFEFWFMPQNFOU FOWJSPONFOUBOE CFHJOOJOHPGUIFTUPSZ

5IFWFSJGJFEWFSTJPOTPGUIJTUBML 5IFEFWFMPQNFOUNBDIJOFGPSUIJTUBMLJTB.BD*OUFM WFSTJPO#JH 4VS BOEFBDIWFSJGJFEWFSTJPOTPGUFDIOPMPHJFTBSFBTGPMMPXT &MJYJS &SMBOH051 1IPFOJY /PEFKT
5BJMXJOE$44

5IFWFSJGJFEWFSTJPOTPGUIJTUBML 1IPFOJY

/PX MFUTTUBSUXJUIUIFDPOUFOUTPGUIJTUBML

UJUMFEXJUI&MJDB`T"EWFOUVSFT JO1IPFOJYMBOE /PX MFUTTUBSUXJUIUIFDPOUFOUTPGUIJTUBML

*OUSPEVDJOHUIFNBJODIBSBDUFS

.BJO"DUPS /05NFBOTBDUPSPGDPODVSSFODZ FYFDVUJOHTZTUFN

.BJO"DUPS &MJDB BO&MJYJSMPWFSEFWFMPQFS /05NFBOTBDUPSPGDPODVSSFODZ FYFDVUJOHTZTUFN

.BJO"DUPS &MJDB BO&MJYJSMPWFSEFWFMPQFS TIFXBOUTUPDSFBUFBUFDI DPNNVOJUZTJUFDBTVBMMZ /05NFBOTBDUPSPGDPODVSSFODZ FYFDVUJOHTZTUFN

8JSFGSBNFPGUIFTJUF XJTIGVMUIJOLJOH ( ´ʔ`)ɻоʢ

8IJUF3BCCJUBMTPTBJE *NMBUF *NMBUF *NMBUFz *XBOOBNBLFJUNVDI RVJDLFSBOEFBTJFS

*XBOOBPQFSBUF DPOUJOVPVTEFMJWFSZ XJUIFBTF

#58 *`WFOFWFSVTFEB XFC1IPFOJYGSBNFXPSL CVU*IFBSEJU`TOJDFGPS UIJTTJUVBUJPO

"OE UIF1IPFOJYWFSTJPOXBTSFMFBTFE UIFMBTUNPOUI

*U`TQFSGFDUUJNJOH JTO`UJU

0, MFU`TTUBSU 1IPFOJYXJUINF

$IBQUFS TFUVQPG1IPFOJY

8IBUUIJTDIBQUFSDPWFST 8FXJMMSVOUISPVHIUIFQSPDFTT GSPNCVJMEJOHUIF%PDLFS EFWFMPQNFOUFOWJSPONFOUUPCVJMEJOH 1IPFOJY BOEEJTQMBZJOHUIFGJSTUl8FMDPNFUP 1IPFOJYzTDSFFO 4UFQT 1SFQBSFEPDLFSGJMFT
&YFDVUFAEPDLFSDPNQPTFCVJMEA *OTUBMM1IPFOJYGSBNFXPSL

% tree -L 2 .(e.g. kokuraex/ ) ├── README.m d
├── ap p │ └── Dockerfil e └── docker-compose.yml /PX XFXJMMNBLFUIF1IPFOJYQSPKFDU EJSFDUPSZBOEQSFQBSFUIFEPDLFSGJMFTBT TIPXOPOUIFSJHIU "CPVUUIFQSPKFDUEJSFDUPSZ XFOBNFE lLPLVSBFYzUIJTUJNF /PUF 8FPNJUNFOUJPOJOHTFWFSBMGJMFT GPS FYBNQMF 3&"%.& HJUJHOPSF BOENPSF *OUIFGPMMPXJOHDIBQUFST UPP 1SFQBSFEPDLFSGJMFT

[app/Dockerfile ] FROM elixir:1.12.2-sli m WORKDIR /usr/src/ap p RUN apt-get
update -y && \ apt-get upgrade -y && \ apt-get install -y \ build-essential \ curl \ git \ gzip \ inotify-tools \ ssh \ sudo \ ta r RUN apt-get clea n RUN mix local.hex --force && \ mix local.rebar --forc e RUN mix archive.install hex phx_new 1.6.0 --forc e CMD [ "mix", "phx.server", "--no-halt" ] 1SFQBSFEEPDLFSDPNQPTFZNMBOE %PDLFSGJMFJTIFSF *UTQFDJGJFT1IPOFOJYWFSTJPO 1SFQBSFEPDLFSGJMFT [app/Dockerfile ] version: "3 " services : app : build: ./ap p volumes : - ./app:/usr/src/ap p ports : - "4000:4000 " stdin_open: tru e tty: tru e command: sh -c "mix phx.server --no-halt "

% docker compose build "GUFSQSFQBSFEEPDLFSGJMFT MFU`TFYFDVUF AEPDLFSDPNQPTFCVJMEA &YFDVUFAEPDLFSDPNQPTFCVJMEA

% docker compose run app mix phx.new . --app kokuraex
—no-ect o … The directory /usr/src/app already exists. Are you sure you want to continue? [Yn] y … Fetch and install dependencies? [Yn] y … "GUFSEPOFPGAEPDLFSDPNQPTFCVJMEA JOTUBMM1IPFOJY *OTUBMM1IPFOJYGSBNFXPSL

% tree -L 2 . ├── README.m d ├── ap
p │ ├── Dockerfil e │ ├── README.m d │ ├── _buil d │ ├── asset s │ ├── confi g │ ├── dep s │ ├── li b │ ├── mix.ex s │ ├── mix.loc k │ ├── pri v │ └── tes t └── docker-compose.ym l *OTUBMM1IPFOJYGSBNFXPSL … We are almost there! The following steps are missing : $ cd . Start your Phoenix app with : $ mix phx.serve r You can also run your app inside IEx (Interactive Elixir) as : $ iex -S mix phx.server 8FTBXUIFGPMMPXJOHNFTTBHF BOEDPOHSBUVMBUJPOT UIFJOTUBMMBUJPOXBTDPNQMFUFE "OEBUUIFNPNFOU UIFEJSFDUPSZUSFFJTTIPXOPO UIFSJHIU

"GUFS1IPFOJYJOTUBMMBUJPO GJY*1UPl zGPSEFWFYTGJMFCZVQEBUFBTCFMMPX *OTUBMM1IPFOJYGSBNFXPSL [app/config/dev.exs ] config
:kokuraex, KokuraexWeb.Endpoint , # Binding to loopback ipv4 address prevents access from other machines . # Change to `ip: {0, 0, 0, 0}` to allow access from other machines . - http: [ip: {127, 0, 0, 1}, port: 4000] , + http: [ip: {0, 0, 0, 0}, port: 4000] ,

/PX XFFYFDVUFEPDLFSDPNQPTFVQBOE MPPLMPDBMIPTUJOCSPXTFS *OTUBMM1IPFOJYGSBNFXPSL

*OTUBMM1IPFOJYGSBNFXPSL :FT XFEJEJU 8FHPUUIFQSPPGUIBUUIFTDSFFO TIPXFEVQl8FMDPNFUP1IPFOJYz 5IFGJSTUNJTTJPOXBTDPNQMFUFE

$IBQUFS "EBQU$44MBZPVUCZ 5BJMXJOE$44

8IBUUIJTDIBQUFSDPWFST 5PQSFQBSFUIFMBZPVUXJUIFBTF XFXJMMVTF 5BJMXJOE$44 *OUIJTTFDUJPO XFXJMMGPDVTPOUIFTFUVQBOE JOUSPEVDUJPOPG5BJMXJOEJNQMFNFOUBUJPO 8FXJMMBMTPFYQMBJOXFCTJUFDPOUFOUDSFBUJPO BOEQBHFUSBOTJUJPOT CVUXFXJMM/05FYQMBJO
NVDIBOETLJQBCPVUNBSLVQ UFTUT BOEPUIFS JNQMFNFOUBUJPOEFUBJMT 4UFQT *OTUBMM/PEFKT 1SFQBSF5BJMXJOE$44FOWJSPONFOU 1SFQBSFFBDISPVUFQBHFBOENBSLVQ 4FUUBJMXJOEDMBTTJOMJOFDPEF

5IFNBJOSFBTPOJTUIBUCZ BEPQUJOH5BJMXJOE$44 B VUJMJUZGJSTU$44GSBNFXPSL XFXJMMCFBCMFUPNBLFHPPE QSPHSFTTJOPVSNJTTJPOUP RVJDLMZTFUMBZPVUTUZMFT XJUIPVUXSJUJOHSBX$44 8IZXFDIPJDF5BJMXJOE$44
IUUQTUBJMXJOEDTTDPN

5BJMXJOE$44SFRVJSFTUIFFOWJSPONFOUPG /PEFKT CVUPVS1IPFOJYWFSTJPOQSPKFDU EPFTOPUIBWFUIFPOFZFU 4P XFNVTUBEEUIFTUFQPGJOTUBMMBUJPO/PEFKT JO%PDLFSGJMF *OUIJTUBML XFVTFOQNQBDLBHFOUPJOTUBMM /PEFKTBOENBOBHFUIFWFSTJPOT
5IFSFJTBMTPBSFBTPOXIZ*XBOUUPTQFDJGZ FWFONJOPSWFSTJPOTPG/PEFKTBOEBWPJE QSPCMFNTDBVTFECZWFSTJPOEJGGFSFODFT "GUFSJOTUBMMJOH/PEFKT XFSFCVJMEDPOUBJOFST BHBJOXJUIbEPDLFSDPNQPTFCVJME` *OTUBMM/PEFKT (for confirmation ) % docker compose exec app node - v v16.9.1 /05&O OQNQBDLBHF IUUQTXXXOQNKTDPNQBDLBHFO [app/Dockerfile ] … + RUN apt-get install -y nodejs np m + RUN npm install -g n + RUN n 16.9. 1 + RUN apt-get purge -y nodejs np m RUN apt-get clea n … % docker compose build

'PSTFUVQ5BJMXJOE$44TNPPUI XFTJNQMZ DIPPTFIFYQBDLBHF lQIY@HFO@UBJMXJOEz 5IJTCVJMETVQ5BJMXJOE$44EFWFMPQNFOU FOWJSPONFOUUPBOFX1IPFOJYBQQMJDBUJPO OJDFBOERVJDLMZ #JHUIBOLTUPUIFIFYQSPKFDUPXOFS ,FWJO -BOH
5IFGJSTUTUFQUPEPJTUPTUPQSVOOJOH DPOUBJOFSTBOEUIFOVQEBUFNJYFYTBTTIPXO POUIFSJHIU "GUFSUIBU XFEPNJYEFQTHFUBOEDPNQJMF 1SFQBSF5BJMXJOE$44FOWJSPONFOU % docker compose run app mix deps.compile /05&QIY@HFO@UBJMXJOE )FY IUUQTIFYQNQBDLBHFTQIY@HFO@UBJMXJOE (JU)VC IUUQTHJUIVCDPNLFWJOMBOHQIY@HFO@UBJMXJOE [app/mix.exs ] defp deps d o [ .. . - {:plug_cowboy, "~> 2.5" } + {:plug_cowboy, "~> 2.5"} , + {:phx_gen_tailwind, "~> 0.1.3" } ] end % docker compose run app mix deps.get

5IFOFYFDVUFUIFDPNNBOEAEPDLFSDPNQPTFSVO BQQNJYQIYHFOUBJMXJOEA /PXXFBSFSFBEZUPJNQMFNFOU$44XJUI5BJMXJOE 5IFNBJOGJMFTXIFSFUIFEJGGFSFODFTPDDVSSFEBSF TIPXOPOUIFSJHIU *GXFXBOUUPLOPXNPSFBCPVUQIY@HFO@UBJMXJOE UIF(JU)VCBOE)FYEPDVNFOUTBUUIF63-POUIF SJHIUXJMMIFMQVT 0GDPVSTF
XFXJMMBMTPGJOEUIFPGGJDJBM5BJMXJOE$44 EPDVNFOUBUJPOWFSZIFMQGVM IUUQTUBJMXJOEDTTDPNEPDTJOTUBMMBUJPO 1SFQBSF5BJMXJOE$44FOWJSPONFOU % docker compose run app mix phx.gen.tailwin d * creating assets/package.jso n * creating assets/tailwind.config.j s * injecting assets/css/app.cs s * injecting config/dev.ex s * injecting mix.ex s * injecting assets/js/app.j s NPM install new dependencies? [Yn] y * running cd assets/ && npm install mainly dif f modified: app/assets/css/app.cs s modified: app/assets/js/app.j s modified: app/config/dev.exs /05&QIY@HFO@UBJMXJOE )FY IUUQTIFYQNQBDLBHFTQIY@HFO@UBJMXJOE (JU)VC IUUQTHJUIVCDPNLFWJOMBOHQIY@HFO@UBJMXJOE

/PXMFU`TTUBSUSFSVOOJOHDPOUBJOFSTCZ AEPDLFSDPNQPTFVQABOEDIFDLSFTVMUTJO PVSCSPXTFS 8JUIUIFJNQMFNFOUBUJPOFOWJSPONFOUPG 5BJMXJOE$44JOQMBDF UIFEFGBVMU$44TUZMF PG1IPFOJYIBTCFFOSFNPWFE /PXMFUTUSZPOFJNQMFNFOUBUJPOPG5BJMXJOE $44GSPNUIJTTUBUF 1SFQBSF5BJMXJOE$44FOWJSPONFOU

"EEUIFDMBTTFTQSFQBSFECZ5BJMXJOE$44JOUIFIUBHCZ JOMJOFTUZMF 5IJTNBHJDIBTUIFFGGFDUPGDPOWFSUJOHUIFGPOUXFJHIU GPOU TJ[F BOEDPMPSPGGPOUTUPXIBUFWFSXFXBOU *GXFXBOUUPLOPXNPSFBCPVUXIJDIDMBTTEPFTXIBU JUJT SFDPNNFOEFEUPTFFUIF5BJMXJOE$44DIFBUTIFFU63- 'PSFYBNQMF
UIFSFJTBDIFBUTIFFUUIBUMPPLTMJLF lUBJMXJOEDPNQPOFOUTDPNz IUUQTUBJMXJOEDPNQPOFOUTDPNDIFBUTIFFU 1SFQBSF5BJMXJOE$44FOWJSPONFOU [app/lib/kokuraex_web/templates/page/index.html.heex ] <section class="phx-hero" > - <h1><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h1 > + <h1 class="font-medium text-4xl text-indigo-600"><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h1 > <p>Peace of mind from prototype to production</p>

/PX XFXJMMTUBSUJNQMFNFOUJOHUIFDPOUFOUTFUVQBOE QBHFUSBOTJUJPOTGPSPVSXFCTJUF LPLVSBFY 1BHFUSBOTJUJPOTBSFTIPXOCFMPX BOEUIF JNQMFNFOUBUJPOJTEPOFBTTIPXOPOUIFSJHIU 5IFFYBNQMFTIPXOIFSFJTGPSUIFBCPVUQBHF CVUUIF JNQMFNFOUBUJPOGPSUIFFWFOUQBHFDBOCFEPOFJOUIF
TBNFXBZ 3FQMBDFBCPVUXJUIFWFOUBOEDMPOFJU 1MFBTFOPUFUIBUXFXJMMOFFEUPTUPQBOESFTUBSUUIF DPOUBJOFSBTOFFEFE 1SFQBSFFBDISPVUFQBHFBOENBSLVQ (page transitions ) hom e !"" abou t #"" event (New file ) [app/lib/kokuraex_web/templates/about/index.html.heex ] <h1>About</h1> [app/lib/kokuraex_web/router.ex ] … get "/", PageController, :inde x + get "/about", AboutController, :inde x end (New file ) [app/lib/kokuraex_web/controllers/about_controller.ex ] defmodule KokuraexWeb.AboutController d o use KokuraexWeb, :controlle r def index(conn, _params) d o render(conn, "index.html" ) en d end (New file) [app/lib/kokuraex_web/views/about_view.ex ] defmodule KokuraexWeb.AboutView d o use KokuraexWeb, :vie w end

-FUTUBLFBMPPLBUUIFlBCPVUzQBHF XIJDIIBTKVTUCFFOCPSO *UJTJOBQMBJOTUBUFXJUIOP$44DMBTTFT BQQMJFEZFU 'SPNIFSF XFDSFBUFUIFDPOUFOU JODMVEJOHUFYUBOEJNBHFT UPTFUUIF
MBZPVU 8FXPOUHPJOUPUIFEFUBJMTIFSF 5IFTPVOEPGBDMPDLUJDLJOHXIJMF NBSLVQJTCFJOHEPOFʜ 1SFQBSFFBDISPVUFQBHFBOENBSLVQ (localhost:4000/about)

4FUUBJMXJOEDMBTTJOMJOFDPEF *XJMMDBTUB 5BJMXJOE$44TQFMMʜ

4FUUBJMXJOEDMBTTJOMJOFDPEF 8FXJMMMFUZPVLOPXUIFSFTVMUTTPPOMBUFS -FUTMPPLGPSXBSEUPJU

$IBQUFS 1VUJUPO)FSPLVUPSFMFBTF UIFXFCTJUFUPUIFQVCMJD

8IBUUIJTDIBQUFSDPWFST )FSPLVJTBOJDF1BB4GPSFBTZ BQQMJDBUJPOSFMFBTF *UTVQQPSUT&MJYJS PGDPVSTF 0VSXFCTJUFJTCVJMUPOEPDLFS BOEXF XJMMUSZUPEFQMPZJUVTJOH)FSPLVT DPOUBJOFSSFHJTUSZTZTUFN 4UFQT
8IZEJEXFDIPPTF)FSPLV 4FUVQPG1IPFOJYGPSSFMFBTF 4FUVQPG)FSPLV %FQMPZ

8IZEJEXFDIPPTF)FSPLV *UTCFDBVTF JOBOVUTIFMM XF`SFVTFEUPVTJOH)FSPLV1BB4 4P MFU`TTUBSUUIFTFUVQ

8IZEJEXFDIPPTF)FSPLV 4FUVQJOQSPHSFTTʜʜ

8IZEJEXFDIPPTF)FSPLV 4FUVQJOQSPHSFTTʜʜ 0I OP

8IZEJEXFDIPPTF)FSPLV )FZ XBJUBNJOVUF *UIJOL*DBVHIUBHMJNQTFPGB1BB4UIBU MPPLTHPPE

IUUQTGMZJP

8IZEJEXFDIPPTF)FSPLV l'MZJPz 0I EFBS /P *EJEOUTFFBOZUIJOH *WFBMSFBEZTUBSUFEUPCVJMEJUPO)FSPLV TP*MMSFMFBTFJUUIFSFBOEUIFOCVJMEJUBHBJOPO
'MZJPʜ

5IFTFDSFULFZHFOFSBUFECZUIJTTUFQJTUIF POFXFMMOFFEUPEFQMPZUP)FSPLVMBUFS .BLFBOPUFPGJUTPNFXIFSF TPXFEPOU MPTFJU 5IJTJTDPOGJEFOUJBMJOGPSNBUJPO 1MFBTFEPOUSFWFBMJUUPBOZPOF "MTP VQEBUFPVS%PDLFSGJMFBOESFMFWBOU
GJMFTBTTIPXOPOUIFSJHIU 4FUVQPG1IPFOJYGPSSFMFBTF [app/config/prod.exs ] … config :kokuraex, KokuraexWeb.Endpoint , - url: [host: "example.com", port: 80] , + http: [port: System.get_env("PORT")] , + url: [scheme: "https", host: "kokura-ex.herokuapp.com", port: 443] , + force_ssl: [rewrite_on: [:x_forwarded_proto]] , … [app/Dockerfile ] FROM elixir:1.12.2-sli m + ENV MIX_HOME=/root/.mix \ + MIX_ENV=prod \ + SECRET_KEY_BASE=${SECRET_KEY_BASE} \ + PORT=400 0 + COPY . /usr/src/ap p WORKDIR /usr/src/app "OZXBZ MFUTHPCBDLBMJUUMFCJU BOETUBSUXJUIUIFTFUVQJO1IPFOJYGPSSFMFBTF 8FGJSTUOFFEUPDSFBUFBTFDSFULFZCZSVOOJOHUIF DPNNBOEAEPDLFSDPNQPTFSVOBQQNJY QIYHFOTFDSFUA % docker compose run app mix phx.gen.secret [app/config/config.exs ] # Configures the endpoin t config :kokuraex, KokuraexWeb.Endpoint , url: [host: "localhost"] , + secret_key_base: System.get_env("SECRET_KEY_BASE") , …

4FUVQPG1IPFOJYGPSSFMFBTF (New file) [heroku.yml ] build : docker : web:
app/Dockerfile [docker-compose.yml ] … + environment:SECRET_KEY_BASE=“TooLongStrings……… ” stdin_open: tru e tty: tru e command: sh -c "mix phx.server —no-halt" 1MFBTFOPUFUIBUUIFTFDIBOHFTNBZQSFWFOUPVSMPDBM %PDLFSEFWFMPQNFOUFOWJSPONFOUGSPNSVOOJOHQSPQFSMZ *GTP XFTIPVMEUBLFUIFGPMMPXJOHTUFQT 3FXSJUFEPDLFSDPNQPTFZNMBTTIPXOPOUIFSJHIU XJUI4&$3&5@,&:@#"4&CFJOHBMPOHEVNNZUFYUPG ZPVSDIPJDF 8FDBOBMTPSFNPWFUIFATFDSFU@LFZ@CBTFAMJOFGSPN BQQDPOGJHEFWFYT *OUIFGVUVSF JUXPVMECFOJDFUPIBWFUXP%PDLFSGJMFT POFGPSEFWFMPQNFOUBOEPOFGPSSFMFBTF 8FPNJUBOFYQMBOBUJPOPGUIBUIFSF 0PQT XFGPSHPUPOFNPSFJNQPSUBOUUIJOH 8FTIPVMEDSFBUFBIFSPLVZNMGJMFBOEQVUJUJOUIFSPPU PGPVSQSPKFDUEJSFDUPSZ [app/config/dev.exs ] … code_reloader: true , debug_errors: true , - secret_key_base: “LongPreWrittenWtrings…………… ” watchers: [ …

/PUF 8FXJMMOPUFYQMBJOIPXUPDSFBUFB)FSPLVBDDPVOUIFSF*GZPVIBWFOUDSFBUFEBO BDDPVOUZFU QMFBTFSFGFSUPUIFPGGJDJBMXFCTJUFGPSFBTZUPGPMMPXJOTUSVDUJPOTUPHFU SFBEZ IUUQTEFWDFOUFSIFSPLVDPNDBUFHPSJFTCJMMJOH *UJTCFTUJGZPVBMTPJOTUBMM)FSPLV$PNNBOE-JOF*OUFSGBDF )FSPLV$-*
)FSPLV $-*NBLFTJUFBTZUPNBOBHF)FSPLVBQQTEJSFDUMZGSPNUIFUFSNJOBM5IFJOTUBMMBUJPO QSPDFTTJTIFSF IUUQTEFWDFOUFSIFSPLVDPNBSUJDMFTIFSPLVDMJ 4FUVQPG)FSPLV /PXJUTUJNFUPTFUVQ)FSPLV -FU`TMPHJOUP)FSPLVGSPNUIFUFSNJOBM % heroku login

/PX MFUTDSFBUFB)FSPLVQSPKFDUCZFYFDVUJOHUIF DPNNBOEAIFSPLVDSFBUFBXFTPNFBQQOBNFA *OUIFBXFTPNFBQQOBNFGJFME XFTIPVMEFOUFS UIFOBNFPGUIFBQQMJDBUJPOOBNFXFXBOU"OE UIJTTUSJOHXJMMCFEJSFDUMZJODPSQPSBUFEBTQBSUPG UIFBQQMJDBUJPO`TQVCMJD63-
"UUIFTBNFUJNF JUXJMMSFHJTUFSPVS)FSPLV SFQPTJUPSZUPUIFHJUSFNPUFSFQPTJUPSZ$IFDLJU PVUJOUIFAHJUSFNPUFADPNNBOE 8FMMBMTPOFFEUPBEEUIFTFDSFULFZXFDSFBUFE FBSMJFSUPUIF)FSPLVFOWJSPONFOUWBSJBCMFT -FU`TSFHJTUFSCZFYFDVUJPOUIFDPNNBOEAIFSPLV DPOGJHTFU4&$3&5@,&:@#"4&YYYYYYYYYYYYA 4FUVQPG)FSPLV % heroku create kokura-e x Creating ⬢ kokura-ex... don e https://kokura-ex.herokuapp.com/ | https:// git.heroku.com/kokura-ex.git % heroku config:set SECRET_KEY_BASE=xxxxxx x Setting SECRET_KEY_BASE and restartin g …

/PXMFUTHFUSFBEZUPEFQMPZB%PDLFSCBTFE QSPKFDUCZVTJOHUIF)FSPLV$POUBJOFS 3FHJTUSZNFDIBOJTN 'PSBNPSFEFUBJMFEFYQMBOBUJPOPGUIF)FSPLV $POUBJOFS3FHJTUSZ JUXPVMECFBHPPEIFMQFS UPSFBEUIFPGGJDJBMEPDVNFOUBUJPO IUUQT EFWDFOUFSIFSPLVDPNBSUJDMFTDPOUBJOFS SFHJTUSZBOESVOUJNF
)FSF XFXJMMGPDVTPOUIFFYFDVUJPOTUFQT )PXFWFS JUJTWFSZFBTZUPEP TPMFUTSVOUIF DPNNBOEPOUIFSJHIU 4FUVQPG)FSPLV % heroku container:logi n Login Succeeded % heroku stack:set containe r Setting stack to container... done

&OTVSFUIBUPVSDPEFJTBMMHJUDPNNJUUFE BOEUIFO SVOUIFDPNNBOEAHJUQVTIIFSPLV NZ@CSBODINBJOA 5IJTXJMMQVTIPVSGJMFT JODMVEJOHIFSPLVZNM UPUIF SFNPUFSFQPTJUPSZPG)FSPLV /PUFUIBUXFSFQMBDFUIFMFUUFSTlNZ@CSBODIzXJUI
UIFOBNFPGUIFCSBODIXFSFXPSLJOHPO*O EFUBJM UPEPBUSJBMQVTIUP)FSPLVXIFOXFSFJO UIFEFWFMPQNFOUHJUCSBODI XFOFFEUPTQFDJGZ TPNFUIJOHMJLFzNZ@CSBODINBJOz 0ODFXFWFEPOFUIJT NPWFUPUIFBQQEJSFDUPSZ BOEJUTUJNFGPSUIFQSPEVDUJPOSFMFBTFUJNF 3VOAIFSPLVDPOUBJOFSQVTIXFCABOEAIFSPLV DPOUBJOFSSFMFBTFXFCA %FQMPZ % cd ap p % heroku container:push we b … Your image has been successfully pushed. You can now release it with the 'container:release' command . $ heroku container:release we b Releasing images web to phx- containers... done % git push heroku my_branch:main

6OGPSUVOBUFMZ JGUIBUEPFTOUXPSL XIBUEPXFEP 5IFDPNNBOEAIFSPLVMPHTUBJMAXJMMIFMQVT $IFDLPVSMPHTBOEUSZUPTPMWFUIFQSPCMFN 5IFDBVTFPGUIFFSSPSNJHIUCF GPSFYBNQMF :PVNJHIUOPUMPHJOUP)FSPLVCZAIFSPLVDPOUBJOFSMPHJOA
TPUIFFSSPSBSPVOEBVUIJOUFSDFQUFEZPV :PVNJHIUPNJUUIFFOWJSPONFOUWBSJBCMFTSFMBUFEUP )FSPLV FJUIFSPO)FSPLVPSJOPVS%PDLFSGJMF :PVNJHIUGPSHFUUPHJUQVTI)FSPLVUIFDIBOHFEGJMFT 8FXJMMBTTVNFUIBUFWFSZUIJOHXFOUXFMMIFSF /PX MFUTTFFUIFTJUFQVCMJTIFEGPSUIFXPSMEUPTFF 8FDBOSVOUIFAIFSPLVPQFOADPNNBOEUPEJTQMBZ UIFTJUFJOUIFCSPXTFS0QFO4FTBNF %FQMPZ % heroku logs --tail % heroku open

%FQMPZ 8FXJMMMFUZPVLOPXUIFSFTVMUTTPPOMBUFS -FUTMPPLGPSXBSEUPJU cEFKBWV%

$IBQUFS 4FUVQ$*BOE$%CZVTJOH $JSDMF$*

8IBUUIJTDIBQUFSDPWFST 'PSUIFDPODMVEJOHQBSUPGUIJTUBML XFMMCVJMEUIF $*BOE$%QJQFMJOF 5IF$*BOE$%QJQFMJOFXJMMCSJOHUPNBLF PQFSBUJPOTFBTJFSGPSVT*OUIJTDBTF XFXJMMCVJME UIF$*BOE$%QJQFMJOFCZVTJOH$JSDMF$*WJB (JU)VC 5IJTTFDUJPOXJMMNBJOMZGPDVTPOUIFFYQMBJOJOHUIF
GMPXPGUIF$*BOE$%QJQFMJOFXFCVJMU CVUXFXJMM /05FYQMBJONVDIBOETLJQEFUBJMFEFYQMBOBUJPOPG $JSDMF$* (JU)VC BOE$*$%UIFNTFMWFT 4UFQT 1SFQBSFDJSDMFDJDPOGJHZNMJOMPDBM 4FU$JSDMF$*FOWJSPONFOU &YFDVUFUIF$*BOE$%QJQFMJOF

1SFQBSFDJSDMFDJDPOGJHZNMJOMPDBM 4P XFXJMMHPUISPVHIUIFQSPDFTTTUFQCZTUFQ CVUXFXJMM/05FYQMBJOIPX UPDSFBUFB$JSDMF$*BDDPVOU 'VSUIFSNPSF XFVTF(JU)VC CVUXFEP/05FYQMBJOIPXUPDPOOFDUUIF SFNPUFSFQPTJUPSZUPUIF$JSDMF$*TJEFJOEFUBJM 8FDBOGJOEEFUBJMFEJOTUSVDUJPOTPOUIFTFUPQJDTPO$JSDMF$*`TPGGJDJBMXFCTJUF
)FSFJTUIF63-GPSUIPTF DJSDMFDJ%PDT:PVS'JSTU(SFFO#VJME IUUQTDJSDMFDJDPNEPDTHFUUJOHTUBSUFE $JSDMF$*IBTHPPEUFDIOJDBMEPDVNFOUBUJPO TPXFDBOGJOEPVUBOETPMWFNPTU QSPCMFNTCZSFBEJOHUIFJSEPDVNFOUBUJPO

(New file) [circleci/config.yml ] version: 2. 1 executors : machine-executor
: machine : image: ubuntu-2004:202107-0 2 orbs : heroku: circleci/[email protected]. 6 workflows : version: 2 build-deploy : jobs : - buil d - deploy : requires : - buil d filters : branches : only: mai n jobs : (Continue to next page) -FUTTUBSUCZXSJUJOHDPEFJOUPUIFDJSDMFDJDPOGJHZNMGJMF 5IFNBJOQPJOUTPGUIFQSPDFTTGMPXBSFBMTPEFTDSJCFEJOFBDITFDUJPO 8FXJMMBMTPJODMVEFSFGFSFODF63-T FYFDVUPST #ZBQQMZJOH.BDIJOFUPUIF&YFDVUPSUZQF XFSVOUIFKPCJOB-JOVY7. JNBHF 6CVOUV *OBEEJUJPO UIF.BDIJOF&YFDVUPSHJWFTVTGVMMBDDFTTUP UIF%PDLFSQSPDFTT5IJTBMMPXTVTUPCVJMEBOESVODVTUPN%PDLFS DPOUBJOFST 6TJOHNBDIJOFIUUQTDJSDMFDJDPNEPDTFYFDVUPSUZQFTVTJOH NBDIJOF PSCT 5PFBTJMZTFUVQUIF)FSPLVEFQMPZNFOUQSPDFTT XFBSFVTJOH$JSDMF$*T )FSPLV0SC $JSDMF$*0SCJTBTIBSBCMFPQFOTPVSDFQBDLBHFUIBUCSJOHTUPHFUIFS CVJMEJOHCMPDLTUIBUNBLFJURVJDLBOEFBTZUPJOUFHSBUFBOEQSPDFTT EJGGFSFOUTFSWJDFT 0SCDJSDMFDJIFSPLV IUUQTDJSDMFDJDPNEFWFMPQFSPSCTPSCDJSDMFDJ IFSPLV XPSLGMPXT 0ODFUIFDPOUBJOFSJNBHFIBTCFFOCVJMUCZUIFlCVJMEKPCzBOE TVCTFRVFOUMZNFSHFEJOUPUIFNBJOSFQPTJUPSZ UIFEFQMPZNFOUQSPDFTTJT FYFDVUFE5IFJNQMFNFOUBUJPOJTSFGMFDUFEJOUIFQSPEVDUJPOFOWJSPONFOU 1SFQBSFDJSDMFDJDPOGJHZNMJOMPDBM

(Continued from previous page ) jobs : build : executor
: name: machine-executo r steps : - checkou t - run : name: Build Docker container s command: | set - x docker-compose buil d - run : name: Mix deps.get & compil e command: | set - x docker-compose run app bash -c "mix deps.get " docker-compose run app bash -c "mix compile" *OUIFCVJMEKPCTUFQ WBSJPVTCVJMEPQFSBUJPOTBSF FYFDVUFEBTUIFOBNFTVHHFTUT*OUIJTTUFQ UFTUJOH BOEGPSNBUUJOHDIFDLTBSFBMTPDBSSJFEPVUEVSJOHUIJT TUBHFPGUIFQSPDFTT 'PSSFBTPOTPGQBQFSTQBDF TPNFJOEFOUBUJPOJOUIF ZNMGJMFIBTCFFOPNJUUFE 1SFQBSFDJSDMFDJDPOGJHZNMJOMPDBM - run : name: Npm install in assets director y command: | set - x docker-compose run app bash -c "cd assets && npm i " - run : name: Mix forma t command: | set - x docker-compose run app bash -c "mix format --check-formatted " - run : name: Mix tes t command: | set - x docker-compose run app bash -c "MIX_ENV=test mix test " - run : name: Compile asset s command: | set - x docker-compose run app bash -c "MIX_ENV=prod mix assets.deploy " - run : name: Mix releas e command: | set - x docker-compose run app bash -c "MIX_ENV=prod mix release " - run : name: Run Docker container s command: | set - x docker-compose up - d sleep 1 docker ps -f status=runnin g docker-compose log s - persist_to_workspace : (Continue to next page)

(Continued from previous page ) - persist_to_workspace : root: .
paths : - ./app/dep s - ./app/_buil d - ./app/pri v - ./app/assets / - run : name: Finish buil d command: | set - x echo "Finish build" QFSTJTU@UP@XPSLTQBDF JOUIFCVJMEKPC 'JMFTEJSFDUPSJFTSFRVJSFEGPSEFQMPZNFOUBSF TIBSFEWJBl8PSLTQBDFzCFUXFFOUIFCVJMEBOE EFQMPZKPCT EFQMPZ 5IJTJTXIFSFUIFQSPDFTTPGEFQMPZJOHUP)FSPLV UBLFTQMBDF5IFFOWJSPONFOUWBSJBCMFTFUUJOHFUD BSFEFTDSJCFEMBUFS 1SFQBSFDJSDMFDJDPOGJHZNMJOMPDBM deploy : executor : name: machine-executo r steps : - checkou t - attach_workspace : at: . - run : name: Check directories/file s command: | set - x pwd && ls -a && ls ap p - heroku/instal l - heroku/check-authenticatio n - run : name: Heroku container login, push, releas e working_directory: ap p command: | set - x ls - a heroku container:logi n heroku container:push web -a $HEROKU_APP_NAM E heroku container:release web -a $HEROKU_APP_NAM E - run : name: Finish deplo y command: | set - x echo "Finish deploy"

% heroku authorizations:creat e Creating OAuth Authorization... don e ..
. Token: LongStringsFooBarrrrrrrrrrrrr r Updated at: ... (PJOUPPVSQSPKFDUT$JSDMF$*EBTICPBSEBOETFU5XP FOWJSPONFOUWBSJBCMFT 'PSEFUBJMFEJOTUSVDUJPOTPOIPXUPEPUIJT XFDBOSFBE UIFPGGJDJBMEPDVNFOUBUJPOIFSF IUUQTDJSDMFDJDPNEPDTFOWWBSTTFUUJOHBO FOWJSPONFOUWBSJBCMFJOBQSPKFDU )&30,6@"11@/".& 5IJTJTUIFOBNFPGPVS)FSPLVBQQMJDBUJPOUIBUXBT EFDJEFECZUIFAIFSPLVDSFBUFADPNNBOE )&30,6@"1*@,&: &OTVSFXFHFUUIFBVUIFOUJDBUJPOUPLFOXJUIUIF DPNNBOEAIFSPLVBVUIPSJ[BUJPOTDSFBUFA BOESFHJTUFS UIFHFOFSBUFEUPLFOUPPVSQSPKFDUT$JSDMF$*EBTICPBSE BT)&30,6@"1*@,&: 4FU$JSDMF$*FOWJSPONFOU

/PXXFGJOBMMZIBWFBQJQFMJOFUIBU VQEBUFTPVSQSPEVDUJPOFOWJSPONFOUXJUI KVTUBHJUQVTI 5IFEFQMPZQJQFMJOFJTBMNPTUGJOJTIFE BOE UIFHSFFOMJHIUIBTCFFOUVSOFEPO 5BEB &YFDVUFUIF$*BOE$%QJQFMJOF /PX BMMXFIBWFUPEPJTHJUQVTIUPUIFSFNPUF(JU)VCSFQPTJUPSZ
8IFOXFQVTIUPBEFWFMPQNFOUCSBODI POMZUIFCVJMEKPCSVOT 0ODFUIFCVJMEJTDPNQMFUF XFDBONFSHFJUJOUPPVSNBJOSFQPTJUPSZ"GUFSXFEJEUIFNFSHF PQFSBUJPO CPUICVJMEBOEEFQMPZKPCTBSFSVOOJOH

&YFDVUFUIF$*BOE$%QJQFMJOF 8FXJMMMFUZPVLOPXUIFSFTVMUTTPPOMBUFS -FUTMPPLGPSXBSEUPJUʜ

&YFDVUFUIF$*BOE$%QJQFMJOF 8FXJMMMFUZPVLOPXUIFSFTVMUTTPPOMBUFS -FUTMPPLGPSXBSEUPJUʜ /P XFSFOPUɹ/PXJTUIFSJHIUUJNF 5IFUJNFIBTDPNF

5IJTJTJU

5IJTJTJU IUUQTLPLVSBFYIFSPLVBQQDPN

:FBI 8FEJEJU

5IFGJSTUHPBMXFTFU XFXFSFBCMFUP BDDPNQMJTITNPPUIMZ

"OEXFIPQFUPHSPX JUJOUIFGVUVSF

*JNBHJOFTVDI BGVUVSFUFDINFFUVQ 3FBMUJNFDPEF TIBSJOH &WFOUOPUJGJFS #MPH $IBUUJOH FUDʜ (
´ʔ`)ɻоʢ

3FBMUJNFʜ 0GDPVSTF -JWF7JFX 3JHIU

8JUI-JWF7JFX JUXJMMCFFBTZBOE TNBSUUPDSFBUFSFBMUJNFDPEF TIBSJOH XPOUJU

*DBOUTUPQESFBNJOH

"MMSJHIU *`MMSFMFBTFBMPUPGGFBUVSFTJOUIF 1IPFOJYGSBNFXPSL -FUTEPJU *MPWF1IPFOJY *MPWF&MJYJS *MPWFGMZJP *IBWFOUVTFEJUZFUʜ

*NBHJOBUJPOJTUIFPOMZXFBQPO JOUIFXBSBHBJOTUSFBMJUZ *TOUUIBUSJHIU $IFTIJSF$BU

"OE PIGSJFOET XFBSFBMM"MJDF XIPVTFT&MJYJSUP SFGJOFPVSJNBHJOBUJPOBOESJEF UIF1IPFOJYGSPNUIFMBOEPG JNBHJOBUJPOUPUIFSFBMXPSMEBU XJMM

LPLVSBFY0SHBOJ[FS 3ZPUBSP*NBIBTIJ !JN@NJPMBC 'JO 5IBOLZPVGPSXBUDIJOH 5IBOLZPVWFSZNVDI

How do we casually create an Elixir community w...

How do we casually create an Elixir community website with Phoenix?

Other Decks in Technology

Featured

Transcript