Skip to main content

Web Services Installation

To access our api and authentication module, follow these steps.

Important note: You will need to use any version of node with NPM version 6 or below.

Create a new react or react-redux project.​

Important note: You will need to use React in your project to proceed.

To start a new project, open your terminal, and go into the folder that will hold the project.

Next type the following command to install react or react redux.

React (required)​

npx create-react-app my-app

React - Redux (optional)​

npx create-react-app my-app --template redux

Add your project to gitlab​

Go to our Gitlab and setup a new project. in GitLab. Once the setup is complete, Follow the instructions on the page to link your project to this new repository. Once this is complete, continue..

Modify your projects package.json file​

First step to connecting is to modify the contents of package.json. The first object well modify will be scripts.

Existing​

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Modify​

You'll add a new run command that will specify the port the application will run on.

Important note: replace #### with a unique port number not in use (http://localhost:####). You can see the ports in use on this page.

    "dev": "PORT=#### react-scripts start"
  "scripts": {
    "dev": "PORT=#### react-scripts start",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Next, well want to specify the route (or path) of where the application is stored on the server. To do this, we'll add another line to the package.json file.

  "homepage": "/prototypes/name-of-project-in-gitlab"

Important note: Heres a complete example of a projects package.json file that is connected to our services.

Install Dependencies​

After we modify our package file, well want to install the other services locally and run them.

Important note: You will need all three services running concurrently, to connect the application. These additional dependencies can be installed and run from any folder.

Frontend - Login UI​

1.CLONE​
git clone git@gitlab.com:pearson-ct/pearson-unify/unify-front-end.git
2.INSTALL​
yarn install
3.RUN​
yarn run dev

Authentication Server​

1.CLONE​
git clone git@gitlab.com:pearson-ct/pearson-unify/unify-authentication.git
2.INSTALL​
yarn install
3.RUN​
yarn start

Book Service​

1.CLONE​
git clone git@gitlab.com:pearson-ct/pearson-unify/unify-book-service.git
2.INSTALL​
yarn install
3.RUN​
yarn run dev

Add your proxy to the server.​

Once you have your services running, open up the unify-front-end project. It was the first project we cloned in the above step. Navigate to and open the following file: src > setupProxy.js. Add the following to the end of the file:

Important note: replace #### with the port you chose in the steps above and add the name of your project in git lab.

    app.use(
    '/prototypes/name-of-project-in-gitlab',
    createProxyMiddleware({
        target: 'http://localhost:####/',
        changeOrigin: true
    })
);

Run your application.​

Now that the proxy has been added to the frontend, you can run your project.

yarn run dev

You should now be locally connected to our services, and the project can be viewed at: http://localhost:3000/prototypes/name-of-project-in-gitlab.

For the final step make sure you commit the changes to both:

1. Your application.

2. Unify-front-end application.

Deploy project.​

Once your project is ready you can easily deploy and view your project. Push all your committed changes and login to our dashboard:. Click the deploy prototype button and follow the instructions.

Important note: Once the app has been deployed, you can visit your project at: https://unify-xdmwx.ondigitalocean.app/prototypes/name-of-project-in-gitlab

Now that you're connected, you can:

  1. Connect your app to authentication.
  2. Use our api's to get book data.