Tech – Erin Knight

Fixing WordPress 404 error for a React SPA on a subdomain using react-router

The problem:

I have WordPress installed on my website’s root domain; I wanted to deploy an unrelated React SPA to a subdomain on the same site. The root of the SPA loaded fine, but if I tried to access any routes deeper than the root, I was being served the 404 from my wordpress page.

What I already did:

I set up the application to be served from a subdirectory according to the React Router guidelines:

Updated package.json to have a line for:
"homepage": "http://subdomain.eknighmusic.com/myApp"
Updated the Router component to have a basename:
<Router basename={'/myApp'}>
Confirmed any links within my app are using the react-router-dom Link component (or useNavigate) instead of a direct “href”
Updated my image source to: img src={`${process.env.PUBLIC_URL}/icon.png`}

This had everything working from localhost, serving from localhost:3000/myApp and looking good; but I was still having this 404 error after deploying a build and navigating to a route.

The solution:

The .htaccess file at my primary domain’s root was taking over and redirecting any unknown (to the server) routes to my 404 page.

I needed to add a new .htaccess file (filename: .htaccess) in my application’s sub-directory on the server (I used cPanel to do this, but you could use FTP or anything you normally use to move files to your server) with the following contents:

RewriteEngine on RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] RewriteRule ^ index.html [L]

Now I can access http://subdomain.eknighmusic.com/myApp/route without getting a 404 error!

Adding SASS to the dotnet React template

Out of the box, ASP.NET’s JavaScriptServices app generator has gotten pretty good. It gives you a decent starting point (if you like TypeScript) and even has a react-redux template. It doesn’t, however, come with any css extensions like SASS. There’s a not very user-friendly description in the docs of how to add it, but here’s the quick and dirty of how to add SASS to your project.

Disclaimer: This will not include hot module reloading for the scss files. ? This is very lame, but it’s discussed here that it’s better to build your css the same way in dev and prod (rather than using different loaders for the two environments), so until there’s a valid loader that can do both, this is the method they recommend.

Install the required modules
Using npm:

npm install --save-dev node-sass sass-loader

Update the webpack config(s)
Find the rules block in your webpack config that are testing for /\.css$/ files. Modify that line to:

{ test: /\.s?css$/, use: ExtractTextPlugin.extract({ use: isDevBuild ? 'css-loader!sass-loader' : 'css-loader?minimize!sass-loader' }) }

Rename your file(s)
The default app has a file called “site.css” in the /css folder. Rename this to “site.scss”.
Update your reference
Wherever you are including your css into your app (by default, it’s in boot-client.tsx), change that reference to match your new file name:
```
import './css/site.scss';
```
Psst: DON’T change the file name in your webpack.config passed to the ExtractTextPlugin; that is specifying the name of the output file.
Run your app, and load in a browser
Run on the command line by using “dotnet run”, then open a browser to localhost:5000, or whichever port is specified. If your app is building in Production mode (it will say in the blurb when it boots up), then you can set the environment flag by running:
```
SET ASPNETCORE_ENVIRONMENT=Development
```
Add some SASS
At the top of your new .scss file, test it out by adding a variable, and then abuse that variable:
```
$hideous-color: #f0f;

body {
    background-color: $hideous-color;
}
```
Reload your app in the browser

You are now cookin’ with SASS. Terrible pun intended.

How To Delete iPhone Photos Except Favorites

Since I have a new baby, it’s no surprise that my iPhone is out of storage. I have backed everything up on my computer (and Google Photos as a back-up backup) so it’s time to delete them off of my phone. Except I don’t want to delete ALL of them; I have several albums I’d like to keep, and specifically, photos I’ve marked as “favorites” I’d like to keep after the purge.

How do you do this without deleting photos one by one? It’s a multi-step process.

Hide the photos you want to keep
Select all (unhidden photos) and delete
Un-hide the photos you wanted to keep and you’re done!

Here’s a breakdown.

Hide the photos you want to keep

There are a couple ways to do this on my current iOS (iOS 10.2). If you want to hide an entire album, open that album in the Photos app (on your phone), click “Select”, and click “Select All”. Then click the export icon, and at the bottom of the export screen there’s a “Hide” option. Do this for any albums you want to keep, including Favorites.

If you’d rather hide a single photo, tap on it to view as normal, and click the export icon. Then you can click the hide icon at the bottom.

Delete the ones you don’t

If you’re in “Albums,” including “Camera Roll,” you will still see your hidden photos. Go to “Photos” on the bottom to hide your hidden photos. Then click a category until you see the “Select” option appear at the top. Click “Select”, then click “Select” next to each day until you have selected everything you want to delete. You can hit the trash icon periodically to delete what you have selected so far. This is also a handy way to un-select anything you missed hiding but still want to save. Be sure to tap the trash can at the end to delete everything you have selected. I wish there was a way to “Select All” that are remaining; if you figure out a way, post a comment!

To clear out the space on your phone immediately, go back to Albums, and Recently Deleted. Click “Select” then “Delete All” to remove them permanently. If you’re nervous, you can save this step until after you unhide the ones you’re saving.

Unhide your photos

You’re almost done! Click on the Hidden album, “Select”, “Select All”, export icon, and “Unhide”. Now they should all be visible again in your Collections.

Success! Storage space achieved.