Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CMPUT-401: REACT JS Front end #1078

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CMPUT-401-withouthistory/docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

117 changes: 117 additions & 0 deletions CMPUT-401-withouthistory/docs/deploymentManuel.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
# Deployment Manuel (Paradigm Layout)

## Prerequisites

1. Install python3 (for your us) (make sure version > 3.8.2)
2. ```pip install pip install "fastapi[all]" ```
3. Install ```nvm``` use [this tutorial](https://github.com/nvm-sh/nvm)
4. Install node using nvm. Same Tutorial as 3
5. `git clone {our repo}`

### Note:
All version for ```npm``` should be the latest.


## Test Webserver Security Curtin

First we need to set `screen` so cybera doesn't kill the process when we exit the server.

`screen -S internet_facing`

Second things second we use fast api to run the test development server. This means that we need to install it:

`pip install "uvicorn[standard]"`

Next things next we need to make a run file that will talk to the `localhost` i.e the backend that should **never** be exposed to the internet without filtering. This means to do the following:

`mkdir internet_facing`

`cp -r main.py .../internet_facing`

Assuming fast api and uvicorn are installed together run the following command.

`uvicorn main:app --port 8081`

Assuming everything ran without issues do the following:

`ctrl-a d`

## Frontend Deployment

Follow these steps exactly as failure to this will cause the system to not render properly.

### Website
1. `cd morphodict` From the current repo page.
2. `rm package-lock.json`
3. `npm i`
4. `npm run build`
5. `cd build`
6. `pwd`
7. Copy the results from 7

After runnin this the website should build correctly.
### Server
1. `sudo apt-get install nginx`
2. `cd /etc/nginx/sites-available/`
3. `sudo nano morph_deploy.nginx`
4. Paste the following:

{

server
{

listen 80;

root {#8 pasted from above};
index index.html;

location / {
try_files $uri /index.html;
}

location /local/ {
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Upgrade $http_upgrade;
proxy_redirect off;
proxy_buffering off;
proxy_pass http://127.0.0.1:8081;
}
}

server {

listen [::]:80;

root {#8 pasted from above};;
index index.html;

location / {
try_files $uri /index.html;
}

location /local/ {
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Upgrade $http_upgrade;
proxy_redirect off;
proxy_buffering off;
proxy_pass http://[::1]:8081;
}

}
}

5. `sudo ln -s /etc/nginx/sites-available/morph_deploy.nginx /etc/nginx/sites-enabled/morph_deploy.nginx`

6. `sudo nginx -T` Confirm no erros are encountered
7. `sudo systemctl reload nginx`

From here you should be done, now time to launch the database!

## Backend REST API

Please follow along from here: https://morphodict.readthedocs.io/en/latest/developers-guide.html#installing-for-the-first-time
Binary file not shown.
80 changes: 80 additions & 0 deletions CMPUT-401-withouthistory/frontend-react/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
# Getting Started with Create React App

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm install`

This command should install all dependencies for you.
If anything goes wrong, check package.json

### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\
You may also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npx cypress run`

Launches Cypress integration tests, and tests for frontend rendering\
Check this section about installing and running [Cypress](https://docs.cypress.io/guides/getting-started/installing-cypress) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can't go back!**

If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).

### Code Splitting

This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)

### Analyzing the Bundle Size

This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)

### Making a Progressive Web App

This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)

### Advanced Configuration

This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)

### Deployment

This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)

### `npm run build` fails to minify

This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
1 change: 1 addition & 0 deletions CMPUT-401-withouthistory/frontend-react/cypress.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "[email protected]",
"body": "Fixtures are a great way to mock data for responses to routes"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
// selection_cmp_right_item_count.js created with Cypress
// The edmonton CW thing is an issue with the test data not with the site itself.

describe("Checks if we return something to the screen", () => {
it("shows connected data points", () => {
cy.visit("http://10.2.10.152/search/?q=amisk");
cy.contains("amisk");
cy.contains("amiskwaciy-wâskahikan");
});
});

describe("Checks if we return something to the screen", () => {
it("Shows that the first def contains the right words", () => {
cy.visit("http://10.2.10.152/search/?q=amisk");
cy.contains("beaver");
});
});

