From 8b507a794370f9b2ea6e87d4aeddcc1c1b27a79f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Xalambr=C3=AD?= Date: Fri, 8 Sep 2017 16:21:06 -0500 Subject: [PATCH] Example: Add asset imports example (#2864) --- examples/with-asset-imports/.babelrc | 12 ++++++ examples/with-asset-imports/README.md | 39 ++++++++++++++++++++ examples/with-asset-imports/package.json | 13 +++++++ examples/with-asset-imports/pages/index.js | 4 ++ examples/with-asset-imports/static/logo.png | Bin 0 -> 9643 bytes 5 files changed, 68 insertions(+) create mode 100644 examples/with-asset-imports/.babelrc create mode 100644 examples/with-asset-imports/README.md create mode 100644 examples/with-asset-imports/package.json create mode 100644 examples/with-asset-imports/pages/index.js create mode 100644 examples/with-asset-imports/static/logo.png diff --git a/examples/with-asset-imports/.babelrc b/examples/with-asset-imports/.babelrc new file mode 100644 index 00000000..987b6338 --- /dev/null +++ b/examples/with-asset-imports/.babelrc @@ -0,0 +1,12 @@ +{ + "presets": ["next/babel"], + "plugins": [ + [ + "transform-assets-import-to-string", + { + "baseDir": "static", + "baseUri": "/" + } + ] + ] +} diff --git a/examples/with-asset-imports/README.md b/examples/with-asset-imports/README.md new file mode 100644 index 00000000..40ba01bf --- /dev/null +++ b/examples/with-asset-imports/README.md @@ -0,0 +1,39 @@ +# Example app with asset imports + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-asset-imports +cd with-asset-imports +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example shows how to enable the impors of assets (images, videos, etc.) and get a URL pointing to `/static`. + +This is also configurable to point to a CDN changing the `baseUri` to the CDN domain, something similar to this: + +```json +[ + "transform-assets-import-to-string", + { + "baseDir": "/static", + "baseUri": "https://cdn.domain.com" + } +] +``` diff --git a/examples/with-asset-imports/package.json b/examples/with-asset-imports/package.json new file mode 100644 index 00000000..5b2e6126 --- /dev/null +++ b/examples/with-asset-imports/package.json @@ -0,0 +1,13 @@ +{ + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "babel-plugin-transform-assets-import-to-string": "^1.0.1", + "next": "^3.0.6", + "react": "^15.6.1", + "react-dom": "^15.6.1" + } +} diff --git a/examples/with-asset-imports/pages/index.js b/examples/with-asset-imports/pages/index.js new file mode 100644 index 00000000..3ce436c0 --- /dev/null +++ b/examples/with-asset-imports/pages/index.js @@ -0,0 +1,4 @@ +import avatar from '../static/logo.png' + +export default () => + diff --git a/examples/with-asset-imports/static/logo.png b/examples/with-asset-imports/static/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..2e3bcc277352ce0f7093f91010efd6f0ce227caf GIT binary patch literal 9643 zcmZX(1z1(Vw+Fh<0i+uwL^w2vbVzgPZlt@rI}hCgigb5}C?I+06e%fb0RcfIBt_o# zfA72ZzVGet+h^v?%vv+EV%BfXj@M9=$Hk(=0ssJ4Q9(uvEH}Y772^^3ONeg=0|1=I z4${&Ziqg_B4No^)2WJ}qP>6r4hpw+Z_PD@E3j>p#;2>%pm36k+X{ga`E~^J8F~){DNy;?CpqIBAGO`9_*aAB1Wr&8xkdxqz)f=z9Jl==wpr6){ z0NE$HzP?N~sPM-UdIS{v14-%%)~^ErG?u;!G!g@6i&j4w85RW3%7e-J25MY;uPx)N z-;LiMUZx8f(>?(hpxf53QuEPHH34@Y-&PnIASE*YWNPfw<8P92FVRwAfQ)gHcDcSu z(wlPsu0bZ@Su#sbU{vR^aw--gBI^ZjN;83+6AkU`ooF7=Q|yVOIKW-f^-oNKUYcDnS& zVa7wNz}|_PQvk;jElwnwLX(zfBlgCj$D&jKs#%uRLO6J$g$ha2dZHqxESN)P`^i>u zFX96tV7EdRT`{EDzky5KI~^tV$9K+Mgh%@ya*7u?x|!-_lWi;_yi&F)$D6i~ML$DSsbNMWZp9pdWb%J9$PqH(V`$B%IN56~vMX=lq4D0*hd$n0$1ASmd7O0>TvK zp#U}p{MjayE!%dUUX7?o^H@zgf54jYLkg$b(ylV$&~s5?d`t&D{Q_nX1Guu1s}y(SI!)Mf?hAl@D;T?zTq zdy8bjCj6UaBBSu9eJf48OR`6(3qaPALmi>hh+4v_KBH)wPXE4h8j&jn7oOYvaK&)N z#@>XwSBv#|;-YfaM1C&YU-Do(yU)bGwB|gs*WF+2@kHJ@|2S02HtT1i#tU!^X=LA;jPRgtUTXvUC%r##HjtiX*vK)pR)tjNFY#?waKr<7!mrwC zpaV&e)faq(pm#?xMbfA|+JaFsAhO+u=HQQaMA4rE%94aE5T`!5CekC+AULTY243VN zcW55ud!NlTrYj<-iQ^Wj%!RQYX@M%KfPq^~PZ>vTnWRtW8^^mHeobGj!0;NuKwFJL zLr4n>Qvp*e!CBUq{>$jesK*YDC*gtAPgqK7=nn1~#gN9cnuNn5rhU|Tir;e5)Artv zauW86ZtQ70DA$s7i_oV7FK_}Wy2CGvIA>^a%+JVC=0@tc>?X;uM~Iq9R1oa_3C%op z(AuG#&7hu`-{vSw%z1Hh9!#!iPP`Z?earrMJs4)uZbP-d0=r0iV^VneAT)0^0x{Z%s{kB=zsX=xa-LLC6JtaAc}Bu)Vj`s%68Q{n7Wd8 zDu~K&b=>2_w~mnzjYX|1t?xBtwTsmo8V_}S^S>5Hr}ZmmicaCgi|?oNYJ}vyV)ukT zLD*lizhH0GZCMc|)SS>&HWW4Ooan6tT@*h`4N6O~NejIwKJU=`0+V11pJ10?#t_lCY*9oU>byd3S zx&gZUx+!%O3&jg)3%Co7OysHxc}=cTU!&Xv@C332f?R$s*DR^EvNyTB3$e1Z7-?l| z>vUCb!EZ8i-mrfNEZLR$Irx;=O=S9Mh2V2PdynhG{T&wfI-esy9#19Dl|AnXgD*n; z0dLRI$RZL`CM+|FISP%Rns}MucmCbA-Obo)-8jBsm{VL;3}XJ>@ua<3ah<={>yn(sKTC zHp2?G#$57ikyiQ?_G0SA(1SEbZXx!HTlFor!0cHOjp!e>-j#)4s6QiYy2=EH`JgXY^j~ z34iu^Sw3EVQ{MffvaWFhxvJ5%wKi<{)o$;j;2o*Y&O`zok1UcJb9pzOab0Z|M5aSDzri&7ZeeZxY^#4T=Q>75q$I`+Avs z?)K%5@9OQ*o#9yHQFTI{W4&)p!+K+Pm@2Lzea(Rc*FF5ZWN&2h2i*^yKgfL;W0ABo z#bmwA_o3(RqgxsDQ}T`}lr(F;NuhP^)YXN05=*HI({owVOFqG8rx{Fb6;@&T51Ii| z4>C83AKo~rX{wPHPzvRT1y%`l25hPvX0K-$uwP9L7j~};fB5jtc=RLoca*6@mvdK< zkiPr=_{0XX6f@7BdH3a0&yY^(yJj{#y;nYhzVl{29V<%*v&-}R)jxFF?5?t%LKmmZ z@OwgU7nNs) zUrn>Sg>N$#&5k2aBSRX|8s*pP0&7oO&(;S0*rf@j@i*+cY5r>b(fnrhh55U>OW`+h zi6;f;(HA!7dgqO*8&W-MG-H$$W44(3uS{QNllcsblW?KruGgoHS`csO}@*ufF(UIDJ&7XIw6UiAOP zEQ0|;N}YZ$JfHr&Bt4ej_%(?|MUFUI&J(N{&yxx;BVusFXP~1!r8vHLMH{bt<^8fVw zH>D`&zYYAK4gHt2{?iJIOB_p-^M6Dyj@2NcFb8Ub%0Wh52P~ogR0BQ=;LGygC0NH+ zwZ)#m14{};8A%;~$dL)UJ*g_eI(d-WQu0!eTVIu=r5*vBKoe|Mru=L~Kqt)D`JHjdYS9yv##GB0sM zlMwV63|x?>efiinsC=kdh(9ncC>|XW)texgBZtr&dd7>y5R3zerzL-Vw3kC*j(!H{ zH(^i}IC|gr5()?tOadhd5s3k^KrKwP{l@_3e;M3zLd|-D31t&VP8q3G;AR4yLC@|t z`%u!-(;0|}iPz}UlV5W|Tu^fpv1DK(B1R<7^)+;AbXd8N@_H(88vfSYn%k`bbdQ@e zo3xCKJ*H;o%xFw|ksV{$PlQpYZ+(`aN6AT_IrR1~VG|8va#Drc90_PPTgu*H`x(Tm zz%%*d7Kem9cjB%uk8}4odV3dZDYfsj5Zrx(X_N5HzxQ{RyW?*yztp_6wf-J2nuRE^ zm%Gy2{;}9-xrq$7{63XmVmXl6zw;yd~KtV0scRP@BK4~6H? z&AGhy$-2o`OYd*PxMnA(yt8>KaC&=>)h3L|9De2Jrd|3+Yn^&Hlzc4CqIeiGpdjMV z&31wCNOb&!(EHnXi-DNIRaU!UMTam)dlVKubr_sC0^gB7}C3&VMx>@G{#rNM3B`lp_@nucfgr-v*l1i zs>ijhHE3vQr(4rp7|#vf$xP-6Y0uZ{sc){B6-!0;5AJ+TBQS@`NyQFG(YYVav$~AY z($Y#Ax4TQecl`3qTC|7aDTK+~J4x`7Byjb6Ybxf2+j<-t_TxAquf0@_OG;S;racKa z&4|2}((%`}#m8Sg_J~RA&-Xt4u#)jK^I`T6^S$ zPg_li3cNP;w|)<3Lu4JE{FGmYj^&O#QvhPFEAl|`*hDhUgjY{RuvV?V)*HR>_;c;? zd2zV`D~53s?BPTDNdCI6;;|Xu&un-Ixj8Gp{(Il~V+UvW^yd8g_F|)%(i9fyvp7&c zwN8~{ji%j1?1t|N>`hC&4`y>(6GOAGeug4Thqi}aHW)95$M7SZ*$lmWg3_3quZ~ z$>|UKGo`@InmcVjCZP(v&c0AQq+ix=?cSeu^JJsfrcx~*O1*P`chw11zx5;+_THD^ z;f6ef5B^GSlGZRb9{N@qv37a<6^+usr*pt9qs8vCqvf{FN2Bzp8DTy(OO4op&I;9B zEUMXJwwE>O?VD8AZ$8RFBxS+=j>pv zk|DbDADIk6&%Jdx6pdu+`t0udw3L0*a@pOsQ&-^i!)&>7YkDnNKk9rM!b}NH6(WYx9Tx9)vgO(y=Ld~=lz>`K9_DMKEY6Xtt! z1;w|KEh%ko8?9w|_SrlTOsO;s3@7P#CY`=DGabIiN?IKQPfk!}NYwKLX+0=_Aow4Y zJGP1|6~B}9w+gP^N#JQGvVc&5L&X?jOIOUaVckpaMT=FGt^+Z+4}%_OF=QBV*Q&V! zsuoEMkh|Q9zJ!g7qVLsbBV?>Kg+jYo2-E;2_|lcE)ZeQHqc$~u>K<7d@!;#Qq5<(n z0sD}s7S=lbo=goKp{l?m?CVfb#pG1QR3BmhG5ObtUZ$Lc z1e&Yw9kc<9TQCM$xfhBC(0TYJuG>n-;EZ{g+A>)~iTGF{9w98R2ihvvvt$z=zg=El zPAmCJw8synvo9L0cbDrrB}P^aVDcs49;LlGS?}h}NoG9FMxcTV6?9FAin_$37S$J{ zYVRH%O9@C%6}R5MijZbJC@W)#=H;MR?FyLF__8;ZUpxD?+Wu)`D!5Q0M%W>vnPh}`R3qQxJmGO7DVyhPZG){)G;O_dXwoP~7eKNjj$ z_3U`d`(VW2{&-%X4mxYtD4n2bYiT*ZXxv1H(oK1jp={@;rG>Zg$KGL7GolFgDfAnJ z1~&Z&%|?_dvOseA9HgWy&r7gKE9Mm2gKy53h;m54E9NL^9>&ANL&0yhrd;A>#R{1* zT&oA!2llEHs0J)yL)R_vd~l>;g|c^K>SiI-xLv6Vs& z+H7;zX$bCYM(2gPY+rKpE?L~pa^=hf3SL|LgV%4~d?5BQXCHSLmm}6_iTafLg6zo) zSH7I+>eIfax8+QyEK_|ErPQ?}bRhkMY%XlXHfXFy5ojPxzjZZT!>~K3dyM@{Q)L|IuL5S@(S9eb@aG%CL0? zL13zJcoOzmhk!(ADf!F7amB4rdYEODGO^Aanqn5#rR=w%8*u5klBe#kG<4q;hg5EzqPNvZEK-#oL5{b z=dvFr8+kTfXb*QsjlX5{8qPW!=pZZ(INvkO;kBLQqEl>i0Aszp2-$+P*x>N+83+&^ zY;=F%O@PqkRJ~B#z%&9xKMprwwR`v6N#;>@o6IEeYbcRSH0bguVYFJiau38C7rueL zZ6cV+Oir`2rY5fXQ`@P$Y`^_!$vb?E(vp%t3-d>)7;r@k3gokwH3~t0jMiFRau>MV zUzzoW-eeYKmgYk@H+sVYKvc)C3Ncbq!Fjkme!{6;ku-4$9*6;&6O_4_@M>ynfS!)7 zOzdx?oSd8^uGQgu^{Zp=<1GztmtTeZyTr3UkNdeLsG9h)Er7`bEmcD?f z<&1;PGss)J_`KJVcNBSr6@&+l#G1z5y=~PVPEJI_-hjqTWlK5rJBR{ z2LvGEl~%(L)S|K)9P@g^4`pI|b*8xM)S0yNc{Oz_sT^tM= zkoe8o;Tak(2?Df|EkQC$RAF0~l$LZAaD8{>M)n5l{qj2-Wi6YTSCM_xYAXur_s2`k z(qCzkNZBCm-UnK{A23`)e?q#iehKzFy{V*GSqGhH761I&j0~Z`r2)~qOrqd@mi!L| zi;9bjD^}u>0?ev8We})_wO$JYCjHYWKbNd99iYYb(>RSp=<^|rqZ$)HMjT>VuJqRb z;qU!T4DOTbV(Hjx(4PH46HE``T08K#n?o~S>+nG_ByLZxO{S|heNqg-s6BLuaW4?H z6b(IcF`(`p4Zl(OZ;Y6{An(Hi`h9EGe~SvWeR~wqhaJZYI=qa{JeoO(s)$ra_c1`U zu0i>Ta`RsTr?&nR=n1-d1$v5EBuaxVco19~#17&iAiWNA6)OP%?YdJ0;SsPIPt42* z(1-=@XjX*WU7i}W*m|fVI%v!d0PbOS`Bzj*11tvb7-DfJGtK<~FpK&D9g0B14rc99 z_gEVt-Y$vlbSsK{3PknR2cq+psCh&5L6yT7qdmpFv8qx^=;e}rvEutanhrrlDR@NW z#ec3yg`b8`CAi5`(gP2NQkCjLDUJZxu)#kt8|glpN=wy3$ncWQ1lW%1!vdk)OIQ@m zHxR%2*bOuQ{VWYD(jKRnWuNzcZ4G?Drk+Y}_ziy~0$_+u55%iI{;gKUA>w;9>T%i? zbk*Rx>}QaE`#- z@AZq$I!-YA4U+IKq#I-`xh};r0&fag*=Ko z4P8{HMH5Oz7mH3+>O?-lB|EQl5kyB)(#Ye5*9W%^)9@;{jUEo!m^SR6t}ZL@Pgi*B zJDLv;M4Cwv8kT>qPnAlMrTeGfMob3N9!7zhlN4QpZKUS>zU#AHT8xreTGvUs%c;+*7V(3n}g|Ui)CC z9SmN$j4O~*HQK?$Ie;xzi?;}oM}gVX_S~##ZAM*B0ny;=ro>}hJaoCvoEsyzECH<^ zcoAXgx4tCv#|V4gnxHJv_js)@m#ZnokdC52)VshOO{$zKgk?Mh{mKWY%J<4XBF=5# z3813GWC92{Ej*uzf>LY^CqK!l#~~I8z|uu0&@)nDE*5ZI`kRzTJo1J~arx2GWF5x7UAmFKxXBjm4ZpY01Ws80mLVd1Y5cN<0uWfF6#@F-LheUuhP51dR zgY;fhRVy|a6Rb+C5b^SwOt#mSC6x=lHbpq-x{y=NRIS&uZ&jn&umR(H5eg;fOU&cKwrwXF*yq4{Z0L=uoeBox$_nJXh=kd_9 zw%oJJ?4P00LLOo*QNmAyrv|g0?~XGD)-Hh{roQ3DZVHLJCUOBNVc71DkIyvUossmP zSIxCZ*}2@v}kp8@KJ!}C|qT7XZYt@=g8oa0F!ZCU7g5oGKmHW1_hu=x%Cz~D9Fwv zDnL#x+wCKyz4ivGs|hOuqN-~38g2IplV82E1ush45~kAewUDJyT6CBaYZrM|mdKmq zjo!i!j$g*D`W)z4&C$@Lh~WR`Rwjtd*T7-20Ru)$#6mi{)@B%16a#{VQPgUXi-u|M zz}zyh{ed)3AQh^s0keigwR6eGxluQD2VL=Se<~!ss1Qwsa$rUAAy^!Abkeu$lI1lo zUTMM5>dN4wC@hb9pPfWn)@9CeTQQ!pa{gp@}2}q+FIz zhmgwUdVHX@XH)~@aV@0oIEX4+?t6e(JCT=rx4XqDU&)OEjS3C6nHU#mZfOX$;cB#T z4CmR_|JUd!1OkY7Os}l#TMle&Y%k{_?Y{bA#5W-7XuESmWzu8J_hj8A*|5l1P!}Q( zjaval{DPP_v}JTuVMJG)RP-84@G+d5_#KZeL8QOe?l|e6oFXbgEyxHs_OTh%a;`$v zD))t(ul25WabzQ+6cY7^o0~f;FU#j-UF`aUq>y_a^c6Y*KORbV*4ym(#u?!Th(>s1 zEdXJ;7`cN{%MPV)_toPHcYY&*0T1<_rzUPgcIm;gPe4n=GfG2C?@;^@CQ6#!(P$t5_rYr7%FO-%!aHmQpME{eFsUo!SAj=ZxT z+qU3zp+ig323t#Pq&8lkdt$gSp#_7ZRNy@1`=<~MtTKcF76HPRRr%mGR2W=_Pn?XV z0;C13ebUO9WkmC4fdhvG@g=EHTX6QA^5^BsSo<0XV4jvpmKJSN3jy#c8z^OxOcw)? zDrtrUDXgq=0Aio