Forem: Serena

🌐 Installing Chromium on Mac Apple M2 Pro (Tutorial)

Serena — Wed, 16 Aug 2023 14:02:19 +0000

Let's just say I've never really had to use Chromium before, but my workplace requires us to use it for specific cases when testing.

I had the toughest time getting this thing to work on my Mac. Meanwhile, my remote colleagues had it working just fine.

I received a lot of these messages every time:

Meanwhile in my head I'm thinking, "this is easier if it was windows"! But this laptop I used is also a corporate laptop, which could also be a reason for these errors.

Well, if any of you need to use Chromium and have a Apple M2 Pro chip, then this tutorial should help you.

Sections

Install Homebrew
Install Chromium
Damaged App Fix
Resources ⚡️:

Install Homebrew

If you don't already have homebrew, please install it as we will be using this to download and install Chromium.

Step-By-Step Tutorial For Homebrew

If you already have homebrew, let's skip to the next section.

Install Chromium

After installing homebrew, keep your terminal open and run the following commands:

brew install chromium --no-quarantine
brew cu (upgrades chromium)

Easily done within baby steps (took me longer than it should have)!

Check your applications and try to open Chromium. If you are receiving this specific error message: "Chromium.app is damaged and can't be opened. You should move it to the Trash." Don't trash it, instead click "cancel" and check out the quick fix for this below.

Damaged App Fix

In your terminal, enter the following command:

xattr -cr /Applications/Chromium.app

Attempt to re-open Chromium, and the error message should now be gone!

If it is not gone, please comment the type of error message you receive. I can try to provide resources for you. Any feedback is accepted!

Please check out the resources I've gathered from below to make this into one tutorial. ❤️

Resources ⚡️:

Deploying your React.js & Express.js server to Render.com

Serena — Mon, 13 Feb 2023 22:22:38 +0000

As everyone has known for quite some time, Heroku is planning to remove their free dynos and other free options, which now means you will have to pay for it. Given 5$ a month is not too bad but I recently found another Cloud Application, called Render.com.

One thing to note before you sign-up with them:

Deploying can be super slow (taking up to 15mins if your app is bigger!) on their free tier so you should only use it for smaller applications and remove unnecessary files.

So if you're building some big application (especially e-commerce), don't use render; I'd rather pay for heroku if it was such a big deal. It would save you the headache! Instead, I would recommend Railway but be sure to check the benefits to see if it's for you.

This article will be covering how to deploy your react.js (front-end) portion plus your backend (node.js) to Render.com

📌 Create the react-app project:

Open your terminal in whichever folder you store your project files and enter the command:

npx create-react-app demo-panda

Now the client-side is created, now let's create a server.js file in the root of project (or create an entire new folder that represents the backend)

📌 Create the server:

After you've created the server.js file, we need to install a few things: express, path, and dotenv

npm i express path dotenv cors

You can read more about the following here:

Express
Dotenv (If you decide to use environment variables, make sure to add .env in your .gitignore so the information won't be public)
Path
Cors

Now run npm run build to get the static files of your project.

Define your server.js file, here is what my server.js turns out to:

const express = require('express')
const path = require('path')
const dotenv = require('dotenv')
dotenv.config()


const app = express()
const port = process.env.PORT || 3000


const buildPath = path.join(__dirname, 'build')


app.use(express.static(buildPath))
app.use(express.json())
app.use(cors())


// gets the static files from the build folder
app.get('*', (req, res) => {
  res.sendFile(path.join(buildPath, 'index.html'))
})


// Showing that the server is online and running and listening for changes
app.listen(port, () => {
  console.log(`Server is online on port: ${port}`)
})

Let's test it out! Call node server.js and go to localhost:3000.

Your application should be running the server and showing your application :). This is why running npm run build is pretty important. Otherwise we wouldn't be able to see our application at all.

The only thing I've personally noticed is that you have to restart the server manually everytime you make changes. Same goes for npm run build. So once you finally finished designing your frontend and you're ready to prepare for deploying, move on to the next line!

📌 Preparing to deploy to Render.com:

We need to finish a few more setups before deploying to render.

