Note: Making React Native work

After moving my workspace from Windows 7 to Windows 10, I have so many things to do to make my small React Native (RN) project to run again.

I managed to make it run again by following RN's getting started  procedure. First test was to make the RN sample work.

Great! Everything works fine, I guess.

Problem started to come out as I started importing my files to the new project (react-native init AwesomeProject).  From the getting started page of RN, it says that you need to activate Android's building SDK tools version 26.0.3 but it actually throws errors. So, I activated both 28, 27 and 26 Android SDK Platforms. I would also test if I can deactivate the two and use the latest only which is 28. After that, I've encountered a lot of issues with the packages I'm using like react-redux, native-base,  redux-persist and others since I have to run npm install at least twice to successfully install the package.

When I finally make it run on android emulator, I noticed that native base's icons are not showing up. It'll show the [X] placeholder. Of course I forgot to follow the instruction that says run "react-native link" as discussed here. After making the assets linked, Another error spits out from the emulator which is Unable to load script from assets index.android.bundle on windows.  Good thing someone posted same question at StackOverflow and the solution is which I quoted below.

I've encountered the same issue while following the React Native tutorial (developing on Linux and targeting Android).
This issue helped me resolve the problem in following steps.

1. (in project directory) mkdir android/app/src/main/assets

1. react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

1. react-native run-android

You can automate the above steps by placing them in scripts part of package.json like this:
"android-linux": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android"Then you can just execute npm run android-linux from your command line every time.

For now, my testing app is already working and I can continue from where I stopped before and on my new unit.

It's a hard Nuxt life

That following issues are needs to be address while

• Running Nuxt with Node experiences crashes once in a while or very frequent
• Make a static version (Nuxt generated version) of the live version (running on NodeJS)
• Nuxt generated static html files for pages are not complete. Missing end tags for body and html.

DAY 1.

When I did the migration, my initial results that css files are not included at the production. Running at the development, all pages are working right with no hiccups. So weird? Well, I guess I'm really new at this stack.

My initial solution is take them piece by piece and of course get rid of jQuery. So many parts that uses jQuery and it's painful and it would take a lot of time, but for me, I think it's worth it. But we need it right away.

As they say, if there's a will there a way. 

Day 2

At first we were testing the results for SEO stuff at Google Webmasters' Fetch / Fetch and Render, every page is being cut off. For hours we thought it's coming from the CSS files. Take it off one by one including the plugins. Still the same!

Someone said there's an issue with asyncData method if using the static version of Nuxt. So, I created a simple test. Plain and simple pages, one page make a request from and API endpoint. asyncData not an issue.

Day 3

Found out that generated files are already cut-off or doesn't have a proper end tags for body and html. Problem could be during the compilation of js, css and everything. I update the Webpack version from 3 to 4. Ooops, there'a a lot of dependency issues. And so, Nuxt used was outdated so that could be one of the reasons. Maybe, just maybe. 

With a new create-nuxt-app, I started to import piece by piece. Suspected plugins are all working. What's happening? Generated pages are not being cut-off. It was going well. Then I completely migrated everything and did the "npm run dev". It's working!. I immediately ran "npm run generate" and deployed to my dev site. Damn! It has no styling. At least html are terminated pages. 

First solution. Use an external css. Now, it really works. It doesn't end there of course. I'm still having issues with the external css, font's were not loaded properly. So, I added an .htaccess file to allow it.

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        SetEnvIf Origin "http(s)?://(www\.)?(anotherwebsite.com|cdn.anotherwebsite.com|blahblah.anotherwebsite.com)$" AccessControlAllowOrigin=$0
        Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    </IfModule>
</FilesMatch>

Day 4

It's workable but seems to be tedious, when I'm going to deploy I have to do that first. Well, thanks to this deployment routine. By using Optimize CSS Assets Webpack Plugin and UglifyJS Webpack Plugin, css are extracted and included to the production or static files. Finally, after running the "npm run generate" and deploying it, css and fonts are included as static.

That's it for now. So many things to share but have a little time.