From f3091dd136de635a1324c03d75daf924cbab6ae4 Mon Sep 17 00:00:00 2001 From: Martin Spencer Date: Fri, 7 Sep 2018 11:19:57 +0200 Subject: [PATCH 1/5] index.css is part of step 1 --- frontend/STEP-DESCRIPTION.MD | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/STEP-DESCRIPTION.MD b/frontend/STEP-DESCRIPTION.MD index 6da4c14..7027493 100644 --- a/frontend/STEP-DESCRIPTION.MD +++ b/frontend/STEP-DESCRIPTION.MD @@ -6,7 +6,6 @@ In this step we will just remove some things generate by `create-react-app` so w - Files that we will delete for now, because they are outside of the scope of this workshop: - `./src/App.css` - - `./src/index.css` - `./src/logo.svg` - `./src/App.test.js` - Also just ignore `./src/registerServerWorker.js` for now. From 6fd924bfc1b4a0b88373a7f3b0c10db0f6ee2f34 Mon Sep 17 00:00:00 2001 From: Martin Spencer Date: Sat, 8 Sep 2018 14:26:09 +0200 Subject: [PATCH 2/5] remote backend and backend docs into the backend dir --- README.md | 49 +----------------------------------------- backend/README.md | 50 +++++++++++++++++++++++++++++++++++++++++++ frontend/package.json | 3 ++- 3 files changed, 53 insertions(+), 49 deletions(-) create mode 100644 backend/README.md diff --git a/README.md b/README.md index b02dfd5..7148064 100644 --- a/README.md +++ b/README.md @@ -33,51 +33,4 @@ To work on the app code you need to have the following dependencies installed: # Backend development/Hosting the backend locally -> **Important! Please read!** -> -> The repository contains the `settings.php` file with the database credentials. This should NEVER be done with real-life projects. -> -> (Also the `sites/default/files` directory is under version control. This is probably also not a good idea in non-demo projects) - -The backend is built using `docker4drupal` ([Visit project documentation](https://docs.wodby.com/stacks/drupal/local/)) - -You need to have the following dependencies installed: - -- `docker` -- `composer` -- `docker-compose` on Linux - -## Getting started - -1. Go into the `./backend` directory: - ```bash - $ cd backend - ``` -2. Install backend dependencies: - ```bash - $ cd htdocs && composer install && cd .. - ``` -3. Start local development server (You will probably have to wait a minute, because importing the database can take a while. Before this is complete you will see an `The website encountered an unexpected error. Please try again later.` error.): - ```bash - $ docker-compose up -d - ``` -4. Clean the cache - ```bash - $ docker-compose exec php drush cr -r /var/www/html/htdocs/web - ``` -5. You can access the backend by pointing your browser to [http://dc2018-react-backend.docker.localhost/](http://dc2018-react-backend.docker.localhost/) - -## Persisting database changes - -Persist database changes (will be imported on next `docker-compose up -d`: - -```bash -# In ./backend/ -$ ./persist-db.sh -``` - -## Stopping local development server - -```bash -$ docker-compose down -``` +This is not needed for the workshop as we will use a hosted backend. If you want to install it locally, follow the steps described in `./backend/README.md`. diff --git a/backend/README.md b/backend/README.md new file mode 100644 index 0000000..35b5d63 --- /dev/null +++ b/backend/README.md @@ -0,0 +1,50 @@ +> **Important! Please read!** +> +> The repository contains the `settings.php` file with the database credentials. This should NEVER be done with real-life projects. +> +> (Also the `sites/default/files` directory is under version control. This is probably also not a good idea in non-demo projects) + +The backend is built using `docker4drupal` ([Visit project documentation](https://docs.wodby.com/stacks/drupal/local/)) + +You need to have the following dependencies installed: + +- `docker` +- `composer` +- `docker-compose` on Linux + +## Getting started + +1. Go into the `./backend` directory: + ```bash + $ cd backend + ``` +2. Install backend dependencies: + ```bash + $ cd htdocs && composer install && cd .. + ``` +3. Start local development server (You will probably have to wait a minute, because importing the database can take a while. Before this is complete you will see an `The website encountered an unexpected error. Please try again later.` error.): + ```bash + $ docker-compose up -d + ``` +4. Clean the cache + ```bash + $ docker-compose exec php drush cr -r /var/www/html/htdocs/web + ``` +5. You can access the backend by pointing your browser to [http://dc2018-react-backend.docker.localhost/](http://dc2018-react-backend.docker.localhost/) + +6. Point the app to use the local backend by changing the property `apiBase` in `package.json` to the above URL. + +## Persisting database changes + +Persist database changes (will be imported on next `docker-compose up -d`: + +```bash +# In ./backend/ +$ ./persist-db.sh +``` + +## Stopping local development server + +```bash +$ docker-compose down +``` diff --git a/frontend/package.json b/frontend/package.json index 91c879e..732db61 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,6 +14,7 @@ "eject": "react-scripts eject" }, "config": { - "apiBase": "http://dc2018-react-backend.docker.localhost" + "// apiBase for local development": "http://dc2018-react-backend.docker.localhost", + "apiBase": "http://dev.vm231.hosting.1xinternet.de" } } From dbd1d359ab99e1f2425a76a7082e7fe262379e29 Mon Sep 17 00:00:00 2001 From: Martin Spencer Date: Sat, 8 Sep 2018 14:27:23 +0200 Subject: [PATCH 3/5] ignore plattform reqs composer install --- backend/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/README.md b/backend/README.md index 35b5d63..d93d69f 100644 --- a/backend/README.md +++ b/backend/README.md @@ -20,7 +20,7 @@ You need to have the following dependencies installed: ``` 2. Install backend dependencies: ```bash - $ cd htdocs && composer install && cd .. + $ cd htdocs && composer install --ignore-platform-reqs && cd .. ``` 3. Start local development server (You will probably have to wait a minute, because importing the database can take a while. Before this is complete you will see an `The website encountered an unexpected error. Please try again later.` error.): ```bash From 99cb4b1226d6a98a08cf085ffb5a4604c47cdf4f Mon Sep 17 00:00:00 2001 From: Martin Spencer Date: Mon, 10 Sep 2018 20:35:17 +0200 Subject: [PATCH 4/5] better docs for step 2 --- frontend/STEP-DESCRIPTION.MD | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/frontend/STEP-DESCRIPTION.MD b/frontend/STEP-DESCRIPTION.MD index 0dd5b22..dbc1bed 100644 --- a/frontend/STEP-DESCRIPTION.MD +++ b/frontend/STEP-DESCRIPTION.MD @@ -2,21 +2,28 @@ We will look at all the things `create-react-app` generated for us (For the full CRA documentation, take a look at the `README.md` file) -1. App code is in `./src` +## ./src - 1. `./src/index.js` is the entry point. Here we mount the root React component `` +Your actual App source code. + + 1. `./src/index.js` is the entry point. Here we mount the root React component `App` 2. `./src/App.js` is where the root component is defined. - 3. Ignore: `./src/registerServiceWorker.js` -2. Other meta information and templates for the app are in `./public` +## ./public + +Templates and assets. 1. `./public/favicon.ico` The app icon 2. `./public/index.html` The template for the generated app HTML entry file 3. `./public/manifest.json` Meta information for browsers to recognise this as an app. -3. `./package.json` This contains the meta information for our app project. More importantly CRA has added some scripts which we can use: +## ./package.json - 1. `yarn start` – Start the development server and open a browser at `localhost:3000` - 2. `yarn build` – Build the whole app as an optimised bundle which can be used in production +Meta information for our app project. -4. `./build` This is only visible once we run `yarn build` – It is the optimised and production ready App. +We added the `apiBase` config property which represents the base URL of the API we want to talk with. This is used in later steps. + +CRA has added some scripts which we can use: + + 1. `yarn start` – Start the development server and open a browser at `localhost:3000` + 2. `yarn build` – Build the whole app (into `./build` as an optimised bundle which can be used in production From a2c67460bc5104a49625487483e50065e01af2fb Mon Sep 17 00:00:00 2001 From: Martin Spencer Date: Sat, 3 Nov 2018 11:30:16 +0100 Subject: [PATCH 5/5] update backend url --- frontend/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index 2323354..06eef42 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,6 +15,6 @@ }, "config": { "// apiBase for local development": "http://dc2018-react-backend.docker.localhost", - "apiBase": "http://react-training.1xinternet.de/" + "apiBase": "http://react-training.1xinternet.de" } }