Handle .webp images

[gafemoyano]

Hi

I think create-react-app can't handle .webp files right now since it throws the error message:

You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:4)

I wouldn't like to eject just to modify webpack.config so I was wondering if the .webm extension could be added to the file-loader config.

Of course I could just convert the images to jpeg but maybe it's not such an uncommon file format and handling it could improve developer experience

[gaearon]

Can you send a PR for this please?

[ryanyogan]

@gafemoyano Would you like assistance on a PR?

[gafemoyano]

I've never done a PR before, if you could point me in the right direction on how to do it properly I'd be happy to help.

[ryanyogan]

Of course! I'll touch base with you tomorrow, however in the meantime, if you haven't already:

• fork this repo into your personal Github repos.
• Create a new branch off of master git checkout -b webp-images perhaps.
• Start coding away, the next part is easy, I'll ping you tomorrow. Have fun hacking!
  • In your commits its always good to reference the issue, `git commit -m 'Added in images (Handle .webp images #442)

The people here are great, there is a fantastic rule once you take on the issue, it is yours, no one will attempt to "beat you to the race."

Helpful links:
Fork the repo
Add the "upstream"
Keep it in sync

[gafemoyano]

Hi, thanks for the useful links!

I was wondering what would qualify as a test plan as stated on CONTRIBUTING.md for a change like this.

[gafemoyano]

Is it necessary to modify this line on createJestConfig? I haven't used jest before so I'm not exactly sure of what that line does.

[ryanyogan]

@gafemoyano a "test plan" is nothing more than: "Hey! I made these changes, please test the following to make sure it looks good on your end." So you are adding webp images, perhaps put a small note in the PR on how to test that this works, maybe provide a sample image for someone reviewing to test on their local machine, etc...

[gafemoyano]

So is it alright if I commit the changes I made to the project template to test that the changes were working?

[gafemoyano]

Maybe not the other pull requests I checked out only commit the files that actually matter on the PR.

[ryanyogan]

Did you test locally? Give sh tasks/e2e.sh a go, I like to run Travis off
my own repo to make sure that works as well.

On Aug 16, 2016 9:25 PM, "Felipe Moyano" notifications@github.com wrote:

Maybe not the other pull requests I checked out only commit the files that
actually matter on the PR.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#442 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AACifMsjdjc41tJUW8a4jLLS3acuTjtRks5qgnD6gaJpZM4Jj8B_
.

[gaearon]

Is it necessary to modify this line on createJestConfig? I haven't used jest before so I'm not exactly sure of what that line does.

Yes, thanks. Also our Flow instructions in template/README.md.

So is it alright if I commit the changes I made to the project template to test that the changes were working?

Ideally not, just include a link to webp file in the PR so reviewers can download it and test it.

[gafemoyano]

Thanks guys, I've gone ahead and created the pull request.

@ryanyogan As a side note I couldn't really get the e2e.sh script to work properly. I also tried running it on the master branch to make sure my changes weren't the issue but it kept giving me this error message:

+ test -e build/static/media/logo.5d5d9eef.svg
+ test -e build/favicon.ico
++ set +x
e2e.sh: \ERROR!\ An error was encountered executing line 70\.

Which is weird cause the build/favicon.ico file that gets generated includes a hash i.e. favicon.fd73a6eb.ico

but on e2e.sh the lines that tests the favicon don't seem to be accounting for it:

test -e build/static/css/*.css
test -e build/static/media/*.svg
test -e build/favicon.ico

[ryanyogan]

@gafemoyano Everything looks fine here: https://travis-ci.org/facebookincubator/create-react-app/jobs/152982529 here, I know recently someone added hashing to the assets however the tests (someone correct me if I am wrong) are good.

I think you should be good as long as you followed @gaearon's suggestions in the PR add a link to a sample image so someone reviewing can download a .webp image easily for testing. Make sure you updated the flow config updates (/templates/README.md) he mentioned as well. You should be golden after that.

Good work, I should note I am not on the FB team, just someone that believes in this project so I can only comment as far as my knowledge on the project goes.

Edit: It looks like you did that, congrats on your first OSS PR, you picked an awesome project to contribute to!