describe("Checks if we return something to the screen", () => {
it("Shows that the second word def contains the right words", () => {
cy.visit("http://10.2.10.152/search/?q=amisk");
cy.contains("Edmonton");
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/**
* General tests about the website's behaviour as a regular website.
*/
context("The About page", function () {
describe("Visiting any page", () => {
it("should have a link to the about page in the footer", () => {
cy.visit("http://10.2.10.152");
cy.get("footer").contains("a", "About");
});
});

beforeEach(function () {
cy.visit("http://10.2.10.152/about");
});

describe("Visiting the about page", () => {
it("should have a few required sections", () => {
cy.get("main").contains("h2", /Source Materials/i);
cy.get("main").contains("h2", "Credits");
cy.get("main").contains("h2", /Contact Us/i);
});

it("should have a mailto link", () => {
cy.contains("[email protected]");
});

it("should have an href in the mailto link", () => {
cy.contains("section#contact-us", "[email protected]");
});
it("should have partner logos", () => {
cy.get("main .partner-logos").should("be.visible").as("logos");

cy.get("@logos").get('img[alt="MESC"]');
cy.get("@logos").get('img[alt="University of Alberta"]');
cy.get("@logos").get('img[alt="National Research Council Canada"]');
cy.get("@logos").get('img[alt="First Nations University"]');
cy.get("@logos").get(
'img[alt="Social Sciences and Humanities Research Council"]'
);
});
});

describe("Visiting the contact us page", function () {
it("should have a mailto: link to the altlab email address", function () {
cy.visit("http://10.2.10.152/contact-us");
cy.contains("a", "[email protected]")
// email address is an alias with '+', useful for email filtering.
.should("have.attr", "href", "mailto:[email protected]");
});

//SMALL ISSUE (DOESN'T want to clikc on contact us link)
// it("should be linked in the footer", function () {
// cy.visit("http://10.2.10.152");

// cy.get('a[href*="Contact-us"').click();

// cy.url().should("contain", "/contact-us");
// });
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
// describe("click-in-text", function () {
// beforeEach(function () {
// cy.visit("/click-in-text-embedded-test");
// });

// function withPopupDivs(popupDivsHandler) {
// cy.get("transover-popup").should((popups) => {
// expect(popups.length).to.eql(1);
// const popup = popups[0];
// const divs = Cypress.$(popup.shadowRoot.querySelectorAll("div"));
// popupDivsHandler(divs);
// });
// }

// it("works on Cree words", function () {
// cy.contains("span", "wâpamêw").click();
// withPopupDivs((popupDivs) => {
// expect(popupDivs).to.be.visible;
// expect(popupDivs).to.contain("s/he sees s.o");
// expect(popupDivs).to.contain("s/he witnesses s.o");
// });
// });

// it("works on English words", function () {
// cy.contains("span", "hello").click();
// withPopupDivs((popupDivs) => {
// expect(popupDivs).to.be.visible;
// expect(popupDivs).to.contain("tânisi");
// expect(popupDivs).to.contain("atamiskawêw");
// });
// });
// });
// TEST CANNOT WORK WITH CURRENT IMPLEMENT
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/**
* General tests about the website's behaviour as a regular website.
*/
context("General", function () {
beforeEach(function () {
cy.visit("http://10.2.10.152/");
});

describe("Visiting the home page", () => {
it("should say “itwêwina” in the header", () => {
cy.get("h1").should("be.visible").should("contain", "itwêwina");
});

it("should greet the users in the content", () => {
cy.get("main")
.contains("h1, h2", /\bt[âā]n[i']?si\b/)
.should("be.visible");
});
});

// TODO reenable when welcome page supports syllabics
// describe("I want see all written Cree in Western Cree Syllabics", function () {
// it("should be accessible from the language selector", function () {
// cy.get("[data-cy=settings-menu]")
// // this should be `.type('{enter}')` but that mysteriously fails when
// // running cypress against firefox on Ubuntu, even though pressing enter
// // in the browser *does* work. Workaround is to click() instead.
// .click();

// cy.get("[data-cy=orthography-choices]")
// .should("be.visible")
// .contains("Syllabics")
// .click();

// cy.get("h1").contains("ᐃᑘᐏᓇ");
// });
// });
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
context("The Legend page", function () {
describe("Visiting any page", () => {
it("should have a link to the about page in the footer", () => {
cy.visit("http://10.2.10.152/");
cy.contains("Legend of abbreviations").click();

cy.url().should("contain", "cree-dictionary-legend");
});
});

describe("Visiting the legend page", () => {
beforeEach(function () {
cy.visit("http://10.2.10.152/cree-dictionary-legend");
});

it("should have a title", () => {
cy.get("main").contains("h2", /\bLegend/i);
});

const AROKS_ABBREVIATIONS = ["s.t.", "s.o.", "s/he"];
for (const abbrv of AROKS_ABBREVIATIONS) {
it(`should define ${abbrv}`, () => {
cy.get("main").contains("dt", abbrv).next().should("match", "dd");
});
}
});
});
Loading