Go to your package.json file in your root folder and add your node and npm version to "engines". We are adding this because sometimes you can receive errors that your build failed, and this can be many of the reasons why, simply because there is no node/npm versions present.

And change your "scripts.start" to "node server.js" So when you deploy your application, it will be running the server and the build.

If you don't know your versions you can run in your terminal:

npm -v && node -v

It will return the npm version on the first line then the node version on the second line.

Package.json:



{
"name": "demo-panda",
  "version": "0.1.0",
  "engines": {
  "npm": "8.18.0",
  "node": "16.16.0"
  },
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "cors": "^2.8.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Changing http requests URL:

When you are deploying you don't want to call your localhost machine as this will be an up and live server now. If you are making calls to the backend, make sure to change your calls from this:

await axios.get('localhost:3001/pet')

to your new website URL:

await axios.get('https://demopanda.onrender.com/pet')

Next we want to import our project to Github. So create a new repository if you haven't already been working in one and follow the "...push an existing repository":

git remote add origin git@github.com:yourusername/Demo-Panda.git
git branch -M main
git push -u origin main

📌 Deploying to Render.com:

We now have everything out the way! Let's sign up for a account on Render . Once signed up and verified, head over to your dashboard. Click the + symbol and add a web service application. It will ask you to import the repositories you would like, so be sure to choose your preference and click on "Connect".

For the following fields:

Name: This will be the name of your website url

Root Directory: be sure to set this to "." (just a period without the quotation marks)

Region: Whatever region you are in. In my case I have Oregon selected

Branch: I left the branch as the default "Main"

Build Command: npm install && npm run build

Start Command: npm start (This will run node server.js as we set in the package.json)

You can ignore the Plan types unless you have purchased a plan.

You can also add environment variables if you click on "Advanced options" if you decided to add environment variables to your app. You can also set if you want the application to Auto-deploy everytime you make a push to your repo.

Then that's it! You click on "Create web service" and enjoy the process. Grab some coffee ☕ until its ready. And your url will be online soon.

Here is my online version:

A simple application of petting the panda makes a call to the server-side, just to show that the server absolutely works when deploying :)

Demo on Render: https://demopanda.onrender.com

Github Repository: https://github.com/jsxNeko/Demo-Panda

So what do you think of render? Are there any other cloud application that are better? Let me know!

View your localhost web applications on your mobile device (Laravel/React) for Windows users (2023)

Serena — Sun, 15 Jan 2023 02:01:37 +0000

🧐 Believe it or not, I've recently discovered that you can test your web apps using your mobile device.
This can help when you want to test for responsiveness because Developer Tools is not always accurate.

I think this may work with any framework but I've only tested this with Laravel and React. Comment down below if it worked for any other frameworks!

I'll assume you already set up your environment and your project can be ran, so let's dive straight in. There are really only 4 steps.

First let's mess with our network settings:

Click on the wifi icon near the bottom right of your screen
Underneath your wifi name, click on properties
Ensure your Network Profile is set to Private

For the second step, all you need to do is connect your mobile device to the same wifi as your PC

I'm not sure exactly why it's important to set it to Private, but if you know then I'd like to know why this works when the network is set to so.

Third, let's find the ip address of our PC:

This is important so that you can actually connect to the localhost and share it with your PC.
💻

Press Win+R and type cmd
Press Ok
While command prompt is open, type ipconfig and keep note of your IPV4 Address. (There may be multiple IPV4's for you so keep note of all of them if one doesn't work)

Last Step:

🔗 Laravel users:

In your terminal, run your app with php artisan serve --host 0.0.0.0
On your mobile device, enter your IPV4 address into your browser url along with your port # as the following (http://122.169.22.22:8000).

🔗 React users:

In your terminal, run your app with npm start --host 0.0.0.0
On your mobile device, enter your IPV4 address into your browser url along with your port # as the following (http://122.169.22.22:8000).

So if your app is on port 3000, then replace 8000 with 3000 instead._

There you have it! So whenever you make changes to your application it should refresh in real time! (With laravel I've had troubles and have had to refresh it myself).

Let me know down below if this worked for any other frameworks and if it works for Mac if you own one. This is better for those who don't want to pay to test on different devices. A bonus if you own multiple devices!